반응형

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.

    반응형
    반응형

    모바일웹에서 새 창 닫기

     

     

    function popClose(){
               window.open('', '_self', '');
               window.close();
            }

     

    반응형
    반응형

    Chart.JS - SIMPLY STUNNING  HTML5 JS Chart and Gauge Widgets

     

    http://chartjs.devexpress.com/

     

    Dynamic client side data visualization

    Whether you are creating traditional websites, sites that target mobile devices, or native apps built with HTML5 JavaScript and compiled with Apache Cordova (PhoneGap), ChartJS provides high-performance and elegant data visualization options for all your business intelligence needs.

     

     

     

     

     

     

     

    반응형
    반응형
    PhoneJS - HTML5 JavaScript Mobile Development Framework

     

    http://phonejs.devexpress.com/

     

    Create mobile apps with HTML5 and JavaScript for different screens and platforms

      

    HTML5 JavaScript framework for smartphones and tablets

    PhoneJS contains everything you'll need to create native client applications using HTML5 and JavaScript with a single codebase and deliver solutions that target today's most popular smartphones and tablet devices.

    With a touch-optimized user experience, natively rendered widgets, straightforward page navigation, view management, and data access layers, PhoneJS is a single page application (SPA) framework for your next iOS, Android and WindowsPhone application, ready for online publication or packaged as a store-ready native app using Apache Cordova (PhoneGap).

     

     

    Demos

    DX WorkoutQR Code 

    DX Work out

    A sample application that demonstrates the power of the PhoneJS framework and ChartJS data visualization widgets. DXWorkout uses local storage to store data and the PhoneGap API for its splash screen and to persist user data when leaving the application (incoming call, switch to another app, back to home screen, etc). Built with MVVM in mind, DXWorkout illustrates the separation of app logic from its UI. It’s iPhone 5 compatible and includes full source code with PhoneGap Build config.

    Run DemoView Sourcehttp://dxpr.es/10oXsNf
    Kitchen SinkQR Code

    Kitchen Sink

    PhoneJS ships with over 30 touch optimized HTML JS widgets that are automatically styled for each target platform. The Kitchen Sink demo illustrates the use of each widget and how you can use them to build store-ready applications for the App Store, Google Play or Microsoft Store.

    Run DemoView Sourcehttp://dxpr.es/14lqpt4
    Tip CalculatorQR Code

    Tip Calculator

    TipCalculator is a straightforward PhoneJS application, with a single view and view model. It’s been designed to help you learn the basics of the PhoneJS framework. Description

    Run Demo

     

     

     

    반응형
    반응형

    Pop Easy — Easy modal windows with jQuery

    pop easy

     

    반응형
    반응형

    18 Best jQuery Carousel Plugins

    jquery-image-scale-carousel

    jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery Carousel plugin allows users to present their website contents such as videos, images, and text in creative and attractive way. jQuery carousel plugins make it easy for developers to easily use and implement plugins to achieve desire and visually stunning looks for their websites.

    In this article we have gathered 18 free best jQuery Carousel plugins that will make your tasks easy and help you to easily present your website contents and images in creative and innovative way. Following jQuery carousel plugins are absolutely free and each of them comes with different features, functionality and several options for customization. I hope you will find these plugins handy, useful and right choice for your next and upcoming projects.

    If you like the article you might be interested in our other article on 15 Best jQuery Image Slider Plugins

    1. Tiny Circleslider

    circular-slider
    Tiny Circleslider is a circular slider / carousel. That was built to provide web developers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any webpage. It was built using the javascript jQuery library. It supports iPhone, iPad and Android as well. A interval can be set to slide automatically every given milliseconds. You can fire a callback after every move. It is easy customizable and lightweight with only 130 lines of code. The minified size is only 4 KB.

    Source & Demo

    2. Flexisel

    Flexisel
    Flexisel is a jQuery carousel plugin that works well on screen sizes down-to-mobile. It has settings for enabling autoplay, defining the animation speed and stopping on hover or not.The standard layout of Flexisel adapts to different screen sizes but also, the plugin provides an option to customize the “number of visible items” for the screen sizes preferred which offers a great experience for users.

    Source & Demo

    3. Cycle 2

    Cycle2
    Cycle, a pretty old yet very popular jQuery slideshow plugin now has a new, improved version: Cycle2. The plugin is perfect for anyone looking to create a completely customized slideshow as it does not declare any markup or style. And, its functionality is flexible too. Cycle2 supports responsive layouts, has options for everything (global and per slide) and can be extended easily using a full-featured API.

    Source & Demo

    4. Minimit Gallery

    minimit-gallery
    Minimit Gallery is a highly customizable, library agnostic plugin that does galleries, slideshows, carousels, slides, practically everything that has multiple states in less than 10kb Using Minimit Gallery you have more time to focus on the ideation and the dynamics of your interface, all the logic functionality instead is managed by the plugin. It’s designed for advanced JavaScript/Jquery programmers because you need to code all the animations and the css of the gallery. It has been tested on IE7+, Firefox, Safari and Chrome.

    Source & Demo

    5. CarouFredSel

    caroufredsel
    jQuery.carouFredSel is a plugin that turns any kind of HTML element into an infinite, circular carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, automatically, by pressing buttons or keys on the keyboard.
    You can dynamically add and remove items to/from the carousel. It is compatible with most popular (jQuery) lightbox-plugins. The carouFredSel-plugin was built using the jQuery-library. It is licensed under the MIT-license.

    Source & Demo

    6. Slider Kit

    jquery-slider-kit
    Slider Kit is a very flexible jQuery plugin that enables us to create almost any type of slideshows like photo galleries, news sliders, carousels and more. It has support for both horizontal + vertical sliders and items can be navigated via buttons, mousewheel, image click or keyboard. There are lots of options provided like auto-start being on/off, animation types, and navigation being an infinite loop or not, starting position of the slideshow and much more.

    Source & Demo

    7. Tiny Carousel

    tiny-carousel
    Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

    Source & Demo

    8. jCoverflip

    jcoverflip
    jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set. It has many features like drag or click functionality to showcase featured content items or demand by the users, ability to showcase both images and content associated with an item, module integration with Drupal or standalone version and many more.

    Source & Demo

    9. jQuery Image Scale Carousel

    jquery-image-scale-carousel
    It is a jQuery plugin which auto-scales the images into appropriate height and width keeping their aspect ratio. The plugin simply converts an array of images to a slider and supports manual browsing with previous-next controls and auto-play. The download package also includes a PHP-based example which creates the “images array” itself by scanning a given directory.

    Source & Demo

    10. Slides js

    slidesjs
    SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions.

    Source & Demo

    11. Agile Carousel

    agilecarousel
    Agile Carousel is a jQuery plugin that allows us to create flexible (both in function and design) slideshows. The plugin uses JSON for the data format of the slides. So, they can easily be provided remotely and integration with any other system (like CMSs) will be easier. You can select between “fade” or “slide” as the transition effect, duration of the transitions and intervals between each slide can all be defined.

    Source & Demo

    12. Barouseul

    Barousel
    Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content.

    Source & Demo

    13. Circular Content Carousel

    cicruclar-carousel
    This plugin uses slider which holds the content along with their brief description, when users click on content a small box expands next to the content slider, where users can read and see the detail information related to the topic and slider yet navigates.

    Source & Demo

    14. Elastislide

    elastislide
    Elastislide is a responsive jQuery carousel plugin that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

    Source & Demo

    15. Cloud Carousel

    cloudcarousel
    Cloud Carousel is a free option with 3D effects. The images rotate in a circular fashion with realistic perspective and reflections are also show.

    Source & Demo

    16. jQuery Infinite Carousel Plugin

    jquery-infinite-carousuel
    The Infinite Carousel is a jQuery plugin that allows you to showcase any number of images and videos in a carousel-like fashion. Unlike some other carousels, the Infinite Carousel displays items in a continuous loop no matter how you navigate. Try out the demos below to see how versatile the Infinite Carousel is.

    Source & Demo

    17. jQuery Liquid Carousel Plugin

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

    Source & Demo

    18. jCarouseul Lite

    jCarousel Lite
    jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

    Source & Demo
    반응형

    + Recent posts