jQuery Minute™

…a jQuery Minute™ later and you're done!



SwitchView Plugin Released

without comments

Greetings all!

I’m pleased to release a new plugin called switchView. The SwitchView jQuery plugin provides the ability to easily define groups of elements to show and hide in one fell swoop. Let’s take a look at how the plugin works!

Given the following HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p>
    <label>Username</label>
    <input type="text" name="username" />
</p>
 
<p>
    <label>Password</label>
    <input type="text" name="password" />
</p>
 
<p>
    <label>Confirm Password</label>
    <input type="password" name="confirmPassword" />
</p>
 
<a href="#">Change Password</a>
 
<input type="submit" value="Login" />
<input type="cancel" value="Cancel" />
<input type="submit" value="Change Password" />

The requirement is to toggle between a set of elements for the “login” view and the “change password” view. When using the switchView plugin, you define a “view” simply by placing a CSS class prefixed with view-on- on an element (the prefix can be configured). So let’s define two views: view-on-login and view-on-change-pw. Then to switch to the change-pw view, do:

1
$('body').switchView('changePw');

Now let’s look at how we would add the CSS classes to our elements:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p>
    <label>Username</label>
    <input type="text" name="username" />
</p>
 
<p>
    <label>Password</label>
    <input type="text" name="password" />
</p>
 
<p class="view-on-change-pw view-hidden">
    <label>Confirm Password</label>
    <input type="password" name="confirmPassword" />
</p>
 
<a href="#" class="view-on-login">Change Password</a>
 
<input type="submit" value="Login" class="view-on-login" />
<input type="cancel" value="Cancel" class="view-on-change-pw view-hidden" />
<input type="submit" value="Change Password" class="view-on-change-pw view-hidden" />

You’ll notice that I didn’t add any classes to the Username or Password fields as these are used in both views. Another option would be to place two view classes on those such as:

1
2
3
4
<p class="view-on-login view-on-change-pw">
    <label>Username</label>
    <input type="text" name="username" />
</p>

Additionally the view-hidden class has a single rule of .view-hidden { display: none; } which is used to hide elements by default.

Two final points to wrap up here, the context and groups. In the code below:

1
$('body').switchView('changePw');

The switchView plugin is looking for any elements that contain a view-on-* class within the BODY. It’s possible to scope switchView to only work on say a div with ID #navigation.

1
$('#navigation').switchView('changePw');

The one thing to watch out for, is if you change the view based on the BODY element, it will then potentially hide the elements inside of #navigation which is most likely not what you want. So to address this, the switchView jQuery Plugin provides for the concept of a “group”.

1
2
3
4
5
6
7
<div class="view-group-login">
<p>
    <label>Username</label>
    <input type="text" name="username" />
</p>
...
</div>

Now that we have grouped our login form, we would do the following:

1
$('body').switchView('login.changePw');

You can still use ungrouped elements, but doing so will not affect the elements within the view-group-login. It’s also worth noting that you can have grouped elements located anywhere on the page. So for example, if you have two parts to your form that are in physically different locations in your document, you can just add a view-group-login to each section.

jQuery switchView Plugin by jdsharp

Enjoy!

Cheers,
– Jonathan

Written by jdsharp

November 24th, 2009 at 12:56 pm

Posted in Plugin-Extension

Leave a Reply