CheckBox 自定义插件

发表于 | 分类于

在前端开发项目里，为了打造一个个性、美观的界面，设计师们经常会设计出很特别的web组件。如：checkbox、select、radio等。

如果不用系统默认的组件，那肯定就要自己开发或者去网上找一些开源的组件。刚好最近项目需要，于是自己也写了一个。

项目源码托管到Github上面，大家可以自由下载研究。目前功能比较简单，后期会提供更多的api。

下面是目前插件提供的接口，因为时间关系，后续会添加：单选功能、设置值、获取值、控件大小等接口。

1
2
3
4
5
6
7
$(function(){
	$.customCheckBox.init({
		clickcb:function(){
			console.log(this);
		}
	}).customUnCheckAll("custom-box").customCheckAll("custom-box2");
});

此插件Ui与插件逻辑松耦合，可以自由替换Ui素材与样式表文件。

下面为Html结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="custom-box-wrap" id="custom-box-wrap">
	<div id="custom-check-all" class="custom-checkbox" data-checked="" group-name="custom-box" data-check-all></div>
	<label>全选</label>
	<ul>
		<li>
			<div class="custom-checkbox" id="custom-box-1" data-checked="checked" group-name="custom-box"></div>
			<label>第一行</label>
		</li>
		<li>
			<div class="custom-checkbox" id="custom-box-2" data-checked="" group-name="custom-box"></div>
			<label>第二行</label>
		</li>
		<li>
			<div class="custom-checkbox" id="custom-box-3" data-checked="" group-name="custom-box"></div>
			<label>第三行</label>
		</li>
	</ul>
</div>

详细教程，请移步 Github。
CustomCheckbox 源码地址
CustomCheckbox 插件下载地址
CustomCheckbox 实验室传送门