This document discusses jQuery UI and plugins. It provides an overview of jQuery UI classes that can be used to style elements. It also demonstrates several common jQuery UI widgets like buttons, accordions, dialogs, and tabs. The document discusses jQuery UI effects for animations and transitions. It provides tips for identifying good plugins based on aspects like their API, documentation, support, and community. Overall, the document is an introduction to using jQuery UI and evaluating jQuery plugins.

1. jQuery UI and Plugins
by Marc Grabanski

2. What do you think of when
you hear, “jQuery UI”?

3. Widgets?

4. Yeah, it’s got widgets.

5. But, what else should
you think of?

6. One of the most under-
hyped piece of software
on the web

7. jQuery UI CSS framework

8. jQuery UI Classes

9. jQuery UI Classes
.ui-state-active

10. jQuery UI Classes
.ui-state-active
.ui-state-default

11. jQuery UI Classes
.ui-state-active
.ui-state-default
.ui-widget-header

12. jQuery UI Classes
.ui-state-active
.ui-state-default
.ui-widget-header
.ui-widget-content

13. UI Icons
.ui-icon
CSS Sprite

14. Add rounded corners to anything

15. Add rounded corners to anything
.ui-corner-all

16. UI Class Quick Tip
Add hover by grabing buttons with
.ui-state-default and attach hover class.
.ui-state-default

17. UI Class Quick Tip
Add hover by grabing buttons with
.ui-state-default and attach hover class.
.ui-state-hover

18. UI Class Quick Tip
Add hover by grabing buttons with
.ui-state-default and attach hover class.
.ui-state-default .ui-state-hover

19. 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”); })
);

20. 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/

21. Customize your CSS
with ThemeRoller

22. Bring ThemeRoller right into
your page

23. Design your own theme
jQuery UI Aristo Theme
http://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme

24. jQuery UI Widgets

25. UI Button
<button>A button element</button>
$(“button”).button();

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

27. 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>

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

29. UI Dialog
<div id="dialog" title="Dialog Title">I'm in a dialog</div>

30. UI Dialog
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
$("#dialog").dialog();

31. UI Dialog
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
$("#dialog").dialog();

32. UI Datepicker
$("#datepicker").datepicker();

33. UI Datepicker
$("#datepicker").datepicker();

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

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

36. UI Autocomplete
$("input#autocomplete").autocomplete({
source: ["c++", "java", "php",
"coldfusion", "javascript", "asp", "ruby"]
});

37. UI Autocomplete
$("input#autocomplete").autocomplete({
source: ["c++", "java", "php",
"coldfusion", "javascript", "asp", "ruby"]
});

38. 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>

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

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

41. User Interaction

42. User Interaction
• Draggable

43. User Interaction
• Draggable
• Droppable

44. User Interaction
• Draggable
• Droppable
• Sortable

45. User Interaction
• Draggable
• Droppable
• Sortable
• Resizable

46. User Interaction
• Draggable
• Droppable
• Sortable
• Resizable
• Selectable

47. User Interaction
$("#draggable").draggable();

48. User Interaction
$("#draggable").draggable();
Add droppable that accepts draggable
$("#droppable").droppable({
accept: '#draggable',
drop: function(event, ui) {
// do something
}
});

49. UI Effects

50. UI Effects
• Color animations

51. UI Effects
• Color animations
• Animated add/remove class

52. UI Effects
• Color animations
• Animated add/remove class
• Effects like shake and drop

53. UI Effects
• Color animations
• Animated add/remove class
• Effects like shake and drop
• Easing

54. UI Effects
Animate background color in .5 seconds
$(...).animate({
backgroundColor: "#68BFEF"
}, 500);

55. UI Effects
Animate background color in .5 seconds
$(...).animate({
backgroundColor: "#68BFEF"
}, 500);
Animate to newClass in .5 seconds
$(...).switchClass(
'currentClass','newClass', 500);

56. 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);

57. My Fun Little Tutorial
Building a Ninja Turtles Game with jQuery
http://marcgrabanski.com/article/building-a-tmnt-game-with-jquery

58. jQuery UI Widget Factory

59. 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

60. Example UI Widget
jQuery UI Growl Notification
http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu-
notification-widget/

61. jQuery UI in Practice

62. Video Example
http://mjgin.com/img/portfolio/videos/subarucms.swf

64. UI Datepicker

65. UI Datepicker
UI Sortable

66. UI Datepicker
UI Sortable
UI Tabs

67. UI Datepicker
UI Sortable
UI Tabs
UI Dialog

68. What about Plugins?

70. JS Tree
http://www.jstree.com/

71. JS Tree
http://www.jstree.com/
WYM Editor
http://www.wymeditor.org/

72. Good Plugin Checklist

73. Good Plugin Checklist
•API is like jQuery core

74. Good Plugin Checklist
•API is like jQuery core
•Buzz / mentions in blogs

75. Good Plugin Checklist
•API is like jQuery core
•Buzz / mentions in blogs
•Documentation

76. Good Plugin Checklist
•API is like jQuery core
•Buzz / mentions in blogs
•Documentation
•CSS makes sense to you

77. Good Plugin Checklist
•API is like jQuery core
•Buzz / mentions in blogs
•Documentation
•CSS makes sense to you
•Author is committed to support

78. 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/

79. Identify Good Plugin API

80. Identify Good Plugin API
Properties (options)
$(...).plugin({ option1: value, option2: value });

81. Identify Good Plugin API
Properties (options)
$(...).plugin({ option1: value, option2: value });
Callbacks (events)
$(...).plugin({
onSomeAction: function(){
// callback action
})
});

82. Identify Good Plugin API
Properties (options)
$(...).plugin({ option1: value, option2: value });
Callbacks (events)
$(...).plugin({
onSomeAction: function(){
// callback action
})
});
Methods
$(...).plugin(“destroy”);

83. Good Plugin Support

84. Good Plugin Support
•Google Groups, mailing lists

85. Good Plugin Support
•Google Groups, mailing lists
•Comments are ok when plugin is new

86. Good Plugin Support
•Google Groups, mailing lists
•Comments are ok when plugin is new
•Does author modify plugin based on feedback?

87. 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?

88. Good Plugin Community

89. Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc

90. Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?

91. Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?
•Depreciated features well-documented.

92. Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?
•Depreciated features well-documented.
Identify that the author is communicating.

93. My “Plugins Toolbox”
http://marcgrabanski.com/article/jquery-plugins-toolbox

94. Thank you!
Marc Grabanski:
http://marcgrabanski.com
Twitter: @1Marc