A video of this class is (or will be) posted at: http://echo360.uml.edu/heines201516/guiprogramming1.html
Reminder: Friday, November 13, is that last day to withdraw from courses with a grade of “W”
Related reading for this class: JS&jQ:TMM Ch. 9
Two approaches
Interactions add basic mouse-based behaviors to any element.
You can create sortable lists, resizable elements, drag & drop behaviors and more with just a few lines or code.
Interactions also make great building blocks for more complex widgets and applications.
Widgets are full-featured UI controls that bring the richness of desktop applications to the Web.
All widgets provide a solid core with plenty of extension points for customizing behavior, as well as full theming support.
Effects add support for animating colors and class transitions, as well as providing several additional easings.
In addition, a full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal.
- Effect
- Visibility
- Class Animation
- Color Animation
Utilities used by jQuery UI to build interactions and widgets.
As you can quickly see, some of these widgets are also available in HTML5, but support in HTML5 is more limited.
The jQuery UI library also supplies themes, which you can construct with the ThemeRoller.
To install the jQuery UI library, all you have to do is:
(1) Download the jQuery UI library as a ZIP file from jqueryui.com/download
(2) Unzip that ZIP file (jquery-ui-1.11.2.zip as of this writing) and you should have a directory named jquery-ui-1.11.2 that contains 8 jquery-ui files and an index.html file that provides demos
(function($) { // JavaScript code })(jQuery)Source: jquery-howto.blogspot.com/2008/12/what-heck-is-function-jquery.html
$ is set as a parameter, it will mask any globally defined references to $ within that particular anonymous function$ as a variable or functionThus, the following structures are equivalent
// Version 1 (function($) { // JavaScript code })(jQuery) // Version 2 var myFunction = function($) { // JavaScript code }; myFunction(jQuery);
And by the way, there is an incredible wealth of jQuery information posted at jquery-howto.blogspot.com
The API for each component consists of a series of different methods.
While these are all technically methods, it is useful to categorize them based on their particular function.
Method Type Description The plugin
methodThis method is used to initialize the component and is simply the name of the component followed by parentheses. This is also referred to as the “widget” method. Shared API methods
- The
destroymethod can be used with any of the components, to completely disable the widget being used and in most cases, returns the underlying HTML to its original state.- The
optionmethod is used by all components to get or set any configuration option after initialization.- The
enableanddisablemethods are used by most library components to enable or disable the component.- The
widgetmethod, exposed by all widgets, returns a reference to the current widget.Specialized methods Each component has one or more methods unique to that particular component that perform specialized functions.
Methods are consistently called throughout each of the different components by passing the method that we'd like to call, as a simple string to the component's plugin method, with any arguments that the method accepts passed as strings after the method name.
$("#someElement").accordion("destroy");
Some methods, like standard JavaScript functions, accept arguments that trigger different behavior in the component.
$("#someElement").tabs("disable", 1);
The disable method, when used in conjunction with the tabs widget, accepts an integer, which refers to the index of the individual tab within the widget.
enable method:
$("#someElement").tabs("enable", 1);
Sometimes the arguments that are passed to the method vary between components.
The option method is slightly more complex than the other common methods, but it’s also more powerful.
option method in getter mode to retrieve the current value of an option,
we could use the following code:
$("#someElement").accordion("option", "navigation");
getter mode, we just supply the option name that we'd like to retrieve.option method in setter mode, we supply the option name and the new value as arguments:
$("#someElement").accordion("option", "navigation", true);
option method to set several different options at once, for example:
$("#someElement").accordion("option", {
navigation: true,
autoHeight: false
});
The API for each component also contains a rich event model that allows us to easily react to different interactions.
We have two ways of working with events in jQuery UI.
(1) Each component allows us to add callback functions that are executed when the specified event is fired, as values for configuration options.
var config = {
select: function() {
// JavaScript code
}
};
(2) The other way of working with events is to use jQuery's bind() method.
$("#someElement").bind("tabsselect", function() {
// JavaScript code
});
bind() method are executed after the event has been fired, while callbacks specified using configurationselect event will be triggered by the actual tab that is selected, not the tabs widget as a whole.Some of the custom events fired by jQuery UI components are cancellable and if stopped, can be used to prevent certain actions from taking place.
false in the callback function of the beforeclose event:
beforeclose: function() {
if (readyToClose === false) {
return false ;
}
false would be returned by the callback function and the dialog would remain open. Any anonymous functions that we supply as callback functions to the different events, automatically pass two arguments:
To use these two objects we just specify them as arguments to the function:
select: function(e, ui) {
e.target ...
ui.index ...
}
Source: jQuery UI 1.8 p. 62, jQuery UI 1.10 p. 60
The HTML (JS&jQ:TMM, p. 302)
DIV with class tabbedPanelsul) with class tabs
li) element contains
DIV element The CSS (JS&jQ:TMM, p. 304)
li) elements left so that they are horizontal rather than vertical (page 304)panel class to ensure that the style applies only within a panelThe JavaScript (JS&jQ:TMM, p. 306)
active class from the previously selected tabactive class to the just-clicked tabRun 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:
Alternatively, you can run this program from:
View the source code and look up any part of it that you don’t understand in the book.
runnable web page of the above code
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-tabsAllows tab-specific structural CSS to be applied. ui-widgetSets generic font styles that are inherited by nested elements. ui-widget-contentProvides theme-specific styles. ui-corner-allApplies rounded corners to the container.
For the <ul> element within the container <div>
Classname Purpose ui-tabs-navAllows tab-specific structural CSS to be applied. ui-helper-resetNeutralizes browser-specific styles applied to <ul>elements.ui-helper-clearfixApplies the clear-fix as this element has children that are floated. ui-widget-headerProvides theme-specific styles. ui-corner-allApplies rounded corners.
For the individual <li> elements that form a part of the tab headings
Classname Purpose ui-state-defaultApplies the standard, non-active, non-selected, non-hovered state to the tab headings. ui-corner-topApplies rounded corners to the top edges of the elements. ui-tabs-selectedThis 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-activeApplies 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-selectedprovides the functional CSS, whileui-state-activeprovides the visual, decorative styles.
For the panel elements that hold each tab’s content
Classname Purpose ui-tabs-panelApplies structural CSS to the content panels. ui-widget-contentApplies theme-specific styles. ui-corner-bottomApplies rounded corners to the bottom edges of the content panels.
Each components in the UI library also has a series of options that control the widget features hat are enabled by default.
tabs() widget method.
var tabOpts = { "selected" : tabToSelect } ; // 0-based
$("#tablabels").tabs( tabOpts ) ;
Option Default Value Used to... ajaxOptionsnullSpecify additional Ajax options. We can use any of the options exposed by jQuery’s $.ajax()method such asdata,type,url, and so on.cachefalseControl whether the remote data is loaded only once when the page initializes, or is reloaded every time the corresponding tab is clicked. collapsiblefalseAllow 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. cookienullShow the active tab using cookie data on page load. The cookie plugin is required for this option to be used. disabledfalseDisable 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. fxnullSpecify 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. selected0Show 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.
Various events are exposed by the tabs widget.
Event Fired when... addA new tab is added. disableA tab is disabled. enableA tab is enabled. loadA tab’s remote data has loaded. removeA tab is removed. selectA tab is selected. showA 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)
bind() method to bind an event handler to a custom event, fired by the tabs widget in the same way that we could bind to a standard DOM event, such as a click.
Event Fired when... tabsaddA tab has been added to the interface. tabsdisableA tab has been disabled. tabsenableA tab has been enabled. tabsloadA remote tab has loaded. tabsremoveA tab has been removed from the interface. tabsselectA tab is selected. tabsshowA tab is shown. (function($) { $("#myTabs").tabs(); $("#myTabs").bind("tabsselect", function(e, tab) { alert("The tab at index " + tab.index + " was selected"); }); })(jQuery);
The tabs widget also provides a rich set of methods that we can use to control its behavior programmatically.
Method Used to... abortStop any animations or Ajax requests that are currently in progress. addAdd a new tab programmatically, specifying the URL of the tab's content, a label, and optionally its index number as arguments. destroyCompletely remove the tabs widget. disableDisable 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. enableEnable a disable tab by passing a zero-based index number to the method, or enable the entire widget by passing nothing to the method. lengthReturn the number of tabs in the widget. loadReload an Ajax tab’s content, specifying the index number of the tab. optionGet or set any property after the widget has been initialized. removeRemove 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 hrefvalue.rotateAutomatically changes the active tab after a specified number of milliseconds have passed, either once or repeatedly. selectSelect a tab programmatically, which has the same effect as when a visitor clicks a tab, based on index number. urlChange 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). widgetReturn the element that the tabs()widget method is called on.
Simply add an href attribute to the underlying HTML
<li><a href="CourseDescriptionPanel.html">Information</a></li>
The Website
The HTML to set up the tabs widget interface
The modified CSS file to style the website as I wished