Switch View Example

Username

Password

Confirm Password

Select a JavaScript library jQuery Dojo Ext JS

Text for jQuery

Text for dojo

Text for ExtJS

Documentation

Overview

The switchView plugin allows for easily toggling groups of elements on and off. A common pattern in development is to have a number of elements that need to be shown/hidden at the same time. Often these elements exist in separate elements resulting in long selectors and operations like the following:


		$('input[name=confirmPassword],#changepw,input[name=changePassword]').closest('p').show();

		$('input[name=login],#changepw').closest('p').hide();

The switchView plugin follows a convention for naming CSS classes allowing you to "tag" and "group" elements that should be shown/hidden. For example, if you defined three sets of elements such as: login, changePw, and createAccount you would end up with the following CSS classes: view-on-login, view-on-change-pw, view-on-create-account. Simply add these classes to their respective elements or parents. For elements that should be hidden by default on page load add a view-hidden class.

Now that you have elements tagged, to switch between the 'login' state and 'createAccount' state do: $('body').switchView('createAccount'); which will find all elements who have classes that start with view-on-* and hide them. Then it finds all classes view-on-create-account and makes them visible. It is possible to have an element belong to two views (for example class="view-on-login view-on-change-pw").

Defining Views

Tag html elements with CSS classes view-on-VIEWNAME to tag elements to be toggled. VIEWNAME should follow the format of lowercase-dashed and prefixed with view-on- (this can be configured). An example of a class would be view-on-login or view-on-change-pw. Place these classes on the respective elements. Elements that should be hidden by default should additionally have the class view-hidden added (also configurable).

Defining View Groups

switchView also provides the concepts of "groups" under which are views. This allows for sub-grouping of views. A view-group-NAME class can be placed on a view-on-* element or one of it's parents. To switch a view 'create' within a group called 'newAccount' you would call the following: $('body').switchView('newAccount.create'); which would search for CSS class 'view-on-create' that is either attached to a child of/or an element that has 'view-group-new-account'.

switchView API Methods


	$('body').switchView('viewName');

Call .switchView() on a jQuery object passing in the view name. The format of the view name is 'viewName' in camel case. When placing CSS classes on elements translate the 'viewName' to 'view-on-view-name' (all lowercase dashed).

You can restrict the scope in which switchView will search for elements by changing the selector on which you call it. So to restrict switchView to search for view-on-* classes on just a form, do: $('form').switchView('yourView');

switchView Global Settings


	$.switchView.hidden = 'view-hidden';

$.switchView.hidden is the class used to toggle elements visible or hidden. It should have the css rule: display: none;.

$.switchView.prefix = 'view-on-';
$.switchView.prefix is the value prefixed for all "view" classes. For example by default a class would be called view-on-login. Changing $.switchView.prefix = 'vo-'; would then change the previous class to vo-login.