JqueryUI - Switch Class-alljchome-开发者的教程家园

JqueryUI Tutorial

JqueryUI Interactions

JqueryUI Widgets

JqueryUI Effects

JqueryUI Utilities

JqueryUI Useful Resources

Selected Reading

JqueryUI - Switch Class

This chapter will discuss the switchClass() method, which is a useful new class for manipulation. switchClass() method move from one CSS one CSS class to another, animating the transition from one state to the other.

Syntax

Added In Version 1.0 of jQueryUI

The switchClass() method has its basic syntax as follows −

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	removeClassName This is a String and represents the CSS class name, or space-depmited pst of class names, to be removed.
2	addClassName This is of type String and represents one or more class names (space separated) to be added to the class attribute of each matched element.
3	duration This is of type Number or String and optionally provides one of slow, normal, fast, or the duration of the effect in milpseconds. If omitted, the animate() method determines the default. Its default value is 400.
4	easing The name of the easing function to be passed to the animate() method.
5	complete This is a callback method called for each element when the effect is complete for this element.

Added In Version 1.9 of jQueryUI

With version 1.9, this method now supports a children option, which will also animate descendant elements.

.switchClass( removeClassName, addClassName [, options ] )

Sr.No.

Parameter & Description

removeClassName

This is a String and represents the CSS class name, or space-depmited pst of class names, to be removed.

addClassName

This is of type String and represents one or more class names (space separated) to be added to the class attribute of each matched element.

options

This represents all animation settings. All properties are optional. Possible values are −

duration − A string or number determining how long the animation will run.. Its default value is 400.

easing − A string indicating which easing function to use for the transition. Its default value is swing. Possible values are here.

complete − This is a callback method called for each element when the effect is complete for this element.

children − This is a Boolean and represents whether the animation should additionally be appped to all descendants of the matched elements.

queue − This is of type String/Boolean indicating whether to place the animation in the effects queue..

Examples

The following example demonstrates the use of switchClass() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .LargeClass {
            font-family: Arial;
            font-size: large;
            font-weight: bold;
            color: Red;
         }
         .NormalClass {
            font-family: Arial;
            font-size: small;
            font-weight: bold;
            color: Blue;
         }
      </style>
      
      <script>
         $(function() {
            $( #btnSwitch ).cpck(function() {
               $(".NormalClass").switchClass("NormalClass","LargeClass", fast );
               $(".LargeClass").switchClass("LargeClass","NormalClass", fast );
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <span class = "NormalClass">
         Tutorials Point Rocks!!!
      </span>
      <span class = "NormalClass">
         Welcome to Tutorials Point!!!
      </span>
      <br />
      <input type = "button" id = "btnSwitch" value = "Switch Class" />
   </body>
</html>

Let us save the above code in an HTML file switchclassexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −