jQuery UI and Plugins

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.ﬁlamentgroup.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 Datepicker $("#datepicker").datepicker();

UI Progressbar $("#progressbar").progressbar({ value: 37 });

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();

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- notiﬁcation-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

http://miageprojet2.unice.fr	551
http://www.slideshare.net	66
http://techno-sphere.blogspot.com	8
http://blog.naver.com	1

jQuery UI and Plugins

by Marc Grabanski on Jun 11, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 626

Statistics

jQuery UI and Plugins — Presentation Transcript