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

按钮 滑动按钮 2015-02-24

控件介绍
这是一款非常实用的jQuery滑动按钮插件。该滑动按钮插件可以将input元素转换为滑动按钮样式。插件中使用javascript来控制滑动按钮的滑动,样式使用纯CSS来制作。
浏览器兼容

支持IE10+

演示下载 945
使用方法

浏览器支持

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

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

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

使用方法

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

With AMD
1
2
3
define([ 'jquery', 'plugins/jquery.onoff' ], function( $ ) {
  $('input[type="checkbox"]').onoff();
});
With Script Tags
1
2
3
4
5
6
7
<script src="jquery.js"></script>
<script src="plugins/jquery.onoff.min.js"></script>
<script>
jQuery(function($) {
  $('input[type="checkbox"]').onoff();
});
</script>     

参数

1
2
3
4
5
6
7
8
9
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()方法可以通过无参数调用返回所以得选项:

    1
    var options = $input.onoff('option');         

    通过单个参数可以获取单个选项:

    1
    var eventNamespace = $input.onoff('option', 'namespace');         

    可以通过键和值或键值对对象来设置选项:

    1
    2
    3
    4
    5
    $input.onoff('option', 'namespace', 'newspace');
    $input.onoff('option', {
      namespace: 'newspace',
      className: 'newclass'
    });         
  • disable()

    Returns: jQuery for chaining

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

    1
    $input.onoff('disable');         
  • isDisabled()

    Returns: Boolean

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

    1
    var disabled = $input.onoff('isDisabled');         
  • enable()

    Returns: jQuery for chaining

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

    1
    $input.onoff('enable');         
  • wrap()

    Returns: jQuery for chaining

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

    1
    $input.onoff('wrap');         
  • unwrap()

    Returns: jQuery for chaining

    Removes HTML related to OnOff, leaving only the checkbox.

    1
    $input.onoff('unwrap');         
  • destroy()

    Returns: jQuery for chaining

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

    1
    $input.onoff('destroy');         
  • instance()

    Returns: OnOff

    返回OnOff实例。

    1
    var instance = $input.onoff('instance');         

应用举例

添加需要的input元素

1
<input type="checkbox" />   

However, you can also start with the generated HTML to avoid FOUC:

1
2
3
4
5
6
7
<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>     

使用下面的方法初始化滑动按钮插件:

1
$('input[type=checkbox]').onoff();     

本文转载请注明出处:http://www.zhuiye.com/detail_26.html