jQueryUI

907 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

jQueryUI

  1. 1. 1
  2. 2. jQuery Key Concepts jQuery uses CSS selectors for targeting jQuery functions can be chained together (logically) jQuery accepts objects or strings to set options can link your external scripts in the <head> – code will execute as soon as the DOM is loaded, even before external content (e.g., images) are loaded jQuery fails silently ... an error in your script will prevent the remaining code from being interpreted and executed. 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. Example – Tabbed panels 6
  7. 7. Tab customization strategies CSS Styling override/change CSS rules from the jQuery UI CSS Framework Configurable Options disabled, deselectable, fx, collapsible, etc. Events select, load, show, add, remove, enable, disable Event Types tabsselect, tabsload, tabsshow, tabsadd, tabsremove, etc. Methods destroy, disable, option, options, add, remove, select, load, etc. 7
  8. 8. UI CSS Framework Classes 8
  9. 9. Initializing Tabbed Panel Widget call with default options, just like calling a plug-in call with custom options 9
  10. 10. Customized default options extend UI widget default options - fires before init 10
  11. 11. Methods all UI widgets have at least these four common base methods – option, enable, disable, destroy call by passing method as a string tabs would already be initialized pass as option on creation 11
  12. 12. Methods destroy, disable, enable, option, options, widget, add, remove, enable, disable, select, load, url, length, abort, rotate setting options via option method 12
  13. 13. AJAX Tabs 13
  14. 14. Events Events (Name Properties) select, load, show, add, remove, enable, disable Event Types tabsselect, tabsload, tabsshow, tabsadd, tabsremove, etc. 14
  15. 15. Events Callback function attached to event name property fires before event completes 15
  16. 16. Events 16
  17. 17. Events Callback function attached to event type using the bind() method fires after event completes - triggering browser event event.originalEvent Can attach more than one callback function 13 17
  18. 18. Tools Firebug helps us see the UI CSS Framework applied (and any additional markup added) FireQuery extension for firebug allows testing jQuery statements at the console intelligently identifies jQuery code attached to DOM elements JS Lint support now since v1.4.3 - some messages you can ignore - http://docs.jquery.com/JQuery_Core_Style_Guidelines advice: use double quotes when defining strings 18
  19. 19. 19
  20. 20. 20
  21. 21. Resources http://www.learningjquery.com http://www.jquery4u.com/jquery-links/ http://www.petefreitag.com/cheatsheets/jqueryui-icons/ http://docs.jquery.com/Main_Page http://jqfundamentals.com/book/book.html Rebecca Murphy - free online book http://jqueryui.com/ 21
  22. 22. Resources – Books 22

×