按钮图标

三种状态开关按钮jQuery插件

创客主机


ijToggler是一款支持三种状态的jQuery开关按钮插件。该开关按钮插件实用简单,支持选择状态,未选状态和中间状态三种状态。

使用方法

在页面中引入jquery、jtoggler.js和jtoggler.styles.css文件。

  1. <link rel="stylesheet" href="jtoggler.styles.css">
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script src="js/jtoggler.js"></script>

HTML部分

实用类型为checkbox的input组件来创建开关按钮。

  1. <input type="checkbox" class="jtoggler">
  2. <input type="checkbox" checked class="jtoggler">
  3. <input type="checkbox" disabled class="jtoggler">
  4. <input type="checkbox" checked disabled class="jtoggler">

要实现多种状态,可以添加data-jtmulti-state属性。

  1. <input type="checkbox" class="jtoggler" data-jtmulti-state>

初始化插件

在页面DOM元素加载完毕之后,通过jtoggler()方法来初始化该插件。

  1. $(function(){
  2.  
  3.   $('.jtoggler').jtoggler();
  4.  
  5. });

当开关按钮的状态发生改变时,可以通过下面的方法来查看。

  1. $(document).on('jt:toggled', function(event, target) {
  2.   console.log(event, target);
  3.   console.info($(target).prop('checked'))
  4. });
  5.  
  6. $(document).on('jt:toggled:multi', function (event, target) {
  7.   console.log(event, target);
  8.   console.info($(target).parent().index())
  9. });

Github网址:https://github.com/sinneren/jToggler

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!