按钮图标

三种状态开关按钮jQuery插件

面包多

三种状态开关按钮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)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!