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. js中进行金额计算

    js中进行金额计算parseFloat   在js中进行以元为单位进行金额计算时 使用parseFloat会产生精度问题var price = 10.99;var quantity = 7;var n ...

  2. angularjs 过滤掉textarea输入内容中夹带的特殊字符

    <body ng-app="app"> <div ng-controller="main"> <textarea ng-model ...

  3. js导航下拉菜单

    使用定时器.鼠标移动事件 var img = $('#user_head'); var menu = $('.nav_list'); var i=0; var timer; img.mouseente ...

  4. Java面试题之数据库三范式是什么？

    什么是范式? 简言之就是,数据库设计对数据的存储性能,还有开发人员对数据的操作都有莫大的关系.所以建立科学的,规范的的数据库是需要满足一些规范的来优化数据数据存储方式.在关系型数据库中这些规范就可以称 ...

  5. 深入理解Java虚拟机---类加载机制（简略版）

    类加载机制 谈起类加载机制,在这里说个题外话,当初本人在学了两三个月的Java后,只了解了一些皮毛知识,就屁颠屁颠得去附近学校的招聘会去蹭蹭面试经验,和HR聊了一会后开始了技术面试,前抛出了两个简单的 ...

  6. Visual studio 2013打开报异常"Exception has been thrown by the target of an invocation"

    最近遇到一个问题,打开VS2013和SQL Server2014都会出报错,错误信息如下: 以前都是好好的,重启了机子也不行,能打开两个VS,再打开第三个VS还是会报错,百度无果,还是在google上 ...

  7. webpack-bundle.js原理

    bundle.js 源码 //a.js import { log } from './b.js' log('hello') //b.js export const log = function (m) ...

  8. 007Spring Security

    01.基于Spring AOP 和 Servlet规范中Filter实现  的安全框架 <dependency> <groupId>org.springframework.se ...

  9. MvcForum作者称该项目进入缓慢更新

    MvcForum作者在github上发表 This project is no longer actively developed as I don't have the time. As and w ...

  10. SpringBoot整合mybatis——配置mybatis驼峰命名规则自动转换

    一.简述 mybatis驼峰式命名规则自动转换: 使用前提:数据库表设计按照规范“字段名中各单词使用下划线"_"划分”: 使用好处:省去mapper.xml文件中繁琐编写表字段列表 ...