jQuery Topics
jQuery Awesome
jQuery Delicious
jQuery Buzz

SwitchView Plugin Released

Tuesday, November 24, 2009
Tagged: ,
By jQuery Aggregator on Tuesday, November 24, 2009 — 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

Read the full/original article at jQuery Minute™

    Related Posts

    Comments are closed.

    « Previous post:
    Next post:  »
    jQuery Resources

    Learn more about jQuery

    jQuery News & Links

    I only just found out that the jQuery validation plugins has a validation rule called “remote” which can be used ...

    jQuery function to check if horizontal scroll is present – hasHScrollBar() – (or vertical check below also, util function to ...

    jQuery function to Set any DOM Element to Top View (bring to front) using CSS Z-Index property.

    Is it possible to declare arrays in JavaScript object literal notation? Example 1 – this works with arrays Declaration: Storage ...

    To get the a variables type using jQuery there is a jQuery function called .type() which returns “array”, “string”, “number”, ...

    In this post you can find tutorials which explain step by step different API use cases with jQuery like Google ...

    For valuable work on creation of sites you need a good comfortable editor necessarily. There are many requiring paid products ...

    Today we are sharing with you a collection of awesome jQuery Camera Photo plugins. They offer a range of image ...

    Back in the day, if you saw something that was animated on a website it was automatically assumed to be ...

    In this post, we have compiled a list of 10 jQuery HTML5 Audio players available today, most allow native audio ...

    jQuery Mobile is a powerful framework for making mobile web applications. But can we use it to convert existing desktop ...

    I have jotted a quick post on a Basic JavaScript Regular Expression Example to give beginners out there a taste ...

    In April 2012′s edition of Interestingly Random JavaScript, jQuery and Web Development we bring you some very cool stuff such ...

    In this post we are sharing you a roundup of 10 really jQuery plugins as of today. Pretty cool plugins ...

    As always expected from the jQuery community, the compilation we have for you today are some good and impressive recently ...

    A collection of jQuery PNG/JPEG/GIF plugins that enables image animation, cartoon-like background, etc… let them help you design displays for ...

    A collection of JavaScript/jQuery Zip/File/Compressor plugins that allows you to minify your JS code and compress your JS files ready ...

    Quick jQuery code snippet on how to keep an element in view. For demo scroll down on any page on ...

    Here is what I think is the best and most reliable way to load jQuery library and jQuery UI Libraries. ...

    jQuery code snippet which outputs all attributes of element using the default .attr() function on any dom element(s). usage: output:

    More Links & News

    Community Resources

    Use jQuery and the Google Maps API to create your own map application.

    Super cool and easy way to get stylish tooltips with jQuery.

    The right way to include the jQuery library in WordPress.

    Share a resource