UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines

Notes for Class No. 22

Exploring the jQuery UI Tabs Widget (continued) and the jQuery UI Slider Widget

Tuesday, November 17, 2015

A video of this class is (or will be) posted at:   http://echo360.uml.edu/heines201516/guiprogramming1.html


Handouts and Materials


Openings / Announcements / Reminders

Grader #1 Comments

Grader #2 Comments

Grader #3 Comments

JMH Comments

It should be needless to say that this is unacceptable.  *Never* assume that “the user won’t know the difference.”


Follow-up to the brief discussion we had in our last class about the 1960s ...


In the aftermath of last week’s tragedy in France and all those that have happened before and are yet to come


Class Notes

Related reading for this class:  JS&jQ:TMM Ch. 9


Introduction to the jQuery UI API  (continued)

Running the Textbook’s Tabbed Panels Example

Run the tabbed panels example that is built in the tutorial on pages 307-311 of JS&jQ:TMM.  Browse the source code to see how everything fits together.

If you have the book’s sample programs on your system, you can find the completed tabbed panels tutorial at:

{Your-Book-Root-Directory}\MM_JAVASCRIPT2E\chapter10\complete_tabs.html

If you do not have these programs, you can download them from:

http://examples.oreilly.com/9780596515898/MM_JAVASCRIPT.zip

Alternatively, you can run this program from:

http://jesseheines.com/~heines/91.461/resources/Book-McFarland-JavaScript_jQuery_2nd/MM_JAVASCRIPT2E/chapter10/complete_tabs.html

View the source code and look up any part of it that you don’t understand in the book.

Now let’s look at how you would do this with the jQuery UI library

runnable web page of the above code


A Minimal Tabbed Panel Program


Tabs Widget CSS Framework Classes  (jQuery UI 1.8 by Dan Wellman, pp. 64-66)

The following built-in classes are use by the Tabs Widget Framework to style the individual components

For the outer container <div>

Classname Purpose
ui-tabs Allows tab-specific structural CSS to be applied.
ui-widget Sets generic font styles that are inherited by nested elements.
ui-widget-content Provides theme-specific styles.
ui-corner-all Applies rounded corners to the container.

For the <ul> element within the container <div>

Classname Purpose
ui-tabs-nav Allows tab-specific structural CSS to be applied.
ui-helper-reset Neutralizes browser-specific styles applied to <ul> elements.
ui-helper-clearfix Applies the clear-fix as this element has children that are floated.
ui-widget-header Provides theme-specific styles.
ui-corner-all Applies rounded corners.

For the individual <li> elements that form a part of the tab headings

Classname Purpose
ui-state-default Applies the standard, non-active, non-selected, non-hovered state to the tab headings.
ui-corner-top Applies rounded corners to the top edges of the elements.
ui-tabs-selected This is only applied to the active tab.  On page-load of the default implementation, this will be the first tab.  Selecting another tab will remove this class from the currently selected tab and apply it to the newly selected tab.
ui-state-active Applies theme-specific styles to the currently selected tab.  This class name will be added to the tab that is currently selected, just like the previous classname.  The reason there are two class names is that ui-tabs-selected provides the functional CSS, while ui-state-active provides the visual, decorative styles.

For the panel elements that hold each tab’s content

Classname Purpose
ui-tabs-panel Applies structural CSS to the content panels.
ui-widget-content Applies theme-specific styles.
ui-corner-bottom Applies rounded corners to the bottom edges of the content panels.


Tabs Widget Options  (jQuery UI 1.8 by Dan Wellman, pp. 68-69)

Each components in the UI library also has a series of options that control the widget features hat are enabled by default.

Option Default Value Used to...
ajaxOptions null Specify additional Ajax options.  We can use any of the options exposed by jQuery’s $.ajax() method such as data, type, url, and so on.
cache false Control whether the remote data is loaded only once when the page initializes, or is reloaded every time the corresponding tab is clicked.
collapsible false Allow an active tab to be unselected if it is clicked, so that all of the content panels are hidden and only the tab headings are visible.
cookie null Show the active tab using cookie data on page load.  The cookie plugin is required for this option to be used.
disabled false Disable the widget on page load.  We can also pass an array of tab indices (zero-based) in order to disable specific tabs.
event "click" Specify the event that triggers the display of content panels.
fx null Specify an animation effect when changing tabs.  Supply an object literal or an array of animation effects.
idPrefix "ui-tabs-" Generate a unique ID and fragment identifier when a remote tab heading’s <a> element has no title attribute.
panelTemplate "<div></div>" Specifying the elements used for the content section of a tab panel.
selected 0 Show a tab panel other than the first one on page load (overrides the cookie property).
spinner "Loading…" Specify the loading spinner for remote tabs.
tabTemplate 
<li><a
 href="#{href}">
  <span>#{label}
  </span>
 </a>
</li>
 Specify the elements used when creating new tabs.  The #{href} and #{label} strings are replaced by the widget internally when the new tab is created.


Tabs Widget Events  (jQuery UI 1.8 by Dan Wellman, pp. 72-73)

Various events are exposed by the tabs widget.

Event Fired when...
add A new tab is added.
disable A tab is disabled.
enable A tab is enabled.
load A tab’s remote data has loaded.
remove A tab is removed.
select A tab is selected.
show A tab is shown. 
(function($){
  var handleSelect = function(e, tab) {
    $( "<p></p>" , 
       { 
         "text": "Tab at index " + tab.index + " selected",
         "class": "status-message ui-corner-all"
       }).appendTo(".ui-tabs-nav", "#myTabs").fadeOut( 5000, 
         function() {
           $(this).remove();
         }
       );
     } ,
   tabOpts = {
     select: handleSelect
   }
  $("#myTabs").tabs(tabOpts);
})(jQuery);

Binding to Tabs Widget Events  (jQuery UI 1.8 by Dan Wellman, p. 74)

Event Fired when...
tabsadd A tab has been added to the interface.
tabsdisable A tab has been disabled.
tabsenable A tab has been enabled.
tabsload A remote tab has loaded.
tabsremove A tab has been removed from the interface.
tabsselect A tab is selected.
tabsshow A tab is shown. 
(function($) {
  $("#myTabs").tabs();
  $("#myTabs").bind("tabsselect", function(e, tab) {
    alert("The tab at index " + tab.index + " was selected");
  });
})(jQuery);


Tabs Widget Methods  (jQuery UI 1.8 by Dan Wellman, p. 75)

The tabs widget also provides a rich set of methods that we can use to control its behavior programmatically.

Method Used to...
abort Stop any animations or Ajax requests that are currently in progress.
add Add a new tab programmatically, specifying the URL of the tab's content, a label, and optionally its index number as arguments.
destroy Completely remove the tabs widget.
disable Disable a specific tab by passing a zero-based index number to the method, or pass nothing to the method to disable the entire set of tabs.
enable Enable a disable tab by passing a zero-based index number to the method, or enable the entire widget by passing nothing to the method.
length Return the number of tabs in the widget.
load Reload an Ajax tab’s content, specifying the index number of the tab.
option Get or set any property after the widget has been initialized.
remove Remove a tab programmatically, specifying the index of the tab to remove.  If no index is supplied, the first tab is removed.  Tabs can also be removed using their href value.
rotate Automatically changes the active tab after a specified number of milliseconds have passed, either once or repeatedly.
select Select a tab programmatically, which has the same effect as when a visitor clicks a tab, based on index number.
url Change the URL of content given to an Ajax tab.  The method expects the index number of the tab and the new URL.  See also load (earlier in this table).
widget Return the element that the tabs() widget method is called on.



Using Ajax with the Tabs Widget  (jQuery UI 1.8 by Dan Wellman, p. 82)

Simply add an href attribute to the underlying HTML

<li><a href="CourseDescriptionPanel.html">Information</a></li>


An Extended Tabs Widget Example of Using Styles and Options

The Website

The HTML to set up the tabs widget interface

The modified CSS file to style the website as I wished


This is document http://jesseheines.com:8080/~heines/91.461/91.461-2015-16f/461-lecs/lecture22.jsp.  It was last modified on Friday, August 26, 2022 at 4:09 PM.
Copyright © 2022 by Jesse M. Heines.  All rights reserved.  May be freely copied or excerpted for educational purposes with credit to the author.