轻量级Javript复选框动画插件Checkbix

所属分类:输入-选择框,定制和风格

 8036  53  查看评论 (6)
轻量级Javript复选框动画插件Checkbix ie兼容10

Checkbix

使用方法

安装

可以通过bower或npm来安装该复选框动画插件。

bower install checkbix
npm install checkbix

使用方法

在页面中引入checkbix.min.css和checkbix.min/js文件。

<link rel="stylesheet" href="dist/css/checkbix.min.css">
<script src="dist/js/checkbix.min.js"></script>

HTML结构

该复选框的基本HTML结构如下:

<input id="mycheckbox" type="checkbox" class="checkbix" data-text="Checkbix">

初始化插件

可以通过Checkbix.init()方法来实例化页面中所有的带checkbix class类的复选框。

<script>
    Checkbix.init();
</script>

配置参数

通过在<checkbox>标签中配置各种data-*属性,可以生成不同类型的复选框。

  • data-text:复选框的显示文本。

  • data-size:复选框的尺寸,可设置为'large'。

  • data-shape:复选框的形状,可设置为'circled'。

  • data-color:复选框的颜色,可设置为'black','blue','red','gray','orange'。

  • data-arialabel:自定义ARIA标签。

多数data属性都在checkbix.css文件中定义,你也可以自定义自己的样式。


相关插件-选择框,定制和风格

jQuery省市区三级联动菜单

jQuery实现省市区三级联动菜单
  选择框
 4189  23

jQuery中国省市区地址三级联动插件Distpicker

distpicker是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单,简单设置即可完成中国省市区地址联动效果。
  选择框
 76079  209

仿淘宝手机网站选择省市县效果

仿淘宝手机网站选择省市县效果
  选择框
 14835  106

Bootstrap复选框,单选框美化特效

本特效是一款使用Font Awesome 字体图标来对Bootstrap复选框和单选按钮进行美化的CSS样式特效的代码。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
  选择框
 17539  55

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    家住三十三重天外 0
    2017/8/5 16:09:08
     怎么解决checkbox在火狐下选中了之后刷新页面还是选中状态 ;autocomplate="off"不管用 
        Cracker Ⅲ0
        2017/9/18 16:08:18

        checked  属性要删掉啊

    回复
    followheart 0
    2017/4/18 15:59:36
    遥远的她 0
    2017/4/10 14:44:38

    用不了 没效果。。。

    回复
    Mr.Pan 0
    2016/12/29 18:12:45
    <link rel="stylesheet" href="dist/css/checkbix.min.css">
    <script src="dist/js/checkbix.min.js"></script>
    都加载了,初始化的时候仍是说的 Uncaught ReferenceE

    rror: Checkbix is not defined

    太奇怪了。而且down下来的demo案例,index.html文件谷歌浏览器打开也是有效果的

    自己的项目中用就是不行

    回复
    kangge 0
    2016/11/3 16:11:56
    里面设置的rem会跟自己定义的冲突,自适应不是很好 回复
取消回复