当前位置：首页 > 网页特效 > 选择框

jQuery轻量级扁平化单选按钮和复选框美化插件

分类：选择框日期：2024-05-14 点击(0) 评论(0)

简介

##### 基本使用方法
引入必要的jquery和jquery-labelauty文件。然后在body标签添加单选按钮或多选按钮，然后使用labelauty()方法来调用该插件：

```javascript
<input type="checkbox"/>
$(document).ready(function(){
    $(":checkbox").labelauty();
});
```
 高级使用方法
上面的代码会生成一个默认的复选框，它的label为“Checked”和“Unchecked”。

你可以改变默认的label文字，或者为每一个checkbox设置自定义的label。例如：

```javascript
<input type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files"/>
$(document).ready(function(){
    $(":checkbox").labelauty();
});
```
单选按钮和复选框的data-labelauty属性可以让你在选中和未选中状态时自定义label文本。它的格式是：unchecked|checked，中间通过"|"符号分割。这个符号也可以改变，往下看!

data-labelauty属性有三种不同的使用方式：

Unchecked|Checked：为选中和未选中状态调用label文字：
```javascript
<input type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files"/>
```
Message：如果没有"|"分割符，Message文字将是永久的，不会随着选中状态的改变而改变：
```javascript
<input type="checkbox" data-labelauty="Synchronize my files"/>
```
Omitted：省略这个属性，将使用默认的label。
```javascript
<input type="checkbox"/>
```
#####  配置参数
设置一个class来在这些class的单选按钮和复选按钮上使用美化效果：
```javascript
$(":checkbox").labelauty({ class: "myclass" });
```
如果label设置为false，那么只会显示输入框的图标：
```javascript
$(":checkbox").labelauty({ label: false });
```
可以通过separator来改变data-labelauty属性中的分割符号：
```javascript
$(":checkbox").labelauty({ separator: "-" });
```
可以在checked_label和unchecked_label中自定义默认的label：
```javascript
checked_label: "You selected this",
unchecked_label: "You don't want it"
```
自定义的label文字有不同的宽度，你可以通过minimum-width来设置它的最小宽度：
```javascript
$(":checkbox").labelauty({ minimum_width: "170px" });
```
你还可以通过same_width将label全部设置为相同的宽度：
```javascript
$(":checkbox").labelauty({ same_width: true });
```
#####  浏览器兼容
IE7和IE8不支持该jQuery单选按钮和复选框美化插件。

web299.com

jQuery轻量级扁平化单选按钮和复选框美化插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果