JqueryUI - 切换

JqueryUI Toggle - 从基本到高级概念的简单简单步骤学习JqueryUI，其中包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单， Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

本章将讨论jQueryUI视觉效果的 toggle()方法. toggle()方法切换show()或hide()方法，具体取决于元素是否隐藏.

语法

toggle()方法具有以下语法 :

.toggle( effect [, options ] [, duration ] [, complete ] )

Sr.No.	参数&描述
1	effect 这是一个字符串，表示要用于转换的效果.这是一个字符串，表示要使用的效果调整元素可见性时.效果列于下表中.
2	options 这是Object类型，表示特定于效果的设置和缓和.此外，每个效果都有自己的选项集，可以在表 jQueryUI Effects 中描述的多个效果中指定.
3	duration 这是Number或String类型，它决定了动画的运行时间.它的默认值是 400 .
4	complete 这是一个调用的回调方法当该元素的效果完成时，每个元素.

jQueryUI Effects

下表描述了可以与effects()方法一起使用的各种效果 :

Sr.No.	效果&描述
1	blind 以窗帘的方式显示或隐藏元素:向下或向上移动底边，或者右边或右边，取决于指定的方向和模式.
2	bounce 使元素看起来在垂直或水平方向上反弹，可选择显示或隐藏元素.
3	clip 通过将元素的相对边界移到一起直到它们在中间相遇来显示或隐藏元素，反之亦然.
4	drop 显示或隐藏该元素使其显示为掉落或放下页面.
5	explode 通过拆分元素来显示或隐藏元素在径向方向上移动的多个部分，就像在页面中插入或爆炸一样.
6	fade 通过调整元素来显示或隐藏元素不透明度.这与核心淡入淡出效果相同，但没有选项.
7	fold 通过调整对面来显示或隐藏元素边框输入或输出，然后对另一组边框执行相同操作.
8	highlight 通过暂时改变来调用元素显示或隐藏元素时的背景颜色.
9	puff 扩展或收缩元素到位调整其不透明度.
10	pulsate 调整元素的不透明度在确保元素按指定显示或隐藏之前关闭.
11	scale 按指定的方式扩展或收缩元素百分比.
12	shake 来回摇动元素，或者垂直或水平.
13	size 将元素大小调整为指定的宽度，高度.与规模类似，除了如何指定目标大小.
14	slide 移动元素使其显示为滑入或滑出页面.
15	transfer 设置瞬态轮廓元素的动画元素似乎转移到另一个元素.必须通过ui-effects-transfer类的CSS规则或指定为选项的类来定义outline元素的外观.

示例

以下示例演示了使用不同的 toggle()方法上表中列出的效果.

               jQuery UI Toggle Example                                                                                    Toggle                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Toggle

让我们将上述代码保存在HTML文件 toggleexample.htm 中，并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果

单击切换按钮以检查类的显示和隐藏方式.