jQuery UI Switch类 


jQuery UI switchClass

jQuery UI switchClass()方法用于从一个CSS类移动到另一个CSS类,从而实现从一种状态到另一种状态的过渡。

句法:

让我们看一下jQueryUI swithClass()方法的基本语法:(在jQueryUI 1.0版中添加)

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

switchClass()方法的参数:

removeClassName:是一个字符串。它代表CSS类名或要删除的类名的空格分隔列表。

addClassName:类型为字符串。它代表一个或多个添加到每个匹配元素的class属性的类名称。

持续时间:这是数字或字符串类型,用于指定持续时间(以毫秒为单位)。其默认值为400。

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

complete:此元素的效果完成后,它是为每个元素调用的回调方法。

jQuery switchClass()方法的语法:(在1.9版中添加)

jQueryUI的新版本1.9还支持children选项,该选项还将为后代元素设置动画。

句法:

 .switchClass( removeClassName, addClassName [, options ] )

switchClass()方法的参数:(在1.9版中添加)

removeClassName:是一个字符串。它代表CSS类名或要删除的类名的空格分隔列表。

addClassName:类型为字符串。它代表一个或多个添加到每个匹配元素的class属性的类名称。

选项:用于指定所有动画设置。所有属性都是可选的。其可能的值为:

  • 持续时间:这是一个字符串或数字。它指定动画将运行多长时间。其默认值为400。
  • 缓动:这是一个字符串,指定用于过渡的缓动函数。其默认值为swing。
  • 完成:此元素的效果完成时,这是对每个元素调用的回调方法。
  • 子代这是布尔型,指定是否应将动画另外应用于匹配元素的所有后代。其默认值为FALSE。
  • 队列:这是布尔类型或字符串类型,并指定是否将动画放置在效果队列中。其默认值为TRUE。

jQuery UI开关类的示例()

让我们以jQuery UI switchClass()方法为例:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href="http://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: NewTimesRoman;
            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">
        You are here at JavaTpoint
      </div>
      <div class="NormalClass">
JavaTpoint is commited to provide easy and point to point learning of various tutorials.
      </div>
      <br />
      <input type="button" id="btnSwitch" value="Switch Class" />
   </body>
</html>
0



error: 内容受到保护 !!