当前位置: 首页 > 文档资料 > jQueryUI 入门教程 >

Switch 类(Switch Class)

优质
小牛编辑
126浏览
2023-12-01

本章将讨论switchClass()方法,它是一个有用的新操作类。 switchClass()方法从一个CSS移动到另一个CSS类,动画从一个状态到另一个状态的转换。

语法 (Syntax)

在jQueryUI的1.0版中添加

switchClass()方法的基本语法如下 -

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Sr.No.参数和描述
1

removeClassName

这是一个String,表示要删除的CSS类名称或以空格分隔的类名列表。

2

addClassName

它的类型为String,表示要添加到每个匹配元素的class属性的一个或多个类名(空格分隔)。

3

duration

它的类型为Number或String,可选择提供slow, normal, fast,或效果持续时间之一(以毫秒为单位)。 如果省略,则animate()方法确定默认值。 其默认值为400

4

easing

要传递给animate()方法的缓动函数的名称。

5

complete

这是对此元素的效果完成时为每个元素调用的回调方法。

在jQueryUI 1.9版中添加

对于1.9版本,此方法现在支持children选项,该选项还将为后代元素设置动画。

.switchClass( removeClassName, addClassName [, options ] )
Sr.No.参数和描述
1

removeClassName

这是一个String,表示要删除的CSS类名称或以空格分隔的类名列表。

2

addClassName

它的类型为String,表示要添加到每个匹配元素的class属性的一个或多个类名(空格分隔)。

3

options

这表示所有动画设置。 所有属性都是可选的。 可能的值是 -

  • duration - 确定动画运行duration的字符串或数字。其默认值为400

  • easing - 一个字符串,指示要用于转换的缓动函数。 它的默认值是swing 。 可能的值在here 。

  • complete - 这是在为此元素完成效果时为每个元素调用的回调方法。

  • children - 这是一个布尔值,表示动画是否应另外应用于匹配元素的所有后代。

  • queue - 这是String/Boolean类型,指示是否将动画放在效果队列中。

例子 (Examples)

以下示例演示了switchClass()方法的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/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').click(function() {
               $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
               $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
               return false;
            });
         });
      </script>
   </head>
   <body>
      <div class = "NormalClass">
         xnip Rocks!!!
      </div>
      <div class = "NormalClass">
         Welcome to xnip!!!
      </div>
      <br />
      <input type = "button" id = "btnSwitch" value = "Switch Class" />
   </body>
</html>

让我们将上面的代码保存在HTML文件switchclassexample.htm ,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出。

单击“ Switch Class按钮以查看类对该框的影响。