0
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 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-...
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-default        ...
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-...
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" ...
UI Accordion
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>…content…</div>
    <h3><a href="#">Sect...
UI Accordion
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>…content…</div>
    <h3><a href="#">Sect...
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", "a...
UI Autocomplete




$("input#autocomplete").autocomplete({
  source: ["c++", "java", "php",
"coldfusion", "javascript", "a...
UI Tabs
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li...
UI Tabs
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li...
UI Tabs
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li...
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...
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 newCla...
UI Effects
Animate background color in .5 seconds
$(...).animate({
  backgroundColor: "#68BFEF"
}, 500);
Animate to newCla...
My Fun Little Tutorial
Building a Ninja Turtles Game with jQuery




    http://marcgrabanski.com/article/building-a-tmnt-...
jQuery UI Widget Factory
Writing Plugins
$.widget("ui.mywidget", {
  // default options
  options: {
    option1: "defaultValue",
    hidden: true
...
Example UI Widget

jQuery UI Growl Notification




http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu-
            ...
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 ...
Good Plugin Checklist


•API is like jQuery core
•Buzz / mentions in blogs
•Documentation
•CSS makes sense to you
•Author ...
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)
 $...
Identify Good Plugin API


Properties (options)
 $(...).plugin({ option1: value, option2: value });

Callbacks (events)
 $...
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 ...
Good Plugin Support



•Google Groups, mailing lists
•Comments are ok when plugin is new
•Does author modify plugin based ...
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 featu...
Good Plugin Community



•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?
•Depreciated featu...
My “Plugins Toolbox”




http://marcgrabanski.com/article/jquery-plugins-toolbox
Thank you!
Marc Grabanski:
http://marcgrabanski.com

Twitter: @1Marc
jQuery UI and Plugins
jQuery UI and Plugins
Upcoming SlideShare
Loading in...5
×

jQuery UI and Plugins

10,331

Published on

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

Published in: Technology, Art & Photos

Transcript of "jQuery UI and Plugins"

  1. 1. jQuery UI and Plugins by Marc Grabanski
  2. 2. What do you think of when you hear, “jQuery UI”?
  3. 3. Widgets?
  4. 4. Yeah, it’s got widgets.
  5. 5. But, what else should you think of?
  6. 6. One of the most under- hyped piece of software on the web
  7. 7. jQuery UI CSS framework
  8. 8. jQuery UI Classes
  9. 9. jQuery UI Classes .ui-state-active
  10. 10. jQuery UI Classes .ui-state-active .ui-state-default
  11. 11. jQuery UI Classes .ui-state-active .ui-state-default .ui-widget-header
  12. 12. jQuery UI Classes .ui-state-active .ui-state-default .ui-widget-header .ui-widget-content
  13. 13. UI Icons .ui-icon CSS Sprite
  14. 14. Add rounded corners to anything
  15. 15. Add rounded corners to anything .ui-corner-all
  16. 16. UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default
  17. 17. UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-hover
  18. 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. 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. 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. 21. Customize your CSS with ThemeRoller
  22. 22. Bring ThemeRoller right into your page
  23. 23. Design your own theme jQuery UI Aristo Theme http://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme
  24. 24. jQuery UI Widgets
  25. 25. UI Button <button>A button element</button> $(“button”).button();
  26. 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. 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. 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. 29. UI Dialog <div id="dialog" title="Dialog Title">I'm in a dialog</div>
  30. 30. UI Dialog <div id="dialog" title="Dialog Title">I'm in a dialog</div> $("#dialog").dialog();
  31. 31. UI Dialog <div id="dialog" title="Dialog Title">I'm in a dialog</div> $("#dialog").dialog();
  32. 32. UI Datepicker $("#datepicker").datepicker();
  33. 33. UI Datepicker $("#datepicker").datepicker();
  34. 34. UI Progressbar $("#progressbar").progressbar({ value: 37 });
  35. 35. UI Progressbar $("#progressbar").progressbar({ value: 37 });
  36. 36. UI Autocomplete $("input#autocomplete").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
  37. 37. UI Autocomplete $("input#autocomplete").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
  38. 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. 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. 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. 41. User Interaction
  42. 42. User Interaction • Draggable
  43. 43. User Interaction • Draggable • Droppable
  44. 44. User Interaction • Draggable • Droppable • Sortable
  45. 45. User Interaction • Draggable • Droppable • Sortable • Resizable
  46. 46. User Interaction • Draggable • Droppable • Sortable • Resizable • Selectable
  47. 47. User Interaction $("#draggable").draggable();
  48. 48. User Interaction $("#draggable").draggable(); Add droppable that accepts draggable $("#droppable").droppable({ accept: '#draggable', drop: function(event, ui) { // do something } });
  49. 49. UI Effects
  50. 50. UI Effects • Color animations
  51. 51. UI Effects • Color animations • Animated add/remove class
  52. 52. UI Effects • Color animations • Animated add/remove class • Effects like shake and drop
  53. 53. UI Effects • Color animations • Animated add/remove class • Effects like shake and drop • Easing
  54. 54. UI Effects Animate background color in .5 seconds $(...).animate({ backgroundColor: "#68BFEF" }, 500);
  55. 55. UI Effects Animate background color in .5 seconds $(...).animate({ backgroundColor: "#68BFEF" }, 500); Animate to newClass in .5 seconds $(...).switchClass( 'currentClass','newClass', 500);
  56. 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. 57. My Fun Little Tutorial Building a Ninja Turtles Game with jQuery http://marcgrabanski.com/article/building-a-tmnt-game-with-jquery
  58. 58. jQuery UI Widget Factory
  59. 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. 60. Example UI Widget jQuery UI Growl Notification http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu- notification-widget/
  61. 61. jQuery UI in Practice
  62. 62. Video Example http://mjgin.com/img/portfolio/videos/subarucms.swf
  63. 63. UI Datepicker
  64. 64. UI Datepicker UI Sortable
  65. 65. UI Datepicker UI Sortable UI Tabs
  66. 66. UI Datepicker UI Sortable UI Tabs UI Dialog
  67. 67. What about Plugins?
  68. 68. JS Tree http://www.jstree.com/
  69. 69. JS Tree http://www.jstree.com/ WYM Editor http://www.wymeditor.org/
  70. 70. Good Plugin Checklist
  71. 71. Good Plugin Checklist •API is like jQuery core
  72. 72. Good Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs
  73. 73. Good Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation
  74. 74. Good Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation •CSS makes sense to you
  75. 75. Good Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation •CSS makes sense to you •Author is committed to support
  76. 76. 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/
  77. 77. Identify Good Plugin API
  78. 78. Identify Good Plugin API Properties (options) $(...).plugin({ option1: value, option2: value });
  79. 79. Identify Good Plugin API Properties (options) $(...).plugin({ option1: value, option2: value }); Callbacks (events) $(...).plugin({ onSomeAction: function(){ // callback action }) });
  80. 80. Identify Good Plugin API Properties (options) $(...).plugin({ option1: value, option2: value }); Callbacks (events) $(...).plugin({ onSomeAction: function(){ // callback action }) }); Methods $(...).plugin(“destroy”);
  81. 81. Good Plugin Support
  82. 82. Good Plugin Support •Google Groups, mailing lists
  83. 83. Good Plugin Support •Google Groups, mailing lists •Comments are ok when plugin is new
  84. 84. Good Plugin Support •Google Groups, mailing lists •Comments are ok when plugin is new •Does author modify plugin based on feedback?
  85. 85. 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?
  86. 86. Good Plugin Community
  87. 87. Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc
  88. 88. Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc •Does the author make update announcements?
  89. 89. Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc •Does the author make update announcements? •Depreciated features well-documented.
  90. 90. Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc •Does the author make update announcements? •Depreciated features well-documented. Identify that the author is communicating.
  91. 91. My “Plugins Toolbox” http://marcgrabanski.com/article/jquery-plugins-toolbox
  92. 92. Thank you! Marc Grabanski: http://marcgrabanski.com Twitter: @1Marc
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×