这是一款非常实用的jQuery滑动按钮插件。该滑动按钮插件可以将元素转换为滑动按钮样式。插件中使用javascript来控制滑动按钮的滑动,样式使用纯CSS来制作。
浏览器支持
该jQuery滑动按钮插件可以在支持jQuery 2的浏览器上工作,IE6-8不支持该插件。
IE9不支持CSS transitions,在IE9上不会有动画效果。
该滑动按钮支持Pointer、触摸屏和鼠标点击。
使用方法
首先要在页面中引入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 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()
方法可以通过无参数调用返回所以得选项:var options = $input.onoff('option');
通过单个参数可以获取单个选项:
var eventNamespace = $input.onoff('option', 'namespace');
可以通过键和值或键值对对象来设置选项:
$input.onoff('option', 'namespace', 'newspace'); $input.onoff('option', { namespace: 'newspace', className: 'newclass' });
-
disable():
Returns: jQuery for chaining
将换单按钮对象设置为不可用并取消所有的事件。
$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();
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!