A class-based user interface development framework.
It is super brilliant! It is really simple to work with your framework. I am really your fan ;) – Dmitri Dudin
Layers are absolutely positioned elements that fill their parents' width and height, and are used to create screens behind popups and loading icons, among other things. Layers inherit their parent's border-radius so to avoid sharp corners over parents that have rounded corners.
Popdowns, dropdowns, tabs and slides are class-based ui elements with two states. When they are visible, they have the class active. When they are not, they don't.
They share a common API for triggering active state. Firstly, they are activated when the user clicks on a link that refers to them by id:
<a href="#id_of_dropdown">Open dropdown</a>
Secondly, they can also be activated and deactivated programmatically:
jQuery('.dropdown').eq(2).trigger('activate');
jQuery('.dropdown').eq(2).trigger('deactivate');
Links that refer to popdowns, dropdowns, tabs and slides are also given the class active, making it easy to create stateful buttons. Transitions to and from active state are defined using CSS transitions.
Creating a popdown, dropdown, set of tabs or a slide is as easy as adding a class to a node. Here we add the class popdown to a div:
<a href="#arthur">Open dropdown</a> <div class="popdown" id="arthur"> <p>Ford, there is an infinite number of monkeys outside, who want to talk to us about this script for Hamlet they have worked out.</p> </div>
In addition to the common functionality, each of these ui classes has some specific behaviour.
Dropdowns are used to make menus and navigation. Once active, they deactivate when the user touches or mousedowns outside them, or when the user clicks on or inside them.
Popdowns are used to make menus, drawers, and elements that require explicit deactivation. Once active, they deactivate when the user touches or mousedowns outside them, or when a #close link is clicked inside them:
<a href="#close">Close</a>
Tabs and slides are functionally identical. Two classes are provided for convenience, as tabs and slides tend to be styled very differently. Where we refer to 'tabs' below, assume that we also mean slides.
In any group of tabs, only one can be active at any one time. Normally, all .tab or .slide siblings of the tab or slide currently being activated automatically become a group.
To be more explicit, the grouping can be overridden with a data-selector attribute containing a selector for all other tabs in the group. The selector can be any that jQuery understands. Here are two tabs grouped using a data-selector attribute:
<div class="quote_tab tab" id="ford" data-selector=".quote_tab"> <p>Time is an illusion. Lunchtime, doubly so.</p> </div ><div class="quote_tab tab" id="zaphod" data-selector=".quote_tab"> <p>I'm a great and amazing guy, didn't I tell you baby?</p> </div>
Of course, this means you can create tab groups from non-sibling elements. A little care must be taken, however; all tabs in a group must share the same data-selector: a tab can only belong to one group, and if it is inadvertently selected by another group it will cause some odd behaviour.
Inside tabs and slides, a couple of special links can be used for navigation:
<a href="#prev">Previous slide</a> <a href="#next">Next slide</a>
…navigating backwards and forwards through the group respectively.
Template extends jQuery with events and methods.
Popdowns, dropdowns, tabs and slides are all activated by triggering the jQuery special event activate. The definition of this event can be found in js/jquery.event.activate.js. By default, the activate event adds the class active to the element it is triggered on, plus any links that reference that element's id via their href attribute.
The activate event greatly simplifies the code needed to make dropdowns and tabs respond both to user actions and programmatically. Using the activate event as an abstraction, the code that makes dropdowns, popdowns, tabs and slides respond to user events can be found in js/template.ui.js.
Inserts a .loading_layer with a canvas-animated loading icon into the first element in the collection.
Removes a loading icon from the first element in the current collection. It is important to use this method to cancel loading layers created with .addLoadingIcon() as it also cleans up the animation timer.
Adds the class class. Analogous to .addClass(), only during a CSS transition caused by adding class, the class transition is also present on the node. This allows for styles that require, for example, display: none; to be applied at the end of a transition, where the class transition can be used to override the display value during the transition.
This is probably more clearly explained with a bit of CSS:
.popup_layer {
opacity: 0;
display: none;
-webkit-transition: opacity 0.06s ease-in;
-moz-transition: opacity 0.06s ease-in;
transition: opacity 0.06s ease-in;
}
.popup_layer.active {
opacity: 1;
display: block;
}
.popup_layer.transition {
display: block;
}
For more information, and description of options object, have a look at the repository github.com/stephband/jquery.transitions.
As .addTransitionClass(), only it removes the class class.
For more information, and description of options object, have a look at the repository github.com/stephband/jquery.transitions.
A base template as used for webdoc.
Template for creating app iframes.
Template for creating inspector iframes.