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. 【SSH网上商城项目实战17】购物车基本功能的实现

    转自:https://blog.csdn.net/eson_15/article/details/51418350 上一节我们将商品的详细页面做完了,并使用了Hibernate的二级缓存加载详细页面来 ...

  2. eclipse 查看源码 source not found

    是因为eclipse里面没有设置好源码路径. 源码路径在jdk安装包里面 C:/Program Files/Java/jdk1.8.0_191/src.zip  这个src.zip文件, 设置ecli ...

  3. libevent学习笔记 —— 第一个程序：计时器

    用libevent写个定时器其实步骤不多: 1.初始化libevent 2.设置事件 3.添加事件 4.进入循环 由于定时事件触发之后,默认自动删除,所以如果要一直计时,则要在回调函数中重新添加定时事 ...

  4. HTML颜色的三种写法

    颜色的三种写法: 1.16进制代码     #000000 2.英文字母         red 3.rgba                rgba(0-255,0,0,0-1) 例如: <b ...

  5. 51NOD1847：奇怪的数学题

    传送门 Sol 设 \(f(d)\) 表示 \(d\) 所有约数中第二大的,\(low_d\) 表示 \(d\) 的最小质因子 \[f(d)=\frac{d}{low_d}\] 那么 \[\sum_{ ...

  6. cf1060E. Sergey and Subway(树形dp)

    题意 题目链接 Sol 很套路的题 直接考虑每个边的贡献,最后再把奇数点的贡献算上 #include<bits/stdc++.h> #define Pair pair<int, in ...

  7. Vuejs入门级简单实例

    Vue作为2016年最火的框架之一,以其轻量.易学等特点深受大家的喜爱.今天简单介绍一下Vue的使用. 首先,需要在官网下载vuejs,或者直接用cdn库.以下实例使用Vue实现数据绑定与判断循环: ...

  8. 推荐js库： underscore

    Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率. 之间没用他之前,自己写,那是相当的酸爽. 如循环处理: for(var i=0;i<data.length; ...

  9. Node服务端极速搭建 － nvmhome

    本文意在让你掌握极速搭建Node服务端(任何Project) $ whoami name: kelvin email: kelvv@outlook.com homepage: www.kelvv.co ...

  10. OpenCV实现基于傅里叶变换的旋转文本校正

    代码 先给出代码,再详细解释一下过程: #include <opencv2/core/core.hpp> #include <opencv2/imgproc/imgproc.hpp& ...