Download as PDF, PPTX
![UI Autocomplete $("input#autocomplete").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });](https://image.slidesharecdn.com/jquery-ui-plugins-100611025520-phpapp02/75/jQuery-UI-and-Plugins-36-2048.jpg)
![UI Autocomplete $("input#autocomplete").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });](https://image.slidesharecdn.com/jquery-ui-plugins-100611025520-phpapp02/75/jQuery-UI-and-Plugins-37-2048.jpg)
Uploaded byMarc Grabanski
jQuery UI and Plugins
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.
jQuery UI and Plugins
- 1. jQuery UI andPlugins by Marc Grabanski
- 2. What do youthink of when you hear, “jQuery UI”?
- 3.
- 4. Yeah, it’s gotwidgets.
- 5. But, what elseshould you think of?
- 6. One of themost under- hyped piece of software on the web
- 7. jQuery UI CSSframework
- 8.
- 9.
- 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 cornersto anything
- 15. Add rounded cornersto anything .ui-corner-all
- 16. UI Class QuickTip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default
- 17. UI Class QuickTip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-hover
- 18. UI Class QuickTip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default .ui-state-hover
- 19. UI Class QuickTip 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 QuickTip 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 rightinto your page
- 23. Design your owntheme jQuery UI Aristo Theme http://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme
- 24.
- 25. UI Button <button>A buttonelement</button> $(“button”).button();
- 26. UI Button <button>A buttonelement</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.
- 33.
- 34.
- 35.
- 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.
- 42.
- 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.
- 48. User Interaction $("#draggable").draggable(); Add droppablethat accepts draggable $("#droppable").droppable({ accept: '#draggable', drop: function(event, ui) { // do something } });
- 49.
- 50. UI Effects • Coloranimations
- 51. UI Effects • Coloranimations • Animated add/remove class
- 52. UI Effects • Coloranimations • Animated add/remove class • Effects like shake and drop
- 53. UI Effects • Coloranimations • Animated add/remove class • Effects like shake and drop • Easing
- 54. UI Effects Animate backgroundcolor in .5 seconds $(...).animate({ backgroundColor: "#68BFEF" }, 500);
- 55. UI Effects Animate backgroundcolor in .5 seconds $(...).animate({ backgroundColor: "#68BFEF" }, 500); Animate to newClass in .5 seconds $(...).switchClass( 'currentClass','newClass', 500);
- 56. UI Effects Animate backgroundcolor 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 LittleTutorial Building a Ninja Turtles Game with jQuery http://marcgrabanski.com/article/building-a-tmnt-game-with-jquery
- 58. jQuery UI WidgetFactory
- 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 jQueryUI Growl Notification http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu- notification-widget/
- 61. jQuery UI inPractice
- 62.
- 64.
- 65. UI Datepicker UI Sortable
- 66. UI Datepicker UI Sortable UI Tabs
- 67. UI Datepicker UI Sortable UI Tabs UI Dialog
- 68.
- 70.
- 71. JS Tree http://www.jstree.com/ WYMEditor http://www.wymeditor.org/
- 72.
- 73. Good Plugin Checklist •APIis like jQuery core
- 74. Good Plugin Checklist •APIis like jQuery core •Buzz / mentions in blogs
- 75. Good Plugin Checklist •APIis like jQuery core •Buzz / mentions in blogs •Documentation
- 76. Good Plugin Checklist •APIis like jQuery core •Buzz / mentions in blogs •Documentation •CSS makes sense to you
- 77. Good Plugin Checklist •APIis like jQuery core •Buzz / mentions in blogs •Documentation •CSS makes sense to you •Author is committed to support
- 78. Good Plugin Checklist •APIis 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.
- 80. Identify Good PluginAPI Properties (options) $(...).plugin({ option1: value, option2: value });
- 81. Identify Good PluginAPI Properties (options) $(...).plugin({ option1: value, option2: value }); Callbacks (events) $(...).plugin({ onSomeAction: function(){ // callback action }) });
- 82. Identify Good PluginAPI Properties (options) $(...).plugin({ option1: value, option2: value }); Callbacks (events) $(...).plugin({ onSomeAction: function(){ // callback action }) }); Methods $(...).plugin(“destroy”);
- 83.
- 84. Good Plugin Support •GoogleGroups, mailing lists
- 85. Good Plugin Support •GoogleGroups, mailing lists •Comments are ok when plugin is new
- 86. Good Plugin Support •GoogleGroups, mailing lists •Comments are ok when plugin is new •Does author modify plugin based on feedback?
- 87. Good Plugin Support •GoogleGroups, mailing lists •Comments are ok when plugin is new •Does author modify plugin based on feedback? •Code repository, when was last commit?
- 88.
- 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.
- 94.