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

www.jqueryui.com

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

Widgets – Accordion Displays collapsible content

panels 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.

Accordion, code<div id="accordion"><h3>Section 1</h3> <div>

<p>Mauris mauris 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>

Accordion, using other tags

<script>$(function() { $( "#accordion" ).accordion({ header: "h4" });});</script>

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 (<ol>) or unordered

(<ul>) list Each tab "title" must be inside of a list item (<li>) and wrapped by an

anchor (<a>) 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<div id="tabs">

<ul><li><a href="#tabs-1">Nunc

tincidunt</a></li><li><a href="#tabs-2">Proin

dolor</a></li><li><a href="#tabs-3">Aenean

lacinia</a></li></ul><div id="tabs-1">

<p>Proin elit arcu, rutrum commodo, vehicula tempus.</p>

</div><div id="tabs-2">

<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus.</p>

</div><div id="tabs-3">

<p>Mauris eleifend est et turpis. Duis id erat. Suspendis.</p>

<p>Duis cursus. Maecenas ligula eros, blandit necmagna.</p>

</div></div>

<script> $(function() { $( "#tabs" ).tabs(); });</script>

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<script>$(function() {

$( "#datepicker" ).datepicker();});</script></head><body>

<p>Date: <input type="text" id="datepicker"></p></body>

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 (<ul>) 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<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>

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>

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 <script type="text/javascript"> $(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 */ </script>

<div id="photoShow"> <div class="current"> <a href="lifestyle/photos.htm"> <img src="_images/ventura_01_thumb.jpg" alt="Photo Gallery" width="200" height="160" class="gallery" /></a> </div> <div> <a href="lifestyle/photos.htm"> <img src="_images/ventura_02_thumb.jpg" alt="Photo Gallery" width="200" height="160" class="gallery" /></a> </div> <div> <a href="lifestyle/photos.htm"> <img src="_images/ventura_02_thumb.jpg" alt="Photo Gallery" width="200" height="160" class="gallery" /></a> </div> <div> <a href="lifestyle/photos.htm"> <img src="_images/ventura_02_thumb.jpg" alt="Photo Gallery" width="200" height="160" class="gallery" /></a> </div> <div></div>http://ist238.weldonswebworld.com/jQuery/lynda/jQuery_Essentials_2013/Exercise%20Files/07_realsite/Groundswell_Final/