View Stacks are powerful user-interface components needed for rich UI clients. We present a simple and powerful jQuery based implementation.
The context of this post is a single HTML page whereby jQuery is used to bind click events components. The two key concepts are selectors and cards:
View Selector: This is the element the user click to show a card, e.g., a tab selector.
View Card: This is the element rendered visible upon selection, e.g., the content of the tab.
When users click a selector, the corresponding cards are rendered visible. The simple HTML code below shows the declarative bindings. The <element/> tag represents the selector and the two <div/> tags represent the cards; the two tags are shown here to demonstrate the ability to render multiple cards visible simultaneously, potentially at different areas of the page/screen. The selector attribute view-cards is used to specify the list IDs of cards to render visible upon selection; it is assumed that the programmer will be responsible to correctly match those IDs with the IDs of the <div/> tags representing the cards.
For each selector, the selector-group attribute is used to specify the group of selectors from which a selection is made. One, and only one, of these selectors can be selected at any given time; selection of one implies de-selection of all others.
Similarly, for each card, the view-stack attribute is used to specify the group of cards from which a selection is made. One, and only one, of these selectors can be selected at any given time; selection of one implies de-selection of all others.
In both cases it is the responsibility of the programmer to ensure the correct association of selector-groups to selectors such that each selector activates cards from different groups, and of view-stacks to view-cards.
HTML specification of view selectors and cards.
...
<element class="view-selector" view-cards="view-card-id1,view-cards="view-card-id2" selector-group="environment-selectors" style="... > label </element>
...
<div id="view-card-id1" class="view-card" view-stack="views-group1">
... content ...
</div>
...
<div id="view-card-id2" class="view-card" view-stack="views-group2">
... content ...
</div>
The jQuery code below is self explanatory; it is intended to execute upon page load, preferably during a $(document).ready() callback. The specific definition of the classes of view-selector, view-selector:hover, view-selector-selected is left for the imagination of the reader š
// First, hide all cards; we will figure out which ones to show later
$('.view-card').hide();
// Bind the click event of each selector
$('.view-selector').each(function () {
// Re-entrant code: Avoid duplicate binding in case 'click' is already bound.
if ((typeof $(this).data('events') != 'object')
|| (typeof $(this).data('events').click != 'object')) {
// When the selector is clicked
$(this).click(function () {
// deselect all viewer of the same selector group
$('.view-selector-selected[selector-group="'+selector.attr('selector-group')+'"]')
.removeClass('view-selector-selected')
.addClass('view-selector');
// Select the current selector
selector.removeClass('view-selector').addClass('view-selector-selected');
// Next, show all cards linked to that selector
var cardsAttr = selector.attr('view-cards');
if (cardsAttr != null && cardsAttr.length > 0) {
// Retrieve the list of cards to show for the current selection
var cards = cardsAttr.toString().split(',');
for (var i = 0; i < cards.length; i++) {
// Show the selected card only (all cards were hidden at the top).
$(this).show();
}
}
})
}
});
That’s it.
Cloud OS Patterns 
Leave a comment