<jQuery Switch/ Replace/ Change class name ⁄ >

16536

2010-04-21

mySnippets javascript

Download

Bookmark This

Well I'm just trying to clean the dust in my snippets section ^_^''

I said it before, but I'll try to write more often in this section, but time's always running short and I almost left this section for last.

A few weeks ago in my work we had to build a full-ajax environment website, this is, no postbacks.
However all the links are crawlable, this is, bots will still be able to follow links and index its content, but in an user point-of-view, the website couldn't/ mustn't had any page refresh.

This website had multiple themes, such as:

in a products page, we have, for instance, a green theme;

in a sales page we have a yellow theme;

and so on, and so on, ...

Although not all the webpage would switch theme, for example, header and footer would always keep its company base colors.

The CSS had all the color themes, so basically what JavaScript had to do, was change an html object class name, for example:

<div class="green_theme"> (contents) </div>

Would had to turn to:

<div class="yellow_theme"> (contents) </div>

And so on, and so on...

So let's just build a basic plugin, called SwithClass.

It'll work, either, as a standalone function; and as a jQuery custom function (extending jQuery, so that we can benefit all its selector power). You'll see the examples ahead.

note: I didn't test it against jQuery >=1.4

style.css, a simple stylesheet

body{font-family: Tahoma, Verdana;}
 
.red{color: #B02B2C;}
 
.dark_gray{color: #666;}
 
.orange{color: #FF7400;}
 
.blue {color: #4096EE;}

jquery.SwitchClass.js, our plugin. It will work in the following two manners:

$.SwitchClass(element, oldClassName, newClassName);

$("selector[s]").SwitchClass(oldClassName, newClassName);

/**
 *
 * jquery.SwitchClass.js - A jQuery Plugin
 * 
 * @version: 0.1
 * @author pedrocorreia.net
 * @date 2010-04-21
 * @projectDescription: Switch/ Replace/ Change an object's class name
 * @requires jquery.js (tested with 1.3.2)
 */
(function($){
 
    /**
     * Switch element(s) Class Name
     *
     * @author pedrocorreia.net
     *
     * @param Object || Array Selector(s) -> Syntax: [ {elem, old_class, new class}, ... ]
     */
    $.SwitchClass = function (selectors){
        var _selectors = [], //our selectors array container, it will hold all our objects
 
            /**
             * Switch Class
             *
             * @private
             * @param Jquery Object
             * @param String Old Class Name
             * @param String New Class Name
             */
            _Switch = function(o, oldClass, newClass){
                if(o && oldClass && newClass && o.hasClass(oldClass)){
                  o.removeClass(oldClass).addClass(newClass);
                }
            };
 
        //check if we have an object or an array of objects,
        //the "selectors" will always be in an array, even if we
        //specify an Object, this will be added to our selectors Array
        if($.isArray(selectors)){ _selectors = selectors; }
        else{ _selectors.push(selectors); }
 
        //do we have any elements in our, selectors, array?
        if (_selectors.length === 0) { return; }
 
        //iterate over selectors Array
        $.each(_selectors, function(idx, selector){
            _Switch($(selector.elem), selector.old_class, selector.new_class);
        });
    };
 
    /**
     * Switch element(s) Class Name
     * jQuery custom function
     * 
     * @author pedrocorreia.net
     *
     * @param String Old Class Name
     * @param String New Class Name
     * @extends jQuery
     */
    $.fn.SwitchClass = function(old_class, new_class){
      return this.each(function(){
        $.SwitchClass({elem: this, old_class: old_class, new_class: new_class});
      });
    };
 
})(jQuery);

Init.js, a few working examples

$(document).ready(function() {
 
  //switch class by using an object
  $.SwitchClass({
      elem: "span",
      old_class: "red",
      new_class: "dark_gray"
    }
  );
 
  //switch class by using an array of objects
  $.SwitchClass([
    {
      elem: "#my_header",
      old_class: "red",
      new_class: "orange"
    },
    {
      elem: "h4",
      old_class: "red",
      new_class: "blue"
    }
  ]);
 
  //using jQuery selector
  $("strong, a").SwitchClass("red", "dark_gray");
 
  //using jQuery selector and jQuery chaining
  $("#my_other_div")
    .SwitchClass("dark_gray", "red")
    .find("p:first")
    .append("... and this text will be added");
 
});

Our html file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
    <script type="text/javascript" src="jquery.SwitchClass.js"></script>  
    <script type="text/javascript" src="Init.js"></script>  
 
    <title>jQuery SwitchClass</title>
</head>
 
<body>
 
    <div id="my_div">
        <span class="red">This is a span</span>,
        <strong class="red">this is bold</strong>,
        <a href="http://www.pedrocorreia.net" class="red">this is a link</a>.
        <h3 id="my_header" class="red">This is a Header 3</h3>
        <h4 class="red">This is a Header 4</h4>
    </div>
 
    <div id="my_other_div" class="dark_gray">
        <p>This paragraph, initially will be dark gray, but it'll turn to <strong>red</strong>.</p>
    </div>
 
</body>
 
</html>

Here's 2 screenshots.

Before applying jquery.SwitchClass:

After applying jquery.SwitchClass.js:

Simple!

If you have any doubt or found any error, please drop me an email.

16536

2010-04-21

mySnippets javascript

Download

Bookmark This