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. C# AJAXform上传图片

     前台: @{    Layout = null;} <!DOCTYPE html> <html><head>    <meta name="vie ...

  2. 三：SpringCloud-Ribbon

    六:Ribbon负载均衡 1. 概述 1.1 是什么 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套==客户端 负载均衡==的工具. 简单的说,Ribbon是Net ...

  3. fb登陆遇到傻逼问题

    centos中curl需要ssl的支持, 所以我重新安装了curl,并安装了openssl-devel,这个是依赖,必须的. so 完美

  4. java自学-编程入门

    java语言写的代码需要先编译为可执行文件,才能被jvm执行.在下载的jdk安装目录下的bin目录,有两个可执行程序java.exe和javac.exe,javac就是用来编译的,java是执行编译后 ...

  5. JAVA基础之——Thrift原理及应用

    1 是什么 是为了解决facebook系统中各系统间大数据量的传输通信,以及系统之间语言环境不同需要跨平台的问题. 是一种实现RPC的软件框架,自定义IDL(Interface description ...

  6. Web安全相关（四）：过多发布（Over Posting）

    简介 过多发布的内容相对比较简单,因此,我只打算把原文中的一些关键信息翻译一下.原文链接如下: http://www.asp.net/mvc/overview/getting-started/gett ...

  7. JDK的安装与卸载

      1.jdk 下载链接:http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-3848520.html 2.在 ...

  8. C# 调用C/C++动态链接库，结构体中的char*类型

    用C#掉用C++的dll直接import就可以之前有不同的类型对应,当要传递结构体的时候就有点麻烦了,这里有一个结构体里边有char*类型,这个类型在C#中调用没法声明,传string是不行的默认st ...

  9. IEEE VIS 2018专题

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

  10. react生命周期es6

    基本函数有 import React from 'react' export default class MyClass extends React.Component { constructor(p ...