jQuery – UI & Themes "Write less, do more"
description
Transcript of jQuery – UI & Themes "Write less, do more"
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/