Embed Size (px)
DESCRIPTION
Dive into jQuery UI and its CSS framework, as well as some of the better plugins in the jQuery landscape.
Citation preview
jQuery UI and Pluginsby 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
.ui-state-activejQuery UI Classes
.ui-state-active
.ui-state-default
jQuery UI Classes
.ui-widget-header
.ui-state-active
.ui-state-default
jQuery UI Classes
.ui-widget-content
.ui-widget-header
.ui-state-active
.ui-state-default
jQuery UI Classes
UI Icons
.ui-icon
CSS Sprite
Add rounded corners to anything
.ui-corner-all
Add rounded corners to anything
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-state-default
UI Class Quick Tip
Add hover by grabing buttons with .ui-state-default and attach hover class.
.ui-state-hover
.ui-state-default
UI Class Quick Tip
Add hover by grabing buttons with .ui-state-default and attach hover class.
.ui-state-hover
$(“.ui-state-default”).hover(function(){ $(this).addClass(“ui-state-hover”); }),function(){ $(this).removeClass(“ui-state-hover”); })
);
.ui-state-default
UI Class Quick Tip
Add hover by grabing buttons with .ui-state-default and attach hover class.
http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
More info:
.ui-state-hover
$(“.ui-state-default”).hover(function(){ $(this).addClass(“ui-state-hover”); }),function(){ $(this).removeClass(“ui-state-hover”); })
);
Customize your CSSwith ThemeRoller
Bring ThemeRoller right into your page
Design your own theme
jQuery UI Aristo Themehttp://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme
jQuery UI Widgets
UI Button
$(“button”).button();
<button>A button element</button>
UI Button
$(“button”).button();
<button>A button element</button>
<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();
Radio Group
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
$("#dialog").dialog();
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
UI Dialog
$("#dialog").dialog();
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
UI Datepicker
$("#datepicker").datepicker();
UI Datepicker
$("#datepicker").datepicker();
UI Progressbar
$("#progressbar").progressbar({ value: 37 });
UI Progressbar
$("#progressbar").progressbar({ value: 37 });
$("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 Autocomplete
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
$("#draggable").draggable();
User Interaction
$("#draggable").draggable();
$("#droppable").droppable({ accept: '#draggable', drop: function(event, ui) { // do something }});
User Interaction
Add droppable that accepts draggable
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
$(...).animate({ backgroundColor: "#68BFEF" }, 500);
UI EffectsAnimate background color in .5 seconds
$(...).animate({ backgroundColor: "#68BFEF" }, 500);
UI EffectsAnimate background color in .5 seconds
$(...).switchClass('currentClass','newClass', 500);
Animate to newClass in .5 seconds
$(...).animate({ backgroundColor: "#68BFEF" }, 500);
UI EffectsAnimate background color in .5 seconds
$(...).switchClass('currentClass','newClass', 500);
Animate to newClass in .5 seconds
$(...).hide("drop", { direction: "down" }, 500);
Hide elements with drop animation
http://marcgrabanski.com/article/building-a-tmnt-game-with-jquery
My Fun Little Tutorial
Building a Ninja Turtles Game with jQuery
jQuery UI Widget Factory
$.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(); } }});
Writing Plugins
http://jqueryui.com/docs/Developer_Guide
http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu-notification-widget/
jQuery UI Growl Notification
Example UI Widget
jQuery UI in Practice
http://mjgin.com/img/portfolio/videos/subarucms.swf
Video Example
UI Datepicker
UI Datepicker
UI Sortable
UI Tabs
UI Datepicker
UI Sortable
UI Tabs
UI Dialog
UI Datepicker
UI Sortable
What about Plugins?
JS Treehttp://www.jstree.com/
WYM Editorhttp://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)
Callbacks (events)
$(...).plugin({ option1: value, option2: value });
$(...).plugin({ onSomeAction: function(){
// callback action})
});
Identify Good Plugin API
Properties (options)
Callbacks (events)
Methods
$(...).plugin({ option1: value, option2: value });
$(...).plugin({ onSomeAction: function(){
// callback action})
});
$(...).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.
http://marcgrabanski.com/article/jquery-plugins-toolbox
My “Plugins Toolbox”
Thank you!
Marc Grabanski: http://marcgrabanski.com
Twitter: @1Marc
