toggle()函数用于为每个匹配元素的click事件绑定轮流的处理函数。

toggle()是一个特殊的事件函数，用于为匹配元素的click事件绑定多个事件处理函数。每次触发click事件时，toggle()函数会轮流执行其中的一个事件处理函数。

例如，我们使用toggle("click", A, B, C)为元素的click事件绑定了3个事件处理函数A、B、C。第一次点击执行A，第二次点击执行B，第三次点击执行C，第四次点击又执行A，第五次点击又执行B ……(如果调用了多次toggle()，它们之间是独立的)。

要删除通过toggle()绑定的事件，请使用unbind()函数。例如:unbind("click")。

这里介绍的toggle()是一个特殊的click事件函数，jQuery还有一个同名的toggle()函数，用于切换元素的显示/隐藏。

该函数属于jQuery对象(实例)。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI 特效 - .toggle() 演示</title>

  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

  <link rel="stylesheet" href="jqueryui/style.css">

  <style>

  .toggler {

    width: 500px;

    height: 200px;

  }

  #button {

    padding: .5em 1em;

    text-decoration: none;

  }

  #effect {

    position: relative;

    width: 240px;

    height: 135px;

    padding: 0.4em;

  }

  #effect h3 {

    margin: 0;

    padding: 0.4em;

    text-align: center;

  }

  </style>

  <script>

  $(function() {

    // 运行当前选中的特效

    function runEffect() {

      // 从中获取特效类型

      var selectedEffect = $( "#effectTypes" ).val();

      // 大多数的特效类型默认不需要传递选项

      var options = {};

      // 一些特效带有必需的参数

      if ( selectedEffect === "scale" ) {

        options = { percent: 0 };

      } else if ( selectedEffect === "size" ) {

        options = { to: { width: 200, height: 60 } };

      }

      // 运行特效

      $( "#effect" ).toggle( selectedEffect, options, 500 );

    };

    // 根据选择菜单值设置特效

    $( "#button" ).click(function() {

      runEffect();

      return false;

    });

  });

  </script>

</head>

<body>

<div class="toggler">

  <div id="effect" class="ui-widget-content ui-corner-all">

    <h3 class="ui-widget-header ui-corner-all">切换（Toggle）</h3>

    <p>

      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.

    </p>

  </div>

</div>

<select name="effects" id="effectTypes">

  <option value="blind">百叶窗特效（Blind Effect）</option>

  <option value="bounce">反弹特效（Bounce Effect）</option>

  <option value="clip">剪辑特效（Clip Effect）</option>

  <option value="drop">降落特效（Drop Effect）</option>

  <option value="explode">爆炸特效（Explode Effect）</option>

  <option value="fold">折叠特效（Fold Effect）</option>

  <option value="highlight">突出特效（Highlight Effect）</option>

  <option value="puff">膨胀特效（Puff Effect）</option>

  <option value="pulsate">跳动特效（Pulsate Effect）</option>

  <option value="scale">缩放特效（Scale Effect）</option>

  <option value="shake">震动特效（Shake Effect）</option>

  <option value="size">尺寸特效（Size Effect）</option>

  <option value="slide">滑动特效（Slide Effect）</option>

</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a>

</body>

</html>

jQuery UI 实例 – 切换(Toggle)的更多相关文章

  1. jQuery UI 实例 - 对话框（Dialog）(zhuan)

    http://www.runoob.com/jqueryui/example-dialog.html ************************************************* ...

  2. jQuery UI 实例 - 自动完成（Autocomplete）

    http://www.runoob.com/jqueryui/example-autocomplete.html 自定义数据并显示 您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示 ...

  3. (网页)jQuery UI 实例 - 日期选择器（Datepicker）

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面 ...

  4. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  5. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  6. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  7. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  8. jQuery UI 实现图片循环显示，常用于网站首页banner广告切换

    http://www.runoob.com/try/try.php?filename=jqueryui-example-position-cycler <!doctype html>< ...

  9. jquery ui 怎么实现tab标签切换效果

    1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

随机推荐

  1. Git——新手入门与上传项目到远程仓库GitHub

    Git:先进的分布式版本控制系统,一个开源式的分布式版本控制工具. Git安装 在Windows操作系统下,访问Git下载地址https://git-for-windows.github.io/ 注册 ...

  2. java 基础 --- 动态代理和静态代理

    问题  : 代理的应用场景是什么 动态代理的底层原理是什么,为什么只能继承接口 概述 代理模式是设计模式的一种,简单地说就是调用代理类的方法实际就是调用真实类的方法.这种模式在AOP (切面编程)中非 ...

  3. 【13】MD5编码、Zlib压缩解压缩

    1.MD5加密 /// <summary> /// 使用MD5加密算法 /// </summary> /// <param name="md5MessageSt ...

  4. Restful架构思想

    java作为一门后端语言,其厉害之处在于web,大家比较熟知的各种网络应用,java都能做,那么在这个移动优先的时代,如何继续发挥java的强大呢.通常是让java作为一个app的服务端,为app客户 ...

  5. IEEE VIS 2018专题

    PoPo数据可视化 聚焦于Web数据可视化与可视化交互领域,发现可视化领域有意思的内容.不想错过可视化领域的精彩内容, 就快快关注我们吧 :) 本文带有视频,浏览视频请关注公众号浏览. IEEE VI ...

  6. BZOJ1492 [NOI2007]货币兑换

    Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下 简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...

  7. (C# SQL Server) 数据库连接字符串

    Debug 一个SQL Server 2008 数据库连接的问题,老是提示: [67944] System.Data.SqlClient.SqlException (0x80131904): 在与 S ...

  8. 在Oracle/SQL Service中通过Function返回Table

    本函数用途:返回一个Table 在Oracle中实现,范例: --在Types中: create or replace type objTable as object ( s_usercode var ...

  9. python 描述符 上下文管理协议 类装饰器 property metaclass

    1.描述符 #!/usr/bin/python env # coding=utf-8 # 数据描述符__get__ __set__ __delete__ ''' 描述符总结 描述符是可以实现大部分py ...

  10. 计算fibonacci数（多种方法）

    #include <iostream> using namespace std; //计算fibonacci数 //方法一:二分递归法,时间复杂度为O(2^n),额外空间复杂度为常数 in ...