jQueryUI
0 likes699 views
jQuery uses CSS selectors for targeting elements and allows jQuery functions to be chained together logically. jQuery accepts objects or strings to set options and link external scripts in the head tag, which will execute when the DOM loads even before external content finishes loading. jQuery fails silently, so errors won't prevent remaining code from executing.
jQueryUI
- 1. 1
- 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
- 4. 4
- 5. 5
- 6. Example – Tabbed panels 6
- 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. UI CSS Framework Classes 8
- 9. Initializing Tabbed Panel Widget call with default options, just like calling a plug-in call with custom options 9
- 10. Customized default options extend UI widget default options - fires before init 10
- 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. Methods destroy, disable, enable, option, options, widget, add, remove, enable, disable, select, load, url, length, abort, rotate setting options via option method 12
- 13. AJAX Tabs 13
- 14. Events Events (Name Properties) select, load, show, add, remove, enable, disable Event Types tabsselect, tabsload, tabsshow, tabsadd, tabsremove, etc. 14
- 15. Events Callback function attached to event name property fires before event completes 15
- 16. Events 16
- 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. 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
- 20. 20
- 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. Resources – Books 22
Editor's Notes
- #2: jQuery was released in January 2006\njQuery UI was announced September 17th, 2007 by John Resig in a blog post\n
- #3: Before we talk about the jQuery UI, a review of jQuery key concepts is in order.\n\n\nmost popular javascript library - in use by almost half of the top 10,000 most visited websites today\njQuery strengths\nconcise code - write more do less with jQuery methods\njQuery contains the following features:\nDOM traversal and modification (including support for CSS 1-3)\nCSS manipulation\nEffects and animations\nAJAX support\nExtensibility through plug-ins\nExcellent Cross-browser support\n
- #4: ThemeRoller allows you to create a customizable theme, use a preset, or customize a preset to your liking. You can set every possible CSS framework property here on the jQuery UI site. \nYou can always edit the CSS later as well. There will be a URI to &#x201C;view and modify this theme&#x201D; in the CSS file if you want to come back and use theme roller to make adjustments.\nThe CSS Framework is independent from the JavaScript code generated for the UI. This can come in handy as you can reuse these classes in your own code as you wish.\n
- #5: jQuery UI offers 3 categories of elements\n - effects -enhanced beyond the default jQuery effects - allows animation of color (& bkgrd, borders, outlines) & also animation of class transitions\n - interactions - drag, drop, sort, etc.\n - widgets - controls - progress bars, sliders, dialog boxes, tabs, etc.\n\nWhen you build your download, you can choose what components you actually need if not all of them. There is built in dependency checking.\nProduction file sizes - 332kb for everything vs. 205kb for form related elements (dialog, button, tabs, autocomplete)\n
- #6: Structure of the UI library download - an index.html file with demos of the widgets you chose\ncss folder - css files and sprites\ndevelopment folder - it is composed of individual components including those which are still in beta. There is also QUnit - used for unit testing\njs - jquery UI library code and a copy of jQuery core library\n\n
- #7: Tabbed panels are very popular and useful to present much information in a limited space. \nI&#x2019;m going to use them as the example to illustrate using a jQuery UI widget\nSo, we are going to have a specific HTML structure or HTML wireframe we can use with jQuery UI to create our widgets. Which is customizable - this can be changed via the tabTemplate option\n
- #8: Our strategies for customization of the tabbed panel widget:\n - CSS framework overrides\n - set configuration options\n - manipulate events or event types (more on this later)\n - utilization of the widget&#x2019;s methods\n
- #9: The jQuery UI CSS Framework applied to markup - what you&#x2019;ll see in firebug and generated source listings\n\nui- prefix used almost like a namespace, this can be changed and customized\n\nthe class names are extensive, but make logical sense and are easy to manage once you get used to the logic with which they are constructed. Can be used in your scripts and css to control appearance and behavior\nui-widget, ui-state, ui-icon (sprite)\n
- #10: With custom options we start to lose simple, terse coding one liners\n
- #11: now every time we create tabs, these are the default options - we can define this before the $(document).ready() block\n\nthe extensibility of jQuery is one of it&#x2019;s greatest strengths\n
- #12: notice we pass an object to set multiple options, and an array to target multiple objects, in this case the tab index numbers.\n
- #13: rotate options are time in milliseconds and boolean whether or not the rotation continues when a user selects a tab\n
- #14: \n
- #15: \n
- #16: Fires before event completes so you can return false from your callback and prevent the event\n\nfunction takes the arguments of the event and the custom UI object \n
- #17: we can add our options to a configuration object and pass that to the tab widget object. And we are back to less complicated, concise code\n\nthe method arguments are always event & object (in this case tabs)\n
- #18: These binding methods also allow for advanced manipulations involving event propagation, bubbling, and delegation.\nIf a custom event is triggered by a browser event (click, drag, etc.) then event.originalEvent property will tell us the browser event\n
- #19: \n
- #20: by clicking on the tabs Object attached to the div id #tabbed_panel we can see more information about that object thanks to FireQuery\n
- #21: we can see our options - notice the effect option is set to a crossfade\ntabTemplate and panelTemplate allow us to customize even the HTML wireframe\n
- #22: \n
- #23: All three of these books delve into the jQuery UI \n\njQuery in Action provides a more in depth explanation of the JavaScript principles in play when using jQuery\nIt also more extensively covers jQuery UI - make sure you are looking at the second edition if you check this book out\n