• Like
jQuery UI and Plugins
 

jQuery UI and Plugins

on

  • 10,671 views

Dive into jQuery UI and its CSS framework, as well as some of the better plugins in the jQuery landscape.

Dive into jQuery UI and its CSS framework, as well as some of the better plugins in the jQuery landscape.

Statistics

Views

Total Views
10,671
Views on SlideShare
8,707
Embed Views
1,964

Actions

Likes
15
Downloads
560
Comments
0

13 Embeds 1,964

http://miageprojet2.unice.fr 1816
http://www.slideshare.net 66
http://vothanhduy.com 43
http://vothanhduy.wordpress.com 18
http://techno-sphere.blogspot.com 12
http://techno-sphere.blogspot.com.es 2
http://techno-sphere.blogspot.co.uk 1
http://techno-sphere.blogspot.ca 1
http://techno-sphere.blogspot.tw 1
http://techno-sphere.blogspot.in 1
http://techno-sphere.blogspot.kr 1
http://blog.naver.com 1
http://techno-sphere.blogspot.ie 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery UI and Plugins jQuery UI and Plugins Presentation Transcript

    • jQuery UI and Plugins by Marc Grabanski
    • What do you think of when you hear, “jQuery UI”?
    • Widgets?
    • Yeah, it’s got widgets.
    • But, what else should you think of?
    • One of the most under- hyped piece of software on the web
    • jQuery UI CSS framework
    • jQuery UI Classes
    • jQuery UI Classes .ui-state-active
    • jQuery UI Classes .ui-state-active .ui-state-default
    • jQuery UI Classes .ui-state-active .ui-state-default .ui-widget-header
    • jQuery UI Classes .ui-state-active .ui-state-default .ui-widget-header .ui-widget-content
    • UI Icons .ui-icon CSS Sprite
    • Add rounded corners to anything
    • Add rounded corners to anything .ui-corner-all
    • UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default
    • UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-hover
    • UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default .ui-state-hover
    • UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default .ui-state-hover $(“.ui-state-default”).hover( function(){ $(this).addClass(“ui-state-hover”); }), function(){ $(this).removeClass(“ui-state-hover”); }) );
    • UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default .ui-state-hover $(“.ui-state-default”).hover( function(){ $(this).addClass(“ui-state-hover”); }), function(){ $(this).removeClass(“ui-state-hover”); }) ); More info: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
    • Customize your CSS with ThemeRoller
    • Bring ThemeRoller right into your page
    • Design your own theme jQuery UI Aristo Theme http://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme
    • jQuery UI Widgets
    • UI Button <button>A button element</button> $(“button”).button();
    • UI Button <button>A button element</button> $(“button”).button(); Radio Group <div id="radio1"> <input type="radio" id="radio1" name="radio" /> <label for="radio1">Choice 1</label> <input type="radio" id="radio2" name="radio" checked="checked" /> <label for="radio2">Choice 2</label> <input type="radio" id="radio3" name="radio" /> <label for="radio3">Choice 3</label> </div> $(“#radio1”).buttonset();
    • UI Accordion <div id="accordion"> <h3><a href="#">Section 1</a></h3> <div>…content…</div> <h3><a href="#">Section 2</a></h3> <div>…content…</div> <h3><a href="#">Section 3</a></h3> <div>…content…</div> </div>
    • UI Accordion <div id="accordion"> <h3><a href="#">Section 1</a></h3> <div>…content…</div> <h3><a href="#">Section 2</a></h3> <div>…content…</div> <h3><a href="#">Section 3</a></h3> <div>…content…</div> </div> $(“#accordion”).accordion();
    • UI Dialog <div id="dialog" title="Dialog Title">I'm in a dialog</div>
    • UI Dialog <div id="dialog" title="Dialog Title">I'm in a dialog</div> $("#dialog").dialog();
    • UI Dialog <div id="dialog" title="Dialog Title">I'm in a dialog</div> $("#dialog").dialog();
    • UI Datepicker $("#datepicker").datepicker();
    • UI Datepicker $("#datepicker").datepicker();
    • UI Progressbar $("#progressbar").progressbar({ value: 37 });
    • UI Progressbar $("#progressbar").progressbar({ value: 37 });
    • UI Autocomplete $("input#autocomplete").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
    • UI Autocomplete $("input#autocomplete").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
    • UI Tabs <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">...</div> <div id="tabs-2">...</div> <div id="tabs-3">...</div> </div>
    • UI Tabs <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">...</div> <div id="tabs-2">...</div> <div id="tabs-3">...</div> </div> $("#tabs").tabs();
    • UI Tabs <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">...</div> <div id="tabs-2">...</div> <div id="tabs-3">...</div> </div> $("#tabs").tabs();
    • User Interaction
    • User Interaction • Draggable
    • User Interaction • Draggable • Droppable
    • User Interaction • Draggable • Droppable • Sortable
    • User Interaction • Draggable • Droppable • Sortable • Resizable
    • User Interaction • Draggable • Droppable • Sortable • Resizable • Selectable
    • User Interaction $("#draggable").draggable();
    • User Interaction $("#draggable").draggable(); Add droppable that accepts draggable $("#droppable").droppable({ accept: '#draggable', drop: function(event, ui) { // do something } });
    • UI Effects
    • UI Effects • Color animations
    • UI Effects • Color animations • Animated add/remove class
    • UI Effects • Color animations • Animated add/remove class • Effects like shake and drop
    • UI Effects • Color animations • Animated add/remove class • Effects like shake and drop • Easing
    • UI Effects Animate background color in .5 seconds $(...).animate({ backgroundColor: "#68BFEF" }, 500);
    • UI Effects Animate background color in .5 seconds $(...).animate({ backgroundColor: "#68BFEF" }, 500); Animate to newClass in .5 seconds $(...).switchClass( 'currentClass','newClass', 500);
    • UI Effects Animate background color in .5 seconds $(...).animate({ backgroundColor: "#68BFEF" }, 500); Animate to newClass in .5 seconds $(...).switchClass( 'currentClass','newClass', 500); Hide elements with drop animation $(...).hide("drop", { direction: "down" }, 500);
    • My Fun Little Tutorial Building a Ninja Turtles Game with jQuery http://marcgrabanski.com/article/building-a-tmnt-game-with-jquery
    • jQuery UI Widget Factory
    • Writing Plugins $.widget("ui.mywidget", { // default options options: { option1: "defaultValue", hidden: true }, _create: function() { // creation code for mywidget // can use this.options if (this.options.hidden) { // and this.element this.element.hide(); } } }); http://jqueryui.com/docs/Developer_Guide
    • Example UI Widget jQuery UI Growl Notification http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu- notification-widget/
    • jQuery UI in Practice
    • Video Example http://mjgin.com/img/portfolio/videos/subarucms.swf
    • UI Datepicker
    • UI Datepicker UI Sortable
    • UI Datepicker UI Sortable UI Tabs
    • UI Datepicker UI Sortable UI Tabs UI Dialog
    • What about Plugins?
    • JS Tree http://www.jstree.com/
    • JS Tree http://www.jstree.com/ WYM Editor http://www.wymeditor.org/
    • Good Plugin Checklist
    • Good Plugin Checklist •API is like jQuery core
    • Good Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs
    • Good Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation
    • Good Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation •CSS makes sense to you
    • Good Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation •CSS makes sense to you •Author is committed to support
    • Good Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation •CSS makes sense to you •Author is committed to support •or.. Jörn made it http://bassistance.de/
    • Identify Good Plugin API
    • Identify Good Plugin API Properties (options) $(...).plugin({ option1: value, option2: value });
    • Identify Good Plugin API Properties (options) $(...).plugin({ option1: value, option2: value }); Callbacks (events) $(...).plugin({ onSomeAction: function(){ // callback action }) });
    • Identify Good Plugin API Properties (options) $(...).plugin({ option1: value, option2: value }); Callbacks (events) $(...).plugin({ onSomeAction: function(){ // callback action }) }); Methods $(...).plugin(“destroy”);
    • Good Plugin Support
    • Good Plugin Support •Google Groups, mailing lists
    • Good Plugin Support •Google Groups, mailing lists •Comments are ok when plugin is new
    • Good Plugin Support •Google Groups, mailing lists •Comments are ok when plugin is new •Does author modify plugin based on feedback?
    • Good Plugin Support •Google Groups, mailing lists •Comments are ok when plugin is new •Does author modify plugin based on feedback? •Code repository, when was last commit?
    • Good Plugin Community
    • Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc
    • Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc •Does the author make update announcements?
    • Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc •Does the author make update announcements? •Depreciated features well-documented.
    • Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc •Does the author make update announcements? •Depreciated features well-documented. Identify that the author is communicating.
    • My “Plugins Toolbox” http://marcgrabanski.com/article/jquery-plugins-toolbox
    • Thank you! Marc Grabanski: http://marcgrabanski.com Twitter: @1Marc