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对象(实例)。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 特效 - .toggle() 演示</title>
  6.   <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  7.   <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  8.   <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  9.   <link rel="stylesheet" href="jqueryui/style.css">
  10.   <style>
  11.   .toggler {
  12.     width: 500px;
  13.     height: 200px;
  14.   }
  15.   #button {
  16.     padding: .5em 1em;
  17.     text-decoration: none;
  18.   }
  19.   #effect {
  20.     position: relative;
  21.     width: 240px;
  22.     height: 135px;
  23.     padding: 0.4em;
  24.   }
  25.   #effect h3 {
  26.     margin: 0;
  27.     padding: 0.4em;
  28.     text-align: center;
  29.   }
  30.   </style>
  31.   <script>
  32.   $(function() {
  33.     // 运行当前选中的特效
  34.     function runEffect() {
  35.       // 从中获取特效类型
  36.       var selectedEffect = $( "#effectTypes" ).val();
  37.  
  38.       // 大多数的特效类型默认不需要传递选项
  39.       var options = {};
  40.       // 一些特效带有必需的参数
  41.       if ( selectedEffect === "scale" ) {
  42.         options = { percent: 0 };
  43.       } else if ( selectedEffect === "size" ) {
  44.         options = { to: { width: 200, height: 60 } };
  45.       }
  46.  
  47.       // 运行特效
  48.       $( "#effect" ).toggle( selectedEffect, options, 500 );
  49.     };
  50.  
  51.     // 根据选择菜单值设置特效
  52.     $( "#button" ).click(function() {
  53.       runEffect();
  54.       return false;
  55.     });
  56.   });
  57.   </script>
  58. </head>
  59. <body>
  60.  
  61. <div class="toggler">
  62.   <div id="effect" class="ui-widget-content ui-corner-all">
  63.     <h3 class="ui-widget-header ui-corner-all">切换（Toggle）</h3>
  64.     <p>
  65.       Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
  66.     </p>
  67.   </div>
  68. </div>
  69.  
  70. <select name="effects" id="effectTypes">
  71.   <option value="blind">百叶窗特效（Blind Effect）</option>
  72.   <option value="bounce">反弹特效（Bounce Effect）</option>
  73.   <option value="clip">剪辑特效（Clip Effect）</option>
  74.   <option value="drop">降落特效（Drop Effect）</option>
  75.   <option value="explode">爆炸特效（Explode Effect）</option>
  76.   <option value="fold">折叠特效（Fold Effect）</option>
  77.   <option value="highlight">突出特效（Highlight Effect）</option>
  78.   <option value="puff">膨胀特效（Puff Effect）</option>
  79.   <option value="pulsate">跳动特效（Pulsate Effect）</option>
  80.   <option value="scale">缩放特效（Scale Effect）</option>
  81.   <option value="shake">震动特效（Shake Effect）</option>
  82.   <option value="size">尺寸特效（Size Effect）</option>
  83.   <option value="slide">滑动特效（Slide Effect）</option>
  84. </select>
  85.  
  86. <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a>
  87.  
  88. </body>
  89. </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. sql递归显示层级数据

    ;) as varchar(max)) as ssort from Category where ID = '123' union all select t.*, ) as varchar(max)) ...

  2. VS中自定义C#快速简写代码

     首先在VS中找到工具——代码片段管理器——语言选择(CSharp)——Visual C#——赋值路径——根据路径找到对应的代码片段用VS打开 修改: Title——标题 ShortCut——缩写 D ...

  3. 题解 P1068 【分数线划定】

    由于涉及到排序和对应序号 那就定义一个结构体 结合STL模板中的sort日常沉迷sort 提示:虽然我也是蒟弱 sort是快速排序函数,有两个或三个参数, 两个参数适用于平常的数字类型,即形sort( ...

  4. [javaSE] IO流（对象序列化）

    写入 获取ObjectOutputStream对象,new出来,构造参数:FileOutputStream对象目标文件 调用ObjectOutputStream对象的writeObject()方法,参 ...

  5. mac obs直播软件 无法输出音频解决办法

    搜索大量的网页,确没有一个实用的设置教程,也正是speechless. 直接做个教程,方便大家的使用 1.安装 boom 2 到app store 上搜索boom 我安装的是正版的,需要128元. 你 ...

  6. ArrayList封装

    package com.cn.test.jihe; import java.util.Arrays; /** * * insert * delete * update * get * */ publi ...

  7. Oracle数据库基本操作（三） —— DQL相关内容说明及应用

    本文所使用的查询表来源于oracle数据中scott用户中的emp员工表和dept部门表. 一.基本语法 SQL语句的编写顺序: select 输出的列 from 表名 where 条件 group ...

  8. react框架 Dva & Umi

    概念 // http://localhost:3000/ //models import IndexPage from './routes/IndexPage'; import Products fr ...

  9. windows操作系统用命令提示符查看占用端口号的进程

    在开发中有时我们需要确定哪个占用了8080端口,在windows命令行窗口下执行: 命令执行后打印出来的结果如下所示:

  10. 转：php 获取memcache所有key

    文章出处 在php提供的用于与memcached交互的扩展模块中有memcached与memcache,前者提供方法getAllKeys用于遍历所有Memcached服务器上的key,但是并不保证原子 ...