当前位置：首页 > 网页特效 > 按钮特效

jQuery简洁实用的滑动按钮插件

分类：按钮特效日期：2024-05-14 点击(1) 评论(0)

jQuery简洁实用的滑动按钮插件

演示免费下载

简介

###### 简要教程
这是一款非常实用的jQuery滑动按钮插件。该滑动按钮插件可以将
元素转换为滑动按钮样式。插件中使用javascript来控制滑动按钮的滑动，样式使用纯CSS来制作。

#####  浏览器支持
该jQuery滑动按钮插件可以在支持jQuery 2的浏览器上工作，IE6-8不支持该插件。

IE9不支持CSS transitions，在IE9上不会有动画效果。

该滑动按钮支持Pointer、触摸屏和鼠标点击。

#####  使用方法
首先要在页面中引入jQuery和jquery.onoff.css及jquery.onoff.js文件。然后可以使用两种方式调用该滑动按钮插件：

With AMD
```html
define([ 'jquery', 'plugins/jquery.onoff' ], function( $ ) {
  $('input[type="checkbox"]').onoff();
});
```
 With Script Tags
```html
<script src="jquery.js"></script>
<script src="plugins/jquery.onoff.min.js"></script>
<script>
jQuery(function($) {
  $('input[type="checkbox"]').onoff();
});
</script>      
```
 参数
```html
OnOff.defaults = {
  // The event namespace
  // Should always be non-empty
  // Used to bind jQuery events without collisions
  namespace: '.onoff',
 
  // The class added to the checkbox
  className: 'onoffswitch-checkbox'
};      
```
 事件
All methods can be called widget-style.

option()：
Returns: If getting, the option value; if setting, the jQuery collection for chaining.

option()方法可以通过无参数调用返回所以得选项：

```html
var options = $input.onoff('option');          
```
通过单个参数可以获取单个选项：

```html
var eventNamespace = $input.onoff('option', 'namespace');          
```
可以通过键和值或键值对对象来设置选项：

```html
$input.onoff('option', 'namespace', 'newspace');
$input.onoff('option', {
  namespace: 'newspace',
  className: 'newclass'
});          
disable()：
Returns: jQuery for chaining
```

将换单按钮对象设置为不可用并取消所有的事件。

```html
$input.onoff('disable');          
isDisabled()：
Returns: Boolean
```

返回当前的滑动按钮状态是否是不可用状态。

```html
var disabled = $input.onoff('isDisabled');          
enable()：
Returns: jQuery for chaining
```

使滑动按钮对象可用，并重新为它绑定事件。

```html
$input.onoff('enable');          
wrap()：
Returns: jQuery for chaining
```

Ensures the HTML for the toggle switch is correct.This method only adds any missing HTML.

```html
$input.onoff('wrap');          
unwrap()：
Returns: jQuery for chaining
```

Removes HTML related to OnOff, leaving only the checkbox.

```html
$input.onoff('unwrap');          
destroy()：
Returns: jQuery for chaining
```

销毁滑动按钮对象并移除数据，但是不会调用unwrap()方法。

```html
$input.onoff('destroy');          
instance()：
Returns: OnOff
```

返回OnOff实例。

```html
var instance = $input.onoff('instance');    
```

web299.com

jQuery简洁实用的滑动按钮插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果