반응형
반응형
30 Awesome jQuery Plugins All Designers Should Check Today

 

Alertify.js

Browser dialog boxes never looked so good. Try this jQuery plugin. An unobtrusive customizable Javascript notification system. Includes modal dialogs and non-modal notifications.

alertify

Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior).

Avgrund-Modal

iCheck

iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.

iCheck

Long Press

With Long Press, you can insert rare characters as easily as on Android or iOS.

Long-Press

Complexify

Websites have a responsibility to users to accurately tell them how good a password is, and this is not an easy job. Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons

Complexify

jQuery Knob

This cool jQuery plugin allows you to create really cool circular knobs that spin as you scroll.

jQuery-Knob

Pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

pickadate

Chosen

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

Chosen

Fancy Input

Use this plugin if you want to make HTML input field typing fun with some CSS3 effects. This plugin does not have any current plans to support any version of IE.

Fancy-Input

Windows

A handy, loosely-coupled jQuery plugin for full-screen scrolling windows.

windows

Sticky

Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.

Sticky-Plugin

Super Scrollorama

With this super jQuery plugin, you can create super cool scroll animations in any website.

Super-Scrollorama

Stellar.js

Parallax has never been easier. Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element.

Stellar

Scrollpath

Scrollpath is a plugin for defining custom scroll paths. It uses canvas flavored syntax to draw lines and arcs.

Scrollpath

Textillate.js

Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.

Textillate

Arctext.js

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Arctext

Bacon

Bacon is a jQuery plugin that allows you to wrap text around a bezier curve or a line.

Bacon

Lettering.js

A jQuery plugin for radical web typography. Web type is exploding all over the web but CSS currently doesn’t offer complete down-to-the-letter control. So this jQuery plugin gives you that control.

Lettering

FitText.js

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

FitText

Gridster.js

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

gridster

Freetile

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

Freetile

nanoScroller.js

nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website.

nanoScroller

Tubular.js

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you’re on your way.

tubular

Backstretch

A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.

Backstretch

iPicture

iPicture creates interactive pictures with extra descriptions, embedded video, links or everything else using javascript and css3.

iPicture

Adipoli

Adipoli is a simple jQuery plugin used to bring stylish image hover effects.

Adipoli

TiltShift.js

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

tiltShift

Threesixty.js

Amazing jQuery plugin for creating draggable 360s.

ThreeSixty

Spectragram

An easy jQuery plugin for Instagram API to fetch and display user, popular or tags photo feeds inside your web application or site.

Spectragram

jQuery Countdown

A simple jQuery plugin for creating a countdown timer. It shows the remaining days, hours, minutes and seconds to your event, as well as an animated updates on every second.

jQuery-Countdown

jQuery PointPoint

This jQuery plugin draw users’ attention to a specific part of the page, in the form of a small arrow that is displayed next to their mouse cursor.

jQuery-PointPoint

Social Feed

A jQuery plugin which shows a user feed from the popular social networks.

Social-Feed

PercentageLoader

A tiny jQuery plugin for displaying progress in a visual and engaging way. jQuery.Percentage Loader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. Installation and use is quick and simple. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional), using vectors rather than images so can be easily deployed at various sizes.

PercentageLoader

Tooltipster

A powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS.

Tooltipster

Toolbar.js

Toolbar allows you to quickly create tool tip style toolbars for use in web applications and websites. The toolbar is easily customizable using the Twitter Bootstrap icons and provides flexibility around the toolbars display and number of icons.

Toolbar

반응형
반응형

Link : http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/

 

Pickadate.js — Responsive date & time picker

Pickadate.js is a responsive, mobile-friendly jQuery date & time input picker. Just insert one line of code and get a date picker with a popup calendar.

pickadate.js

 

반응형
반응형

effect

 

http://api.jquery.com/category/effects/

jQuery Hide/Show
jQuery Fade
jQuery Slide
jQuery Animate
jQuery stop()
jQuery CallbackjQuery Chaining

 

 

Animation

 

http://api.jquery.com/animate/

http://w3schools.com/jquery/jquery_animate.asp

 

 

UI

 

http://api.jqueryui.com/

 

 

 

Sizzle - javascript CSS selector engine

http://sizzlejs.com/

 

 

QUnit - javascript Unit Testing Framework

 - 자바스크립트 코드 테스트

http://qunitjs.com/

 

QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!

 

 

 

Simplify Ajax development with jQuery

http://www.ibm.com/developerworks/xml/library/x-ajaxjquery/index.html

 

Table of contents

 

 

 

 

반응형
반응형

[마소] 2013.07 Angular.JS - 서비스들과 의존성 주입

 

AngularJS의 서비스는 특정 기능을 담당하는 객체들을 서비스라고 한다.

공통된 특정 작업을 수행하는 싱글톤(singleton) 객체다.

singleton은 인스턴스가 단 1개만 존재하는 것을 보증하는 디자인 패턴이다.

예를 들어 기본 서비스로 제공하는 $http service  는 브라우저의 낮은 레벨에 해당하는 XMLHttpRequest 객체의 기능을 제공한다.

 

Angular services are singletons that carry out specific tasks common to web apps, such as the$http service that provides low level access to the browser'sXMLHttpRequest object.

 

To use an Angular service, you identify it as a dependency for the dependent (a controller, or another service) that depends on the service. Angular's dependency injection subsystem takes care of the rest. The Angular injector subsystem is in charge of service instantiation, resolution of dependencies, and provision of dependencies to factory functions as requested.

 

service

  • $anchorScroll  HTML5 spec에 지정된 규칙과 location hash의 현재 값에 따라 관련 요소의 
                               스크롤 처리를 한다.
  • $cacheFactory 캐시화할 객체를 관리한다.
  • $compile         HTML문자열이나 DOM의 템플릿을 스코프에 연결하도록 컴파일한다.
  • $controller       콘트롤러를 인스턴스화 한다.
  • $document       JQuery(lite)로 감싼 window.document 이다.
  • $exceptionHandler  angularJS에서 감지되는 모든 예외가 위임된다.
  • $filter                     정보 표현에 대한 formatting 처리를 한다.
  • $http                     XMLHttpReqeust 또는 JSONP에 대한 기능을 제공한다.
  • $httpBackend    테스트하는 경우 $http에 대한 대체처리가 된다. 직접 호출은 불가하다.
  • $interpolate     $compile의 처리와 같이 데이터 바인딩의 처리를 컴파일한다.
  • $locale        다국어 규칙을 제공한다.
  • $location     window.location 보다 발전된 기능을 제공한다. (HTML5 처리 등)
  • $log            로깅을 처리한다.
  • $parse        AngularJS 표현식으로 변환한다.
  • $q              Kris Kowal's Q(promise/deferred)와 동일한 기능을 제공한다.
  • $rootElement  AngularJS APP의 루트 요소를 얻는다.
  • $rootScope    AngularJS APP의 루트 스코프를 얻는다.
  • $route           URL을 감시해 해당 경로의 컨트롤러와 뷰를 mapping한다.
  • $routeParams  URL상의 파라미터를 관리한다.
  • $templateCache HTML templete을 cache한다.
  • $timeout     window.setTimeout과 같은 기능을 하지만 $exceptionHadler와 연동 처리된다.
  • $window   전역 변수 오염의 방지와 테스트를 위해 브라우저의 window와
                         동일한 기능을 하는 객체를 제공한다.
  •  

     

     

    * 의존성 주입 (Dependency Injection)
    의존성 주입 적용으로 얻을 수 있는 이점

    - 종속성의 설정을 컴파일 시에서 실행 시로 조정해 모듈 간의 결합도를 낮출 수 있다.

    - 여러 곳에서 사용 중인 모듈을 소스 코드의 수정없이 사용할 수 있어 재사용율이 높다.

    - 모의 객체 등을 이용한 단위 테스트 시 편의성을 높여준다.

     

    의존성 주입 패턴

    - 생산자 주입 : 필요한 의존성을 모두 포함하는 클래스의 생성자를 만들고, 그 생성자를 통해 의존성을 주입한다.(new 연산자를 통한 생성)

    - 세터(setter)를 통한 주입 : 의존성을 입력받는 세터 메소드를 만들어 의존성을 중비한다.

    - 인터페이스를 통한 주입 : 의존성을 주입하는 함수가 포함된 인터페이스를 작성하고, 이를 구현하도록 함으로써 실행 시 의존성을 주입한다.

     

     

     

     

     

    반응형
    반응형

    20 Most Popular Responsive jQuery Plugins

     

    1. LetteringJS

    Lettering JS

    Lettering.js is a beautifully scripted jQuery plugin for typography. Lettering.js has superseded the conventional way of including the typography fonts on the website with a very fast script coded in jQuery.

     

    2. TypeheadJS

    Typehead.js

    Like Google, you can also enable your websites search bar to suggest the results for the desired query. This Jquery plugin, powered by Twitter, namely Typehead.js has made it possible to make your search bar function like that.

     

    3. StellarJS

    Steller.js

    Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element.

     

    4. Perfect-Scrollbar

    Perfect Scroll bar

    This plugin transforms your standard scroll bar into a sleek and trendy one. You can adjust the color according to your need.

     

    5. DropZoneJS

    Dropzone

    DropzoneJS is an open source library that provides drag’n'drop file uploads with image previews. It’s synonymous to the WordPress upload area.

     

    6. FitText

    Fittext

    FittextJS has been a very successful plugin for displaying gigantic texts on the display screen. Earlier to FittextJS, images were used by the website designers which caused conflicts on the basis of responsiveness, but, now this plugin has not only hastened the process but also has solved the problem of responsiveness.

     

    7. Swipe.js

    Swipe

    Swipe is a perfect responsive slider suitable for websites desiring a full width slider below the header. Some of its features are responsiveness, resistant bounds and scroll prevention.

     

    8. FlexNav

    FlexNav

    FlexNav is perhaps the best Jquery plugin for responsive menus. Easy to setup and easy personalization are its key features.

     

    9. Flexisel

    Flexisel

    Flexisel is a beautifully designed responsive carousel jQuery plugin for a display of seamless images.

     

    10. ImageloaderJS

    ImageloaderJS

    Website designers generally ignore the importance of preloading images. This jQuery plugin will preload all the images on the website, increasing the overall loading speed of the website on the browsers. Especially recommended for websites with image galleries.

     

    11. Responsive jQuery Lightbox Plugin : Magnific Popup

    Responsive jQuery Lightbox Plugin : Magnific Popup

    Magnific Popup is a responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device.

     

    12. Tiny Circleslider

    Tiny Circleslider

    Tiny Circle slider is a circular slider/carousel. That was built to provide web developers with a cool but subtle alternative to all those standard carousels. Tiny Circle slider can blend in on any web page. It was built using the javascript jQuery library.

     

    13. jQuery Map Marker

    jQuery Map Marker

    This plugin makes it easy to put multiple markers on Map using Google Map API V3.Map Marker is very useful when you have a list of data & you want to show all of them on Map, too.

     

    14. Camera : jQuery Slideshow Plugin with Touch Support

    Camera : jQuery Slideshow Plugin with Touch Support

    A cool jQuery slideshow with diverse variation of transitions for your website.

     

    15. Responsive Touch-Friendly Audio Player

    Responsive Touch Audio jQuery script

    This user friendly responsive plugin will integrate a minimal audio player on your website for listening online music. Some of the features like being adaptive to browsers, showing the pre-loaded (buffered) audio and image-less CSS, have made it distinctive from other such kinds of plugins.

     

    16. Huge on Facebook

    Huge on Facebook

    This jQuery script is designed to highlight the links on websites that are actually generating conversation (on Facebook, at least). Like Google analytics, this plugin can be considered as Facebook analytics. The only difference this plugin is making is the display of analysis report to the general public rather than the administrator only.

     

    17. jQuery Spellchecker

    Spell Checker jQuery

    The jQuery spellchecker is a lightweight plugin that can be used to check the spelling of text within a form field or within a DOM tree. Can come handy with the content writers.

     

    18. Any List Scroller

    Any List Scroller

    Any List Scroller is the jQuery plugin to scroll any list, of any dimension, with any content.

     

    19. jQuery Stripe

    Stripe jQuery

    A jQuery plug-in to create a cool striped gallery object.

     

    20. jQuery Liquid Carousel Plugin

    jQuery Liquid Carousel plugin

    Liquid carousel is a jQuery plugin intended for liquid designs. Every time the container of the carousel gets re sized, the number of items in the list change to fit the new width.

    반응형
    반응형

    jQuery Plugins with Backbone – Articles List Shedding the Light Onto Sweet Couple

     

    Link : http://www.designfloat.com/blog/2013/07/18/jquery-backbone-plugins/

     

    Backbone.js Tutorial: jQuery Plugins and Moving Tasks

    jQuery Plugin with Backbone

    * * *

    jQuery Autocomplete Plugin for Backbone JS

    jQuery Plugin with Backbone

    * * *


    Building Mobile JavaScript WebApps With Backbone.js & jQuery: Part I

    jQuery Plugin with Backbone

    * * *

    jQuery UI Drag and Drop in a Backbone JS Application

    jQuery Plugin with Backbone

    * * *

    Using backbone.js with jQuery UI Modals

    jQuery Plugin with Backbone

    * * *

    jQuery UI and Backbone.js

    jQuery Plugin with Backbone

    * * *

    Autocomplete with jQuery plugin for backbone.js on remote api

    jQuery Plugin with Backbone

    * * *

    jQuery Validation Plugin and Backbone

    jQuery Plugin with Backbone

    * * *

    Backbone and Underscore: jQuery’s New Friends

    jQuery Plugin with Backbone

    * * *

    jQuery Plugin: backboneView() – jsFiddle demo by edslocombe

    jQuery Plugin with Backbone

    * * *

    Loading jQuery plugins using require.js and backbone.js

    jQuery Plugin with Backbone

    * * *

    Replacing JQuery Plugins With Backbone

    jQuery Plugin with Backbone

    * * *

    Use jQuery plugin with Backbone and Requirejs

    jQuery Plugin with Backbone

    * * *

    jQuery Mobile and backbone.js, the ugly

    jQuery Plugin with Backbone

    * * *

    Example backbone.js with jQuery plugin

    jQuery Plugin with Backbone

    * * *

    Organizing your Backbone.js + Require.js + jQuery application

    jQuery Plugin with Backbone

    * * *

    Using Backbone.js with jQuery Mobile

    jQuery Plugin with Backbone

     

    반응형

    + Recent posts