jQuery – UI & Themes "Write less, do more"

1. jQuery – UI & Themes"Write less, do more" Built in interface elements

2. jQuery UI Library • Set of prebuilt functionality in a companion library that enhances the capabilities of the standard jQuery library • Interactions-same effects as in base library but expanded capabilities • Widgets-ui controls • Accordions • Datepickers • Menus • Tabs • Effects- similar to standard but color animation is not in base library and hide/show are enhanced • Design Elements packaged as Themes

3. www.jqueryui.com Step 1:Download the UI js file and link it to your web page

4. Widgets – Accordion • Displays collapsible contentpanels for presentinginformation in a limited amount of space. • Click headers to expand/collapse content that is broken into logical sections, much like tabs. • Optionally, toggle sections open/closed on mouseover. • The default underlying HTML markup is a series of headers (H3 tags) and content divs.

5. Accordion, code <div id="accordion"> <h3>Section 1</h3> <div> <p>Maurismauris ante, blandit. </p> </div> <h3>Section 2</h3> <div> <p>Sed non urna. Donec et ante.</p> </div> <h3>Section 3</h3> <div> <p>Sed non urna. Donec et ante.</p> </div> <h3>Section 4</h3> <div> <p>Sed non urna. Donec et ante.</p> </div> </div> <!—end of div id accordion--> <script> $(function() { $( "#accordion" ).accordion(); }); </script>

6. Accordion, using other tags • Use header option of the accordion method to designate other tags; content panels must be the sibling immediately after their associated headers. • Syntax: $('selector').accordion({header: tag}); • Example: h4 tags for headers followed by adjacent p tags <script> $(function() { • $( "#accordion" ).accordion({ header: "h4" }); }); </script>

7. Accordion Options:collapsible • Collapse all panels at start $(function() { $( "#accordion" ).accordion({ collapsible: true }); });

8. Accordion Options: hoverintent • Open panels on hover (instead of click) $(function() { $( "#accordion" ).accordion({ event: "click hoverintent" }); });

9. Widget – Tabs • A single content area with multiple panels,each associated with a header in a list. • Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. • Tabs have a particular set of markup that must be used in order for them to work properly: • The tabs themselves must be in either an ordered (<ol>) or unordered (<ul>) list • Each tab "title" must be inside of a list item (<li>) and wrapped by an anchor (<a>) with an hrefattribute • Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab.

10. Tabs, code <div id="tabs"> <ul> <li><a href="#tabs-1">Nunctincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aeneanlacinia</a></li> </ul> <div id="tabs-1"> <p>Proinelitarcu, rutrumcommodo, vehiculatempus.</p> </div> <div id="tabs-2"> <p>Morbitincidunt, dui sit ametfacilisisfeugiat, odiometus.</p> </div> <div id="tabs-3"> <p>Mauriseleifendest et turpis. Duis id erat. Suspendis.</p> <p>Duiscursus. Maecenas ligula eros, blanditnecmagna.</p> </div> </div> <script> $(function() { $( "#tabs" ).tabs(); }); </script>

11. Tabs Options: show(hide option is the same) • If and how to animate the showing (hiding) of the panel. • Boolean: When set to false, no animation will be used and the panel will be shown immediately. When set to true, the panel will fade in with the default duration and the default easing. • Number: The panel will fade in with the specified duration and the default easing. • String: The panel will be shown using the specified effect. The value can either be the name of a built-in jQuery animation method, such as "slideDown", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing. • Object: If the value is an object, then effect, delay, duration, and easing properties may be provided. If the effect property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeIn" will be used. If delay is omitted, then no delay is used.

12. Tabs Options: show|hide code example $( ".selector" ).tabs({ show: { effect: "blind", duration: 800 } }); $( ".selector" ).tabs({ hide: { effect: "explode", duration: 1000 } });

13. Widget – Datepicker • Select a date from a popup or inline calendar • The datepicker is tied to a standardform input field. • Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. • Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. • If a date is chosen, feedback is shown as the input's value.

14. Datepicker, code <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body>

15. Widget – Menus • Themeable menu with mouse andkeyboard interactions for navigation. • A menu can be created from any valid markup as long as the elements have a strict parent/child relationship. • The most commonly used element is the unordered list (<ul>) • Any menu item can be disabled by adding theui-state-disabled class to that element. • Divider elements can be created by including unlinked menu items that contain only spaces and/or dashes

16. Menus, code <ul id="menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3 <ul> <li>Item 3-1</li> <li>Item 3-2</li> <li>Item 3-3</li> <li>Item 3-4</li> <li>Item 3-5</li> </ul> </li> <li>Item 4</li> <li>Item 5</li> </ul> <script> $(function() { $( "#menu" ).menu(); }); </script>

17. Menus Options, icons • To add icons to the menu, include them in the markup: <ul id="menu"> <li><span class="ui-icon ui-icon-disk"></span>Save</li> </ul>

18. Themes • Use the ThemeRoller to • Select a theme from the Gallery • Create your own customized them • Download Theme as a zip archive that includes • CSS files • JS files • Images • include the downloaded theme content in your website

19. Theme: Roll Your Own • Start with a theme from the Gallery • Use the color pickers to customize elements • Fonts, Corners, Header, Toolbar, Content, Default and Hover States, Highlight, Error, Drop Shadows, Modal Overlays

20. Theme CSS for Accordions • If accordion specific styling is needed, the following CSS class names can be used: • ui-accordion: outer container of the accordion • ui-accordion-header: headers of the accordion • ui-accordion-icons: if the headers contain icons • ui-accordion-content: content panels of the accordion

21. Theme CSS for Tabs • If tabs specific styling is needed, the following CSS class names can be used:ui-accordion: outer container of the accordion • ui-tabs: outer container of the tabs • ui-tabs-collapsible: outer container when the collapsible option is set • ui-tabs-nav: list of tabs • ui-tabs-active class: active list item in the nav will have a • ui-tabs-anchor: anchors used to switch panels • ui-tabs-panel: panels associated with the tabs

22. Theme CSS for Menus • If menu specific styling is needed, the following CSS class names can be used: • ui-menu: outer container of the menu • ui-menu-icons: outer container if the menu contains icons • ui-menu-item: container for individual menu items • ui-menu-icon: submenu icons set via the icons option • ui-menu-divider: divider elements between menu items

23. Image Rotator <div id="photoShow"> <div class="current"> <a href="lifestyle/photos.htm"> <imgsrc="_images/ventura_01_thumb.jpg" alt="Photo Gallery" width="200" height="160" class="gallery" /></a> </div> <div> <a href="lifestyle/photos.htm"> <imgsrc="_images/ventura_02_thumb.jpg" alt="Photo Gallery" width="200" height="160" class="gallery" /></a> </div> <div> <a href="lifestyle/photos.htm"> <imgsrc="_images/ventura_02_thumb.jpg" alt="Photo Gallery" width="200" height="160" class="gallery" /></a> </div> <div> <a href="lifestyle/photos.htm"> <imgsrc="_images/ventura_02_thumb.jpg" alt="Photo Gallery" width="200" height="160" class="gallery" /></a> </div> <div> </div> <script type="text/javascript"> $(function() { // create the image rotator setInterval("rotateImages()", 2000); }); /*end document ready function */ function rotateImages() { varoCurPhoto = $('#photoShowdiv.current'); varoNxtPhoto = oCurPhoto.next(); if (oNxtPhoto.length == 0) { oNxtPhoto= $('#photoShowdiv:first'); } /* end if structure */ oCurPhoto.removeClass('current').addClass('previous'); oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000, function() {oCurPhoto.removeClass('previous'); }); /*end animate method and function */ } /*end rotateImages function */ </script> http://ist238.weldonswebworld.com/jQuery/lynda/jQuery_Essentials_2013/Exercise%20Files/07_realsite/Groundswell_Final/