html表单美化插件iCheck自定义美化复选框和单选按钮例子

iCheck是一款美化复选框和单选按钮的jQuery查看,能高度定制自定义网页表单效果,具有多套可选皮肤替换方案,能兼容移动设备浏览器和桌面PC台式机浏览器效果,支持鼠标和键盘的操作,轻量级的插件,压缩版本只有1K大小,能支持jQuery和Zepto等JavaScript库。
注:iCheck v2.0 正在开发中,它有一个巨大的性能提升,很多新的选择和方法。这是一个候选版本状态,所以你可以试着用它。感到自由如果你找到工作不提交问题。

特征

相同的投入在不同的浏览器和设备- desktop and mobile
触摸设备的支持- iOS,Android,Windows手机,黑莓,亚马逊的Kindle
键盘可以输入—Tab, Spacebar, Arrow up/down和其他的快捷方式
定制的自由使用任何HTML和CSS样式
jQuery和ZeptoJavaScript库单文件支持
屏幕阅读器可以输入— ARIA画外音和其他属性
轻量的大小1 kb
32个选项自定义复选框和单选按钮

11回调处理函数

9种编程方法

保存了原始输入,工作认真任何选择
如何工作

我的作品与复选框和单选按钮一样,构造函数。它将每个输入一个div,这可能是由您或使用一个定制的可用皮肤。你也可能在一些HTML代码或文本使用 insert 选项。
例如下面的HTML代码

<label>
  <input type="checkbox" name="quux[1]" disabled>
  Foo
</label>
<label for="baz[1]">Bar</label>
<input type="radio" name="quux[2]" id="baz[1]" checked>
<label for="baz[2]">Bar</label>
<input type="radio" name="quux[2]" id="baz[2]">

使用默认的选项你将获得近这:

<label>
  <div class="icheckbox disabled">
    <input type="checkbox" name="quux[1]" disabled>
  </div>
  Foo
</label>
<label for="baz[1]">Bar</label>
<div class="iradio checked">
  <input type="radio" name="quux[2]" id="baz[1]" checked>
</div>
<label for="baz[2]">Bar</label>
<div class="iradio">
  <input type="radio" name="quux[2]" id="baz[2]">
</div>

默认情况下,我不提供任何CSS样式(如果你不使用皮肤)。
选项

这些选项是默认的:
{
  // 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
  handle: '',
  // base class added to customized checkboxes
  checkboxClass: 'icheckbox',
  // base class added to customized radio buttons
  radioClass: 'iradio',
  // class added on checked state (input.checked = true)
  checkedClass: 'checked',
    // if not empty, used instead of 'checkedClass' option (input type specific)
    checkedCheckboxClass: '',
    checkedRadioClass: '',
  // if not empty, added as class name on unchecked state (input.checked = false)
  uncheckedClass: '',
    // if not empty, used instead of 'uncheckedClass' option (input type specific)
    uncheckedCheckboxClass: '',
    uncheckedRadioClass: '',
  // class added on disabled state (input.disabled = true)
  disabledClass: 'disabled',
    // if not empty, used instead of 'disabledClass' option (input type specific)
    disabledCheckboxClass: '',
    disabledRadioClass: '',
  // if not empty, added as class name on enabled state (input.disabled = false)
  enabledClass: '',
    // if not empty, used instead of 'enabledClass' option (input type specific)
    enabledCheckboxClass: '',
    enabledRadioClass: '',
  // class added on indeterminate state (input.indeterminate = true)
  indeterminateClass: 'indeterminate',
    // if not empty, used instead of 'indeterminateClass' option (input type specific)
    indeterminateCheckboxClass: '',
    indeterminateRadioClass: '',
  // if not empty, added as class name on determinate state (input.indeterminate = false)
  determinateClass: '',
    // if not empty, used instead of 'determinateClass' option (input type specific)
    determinateCheckboxClass: '',
    determinateRadioClass: '',
  // class added on hover state (pointer is moved onto input)
  hoverClass: 'hover',
  // class added on focus state (input has gained focus)
  focusClass: 'focus',
  // class added on active state (mouse button is pressed on input)
  activeClass: 'active',
  // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
  labelHover: true,
    // class added to label if labelHover set to true
    labelHoverClass: 'hover',
  // increase clickable area by given % (negative number to decrease)
  increaseArea: '',
  // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
  cursor: false,
  // set true to inherit original input's class name
  inheritClass: false,
  // if set to true, input's id is prefixed with 'iCheck-' and attached
  inheritID: false,
  // set true to activate ARIA support
  aria: false,
  // add HTML code or text inside customized input
  insert: ''
}

不需要复制和粘贴所有的人,你可以说你需要的:

$('input').iCheck({
  labelHover: false,
  cursor: true
});

你可以选择任何一类名称和风格是你想要的。

初始化

在引入jQuery插件(或者 Zepto [polyfill, event, data])以后,只包括icheck.js
我支持任何选择,但只处理复选框和单选按钮:

// customize all inputs (will search for checkboxes and radio buttons)
$('input').iCheck();
// handle inputs only inside $('.block')
$('.block input').iCheck();
// handle only checkboxes inside $('.test')
$('.test input').iCheck({
  handle: 'checkbox'
});
// handle .vote class elements (will search inside the element, if it's not an input)
$('.vote').iCheck();
// you can also change options after inputs are customized
$('input.some').iCheck({
  // different options
});
Indeterminate

HTML5允许指定Indeterminate(“部分”选中状态的复选框)。我支持这两个复选框和单选按钮。
你可以通过使用附加属性的HTML使输入不定(支持我)。都做同样的工作,但是indeterminate="true"不可能在某些浏览器(如IE7):

indeterminate="true"
<input type="checkbox" indeterminate="true">
<input type="radio" indeterminate="true">
determinate="false"
<input type="checkbox" determinate="false">
<input type="radio" determinate="false">

回调函数

我提供了大量的回调函数,可以用来处理变化。

Callback name When used
ifClicked user clicked on a customized input or an assigned label
ifChanged input’s “checked”, “disabled” or “indeterminate” state is changed
ifChecked input’s state is changed to “checked”
ifUnchecked “checked” state is removed
ifToggled input’s “checked” state is changed
ifDisabled input’s state is changed to “disabled”
ifEnabled “disabled” state is removed
ifIndeterminate input’s state is changed to “indeterminate”
ifDeterminate “indeterminate” state is removed
ifCreated input is just customized
ifDestroyed customization is just removed

使用on()将它们绑定到输入法:

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

ifcreated回调应该绑定在插件初始化。

方法

这些方法可用于以编程方式更改(任何选择都可以用):
// change input's state to 'checked'
$('input').iCheck('check');
// remove 'checked' state
$('input').iCheck('uncheck');
// toggle 'checked' state
$('input').iCheck('toggle');
// change input's state to 'disabled'
$('input').iCheck('disable');
// remove 'disabled' state
$('input').iCheck('enable');
// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');
// remove 'indeterminate' state
$('input').iCheck('determinate');
// apply input changes, which were done outside the plugin
$('input').iCheck('update');
// remove all traces of iCheck
$('input').iCheck('destroy');
你也可以指定一些功能,将每个方法调用的执行:
$('input').iCheck('check', function(){
  alert('Well done, Sir');
});

随时创建和提交拉请求或提交问题如果你找到的东西不工作。
比较

我是为了避免常规的重新发明轮子的工作时,复选框和单选按钮。它为浏览器的大量提供预期相同的结果,设备和版本。回调方法可以轻松处理和定制的输入变化。
有一些CSS3的方式可复选框和单选按钮的风格,喜欢这一个。你必须知道的一些类似方法的缺点:
输入键盘无法访问,因为display: none 和 visibility: hidden用来隐藏
可怜的浏览器支持
移动设备上的多个错误
微妙的,难以维持CSS代码
JavaScript仍然是需要解决的具体问题
虽然CSS3的方法是非常有限的解决方案,我是每天都更换覆盖了大部分的任务。

时间: 2024-10-25 17:04:20

html表单美化插件iCheck自定义美化复选框和单选按钮例子的相关文章

Bootstrap复选框和单选按钮美化插件(推荐)_javascript技巧

官网地址 需要引入awesome-bootstrap-checkbox.css.font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载. checkboxs的样式 radio的样式 radio样式 只要引入上面所说的文件之后,也可以自己定制样式,代码如下: .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 20

CSS3美化复选框checkbox的例子

HTML 通常我们使用以下html结构,我们给复选框定义id#checkbox_a1,然后使用label的for属性与之关联,这样的话,用户点击label的时候,实际上就相当于点击了#checkbox_a1.  check CSS 通过label和checkbox,我们可以将checkbox隐藏,而将label制作为各种漂亮超酷的复选框样式.我们可以使用:before和:after伪元素来制作各种效果,如滑动按钮的效果.这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实

jquery自定义表单验证插件_jquery

本文实例为大家分享了jquery表单验证插件,供大家参考,具体内容如下 //正则表达式 var map = new Map(); map.put("*", /[\w\W]+/); map.put("*6-16", /^[\w\W]{6,16}$/); map.put("n", /^\d+$/); map.put("n6-16", /^\d{6,16}$/); map.put("s", /^[\u4E00-\

jquery validate表单验证插件_jquery

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

功能强大的jquery.validate表单验证插件_jquery

本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示   2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点

快速学习jQuery插件 jquery.validate.js表单验证插件使用方法_jquery

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

易操作的jQuery表单提示插件_jquery

本文实例讲述了一款轻量级的表单提示插件---jQuery Form Toolltip.分享给大家供大家参考.具体如下: jQuery Form Toolltip 特点: 你可以单独自定义提示信息的CSS样式. 你可以指定淡入淡出的方向,当前支持Top, Bottom, Right 和 Left 运行效果截图如下: 具体代码如下: jquery实例:jQuery Form Toolltip使用方法引入核心文件 <script src="js/jquery/2.1.1/jquery.min.j

一款比较实用齐全的jQuery表单验证插件

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证. 不多说,看DEMO吧:点些下载 如何使用? 第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

jquery表单验证插件(jquery.validate.js)的3种使用方式

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下     jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js