JQUERY – UI & THEMES "WRITE LESS, DO MORE" Built in interface elements

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

Step 1: Download the UI js file and link it to your web page

Widgets – Accordion  Displays collapsible content panels for presenting information 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.

Accordion, code Section 1 Mauris mauris ante, blandit. Section 2 Sed non urna. Donec et ante. Section 3 Sed non urna. Donec et ante. Section 4 Sed non urna. Donec et ante. $(function() { $( "#accordion" ).accordion(); }); $(function() { $( "#accordion" ).accordion(); });

Accordion, using other tags $(function() { $( "#accordion" ).accordion({ header: "h4" }); }); $(function() { $( "#accordion" ).accordion({ header: "h4" }); });  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

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

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

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 ( ) or unordered ( ) list  Each tab "title" must be inside of a list item ( ) and wrapped by an anchor ( ) with an href attribute  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.

Tabs, code Nunc tincidunt Proin dolor Aenean lacinia Proin elit arcu, rutrum commodo, vehicula tempus. Morbi tincidunt, dui sit amet facilisis feugiat, odio metus. Mauris eleifend est et turpis. Duis id erat. Suspendis. Duis cursus. Maecenas ligula eros, blandit necmagna. $(function() { $( "#tabs" ).tabs(); }); $(function() { $( "#tabs" ).tabs(); });

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.

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

Widget – Datepicker  Select a date from a popup or inline calendar  The datepicker is tied to a standard form 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.

Datepicker, code $(function() { $( "#datepicker" ).datepicker(); }); Date:

Widget – Menus  Themeable menu with mouse and keyboard 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 ( )  Any menu item can be disabled by adding the ui-state-disabled class to that element.  Divider elements can be created by including unlinked menu items that contain only spaces and/or dashes

Menus, code Item 1 Item 2 Item 3 Item 3-1 Item 3-2 Item 3-3 Item 3-4 Item 3-5 Item 4 Item 5 $(function() { $( "#menu" ).menu(); }); $(function() { $( "#menu" ).menu(); });

Menus Options, icons  To add icons to the menu, include them in the markup: Save

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

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

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

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

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

Image Rotator $(function() { // create the image rotator setInterval("rotateImages()", 2000); }); /*end document ready function */ function rotateImages() { var oCurPhoto = $('# photoShow div.current '); var oNxtPhoto = oCurPhoto.next(); if (oNxtPhoto.length == 0) { oNxtPhoto = $('#photoShow div: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 */