按钮图标
jQuery简洁实用滑动按钮插件
PetitQ
这是一款非常实用的 jQuery 滑动按钮插件。该滑动按钮插件可以将 input 元素转换为滑动按钮样式。插件中使用 javascript 来控制滑动按钮的滑动，样式使用纯 CSS 来制作。
使用方法：
首先要在页面中引入 jQuery 和 jquery.onoff.css 及 jquery.onoff.js 文件。然后可以使用两种方式调用该滑动按钮插件：
也想出现在这里？联系我们吧
With AMD：
define([ 'jquery', 'plugins/jquery.onoff' ], function( $ ) {
$('input[type="checkbox"]').onoff();
});
With Script Tags：
<script src="jquery.js"></script>
<script src="plugins/jquery.onoff.min.js"></script>
<script>
jQuery(function($) {
$('input[type="checkbox"]').onoff();
});
</script>
参数：
OnOff.defaults = {
// The event namespace// Should always be non-empty// Used to bind jQuery events without collisionsnamespace: '.onoff',
// The class added to the checkboxclassName: 'onoffswitch-checkbox'
};
事件：
All methods can be called widget-style.
option()：
Returns: If getting, the option value; if setting, the jQuery collection for chaining.
option()方法可以通过无参数调用返回所以得选项：
var options = $input.onoff('option');
通过单个参数可以获取单个选项：
var eventNamespace = $input.onoff('option', 'namespace');
可以通过键和值或键值对对象来设置选项：
$input.onoff('option', 'namespace', 'newspace');
$input.onoff('option', {
namespace: 'newspace',
className: 'newclass'
});
disable()：
将换单按钮对象设置为不可用并取消所有的事件。
$input.onoff('disable');
isDisabled()：
Returns: Boolean
返回当前的滑动按钮状态是否是不可用状态。
var disabled = $input.onoff('isDisabled');
enable()：
Returns: jQuery for chaining
使滑动按钮对象可用，并重新为它绑定事件。
$input.onoff('enable');
wrap()：
Returns: jQuery for chaining
Ensures the HTML for the toggle switch is correct.This method only adds any missing HTML.
$input.onoff('wrap');
unwrap()：
Returns: jQuery for chaining
Removes HTML related to OnOff, leaving only the checkbox.
$input.onoff('unwrap');
destroy()：
Returns: jQuery for chaining
销毁滑动按钮对象并移除数据，但是不会调用 unwrap()方法。
$input.onoff('destroy');
instance()：
Returns: OnOff
返回 OnOff 实例。
var instance = $input.onoff('instance');
应用举例:
添加需要的 input 元素
<input type="checkbox" />
However, you can also start with the generated HTML to avoid FOUC：
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="myonoffswitch" />
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
使用下面的方法初始化滑动按钮插件：
$('input[type=checkbox]').onoff();
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
