<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkboxes and radio buttons customization (jQuery and Zepto) plugin</title>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<link href="css/custom.css?v=1.0.2" rel="stylesheet">
<link href="skins/all.css?v=1.0.2" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="icheck.js?v=1.0.2"></script>
<script src="js/custom.min.js?v=1.0.2"></script>
</head>
<body>
<div class="layout clear">
<div class="header">
<h1>super customized checkboxes and radio buttons for jQuery & Zepto</h1>
<h3>iCheck <span>v1.0.2</span></h3>
<strong>@<a href="http://twitter.com/fronteed/">Fronteed</a></strong>
</div>
<div class="features">
<div class="arrows">
<div class="bottom" data-to="demo"></div>
</div>
<h2>插件特点</h2>
<ul>
<li>
<strong>在不同浏览器和设备上都有相同的表现</strong> — 包括 <span class="self" data-to="download">桌面和移动设备</span>
</li>
<li>
<strong>支持触摸设备</strong> — iOS、Android、BlackBerry、Windows Phone
</li>
<li>
<strong>支持键盘导航</strong> — <span class="mark">Tab</span>、<span class="mark">Spacebar</span>、<span class="mark">Arrow
up/down</span> 和其它快捷键
</li>
<li>
<strong>方便定制</strong> — 用HTML 和 CSS 即可为其设置样式 (试试 <span class="self" data-to="skins">6 套针对Retina屏幕的皮肤吧</span>)
</li>
<li>
<strong>支持 jQuery 和 Zepto</strong> JavaScript工具库
</li>
<li>
<strong>体积小巧</strong> — gzip压缩后只有1 kb
</li>
<li class="offset">
<strong class="self" data-to="options">25 种参数</strong> 用来定制复选框（checkbox）和单选按钮（radio button）
</li>
<li>
<strong class="self" data-to="callbacks">8 个回调事件</strong> 用来监听输入框的状态
</li>
<li>
<strong class="self" data-to="methods">7 个方法</strong> 用来通过编程方式控制输入框的状态
</li>
<li>
能够将输入框的状态变化同步回原始输入框中， <span class="self" data-to="init">支持</span>所有选择器
</li>
</ul>
</div>
<div class="demo-holder">
<h2 class="demo-title">案例</h2>
<div class="demo">
<div class="arrows">
<div class="top" data-to="features"></div>
<div class="bottom" data-to="skins"></div>
</div>
<div class="demo-list clear">
<ul>
<li>
<input tabindex="1" type="checkbox" id="input-1">
<label for="input-1">Checkbox, <span>#input-1</span></label>
</li>
<li>
<input tabindex="2" type="checkbox" id="input-2" checked>
<label for="input-2">Checkbox, <span>#input-2</span></label>
</li>
</ul>
<ul>
<li>
<input tabindex="3" type="radio" id="input-3" name="demo-radio">
<label for="input-3">Radio button, <span>#input-3</span></label>
</li>
<li>
<input tabindex="4" type="radio" id="input-4" name="demo-radio" checked>
<label for="input-4">Radio button, <span>#input-4</span></label>
</li>
</ul>
<script>
$(document).ready(function(){
var callbacks_list = $('.demo-callbacks ul');
$('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){
callbacks_list.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
}).iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%'
});
});
</script>
</div>
<dl class="demo-methods">
<dt>
<span class="self do-check">Add <span class="mark">checked</span> state to 1 and 3 inputs</span>
<span class="code">
<span class="self">查看代码</span>
</span>
</dt>
<dd>
<pre class="markup">
$('#input-1, #input-3').iCheck('check');
</pre>
</dd>
<dt>
<span class="self do-uncheck">Remove <span class="mark">checked</span> state from 1 and 3 inputs</span>
<span class="code">
<span class="self">查看代码</span>
</span>
</dt>
<dd>
<pre class="markup">
$('#input-1, #input-3').iCheck('uncheck');
</pre>
</dd>
<dt>
<span class="self do-disable">Add <span class="mark">disabled</span> state to 2 and 4 inputs</span>
<span class="code">
<span class="self">查看代码</span>
</span>
</dt>
<dd>
<pre class="markup">
$('#input-2, #input-4').iCheck('disable');
</pre>
</dd>
<dt>
<span class="self do-enable">Remove <span class="mark">disabled</span> state from 2 and 4 inputs</span>
<span class="code">
<span class="self">查看代码</span>
</span>
</dt>
<dd>
<pre class="markup">
$('#input-2, #input-4').iCheck('enable');
</pre>
</dd>
<dt>
<span class="self do-destroy">Remove all traces of iCheck</span>
<span class="code">
<span class="self">查看代码</span>
</span>
</dt>
<dd>
<pre class="markup">
$('input').iCheck('destroy');
</pre>
</dd>
</dl>
<div class="demo-callbacks">
<h2>回掉函数</h2>
<ul></ul>
</div>
</div>
</div>
<div class="skins">
<h2>皮肤</h2>
<div class="skin skin-minimal">
<div class="arrows">
<div class="top" data-to="demo"></div>
<div class="bottom" data-to="skin-square"></div>
</div>
<h3>Minimal 皮肤</h3>
<dl class="clear">
<dd class="selected">
<div class="skin-section">
<h4>Live</h4>
<ul class="list">
<li>
<input tabindex="5" type="checkbox" id="minimal-checkbox-1">
<label for="minimal-checkbox-1">Checkbox 1</label>
</li>
<li>
<input tabindex="6" type="checkbox" id="minimal-checkbox-2" checked>
<label for="minimal-checkbox-2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" id="minimal-checkbox-disabled" disabled>
<label for="minimal-checkbox-disabled">Disabled</label>
</li>
<li>
<input type="checkbox" id="minimal-checkbox-disabled-checked" checked disabled>
<label for="minimal-checkbox-disabled-checked">Disabled & checked</label>
</li>
</ul>
<ul class="list">
<li>
<input tabindex="7" type="radio" id="minimal-radio-1" name="minimal-radio">
<label for="minimal-radio-1">Radio button 1</label>
</li>
<li>
<input tabindex="8" type="radio" id="minimal-radio-2" name="minimal-radio" checked>
<label for="minimal-radio-2">Radio button 2</label>
</li>
<li>
<input type="radio" id="minimal-radio-disabled" disabled>
<label for="minimal-radio-disabled">Disabled</label>
</li>
<li>
<input type="radio" id="minimal-radio-disabled-checked" checked disabled>
<label for="minimal-radio-disabled-checked">Disabled & checked</label>
</li>
</ul>
<div class="colors clear">
<strong>Color 主题</strong>
<ul>
<li class="active" title="Black"></li>
<li class="red" title="Red"></li>
<li class="green" title="Green"></li>
<li class="blue" title="Blue"></li>
<li class="aero" title="A
checkbox美化示例（icheck-css）.rar
需积分: 10 6 浏览量
2020-06-11
11:22:07
上传
评论
收藏 485KB RAR 举报
checkbox美化示例（icheck-css）.rar （150个子文件） 
custom.css 21KB _all.css 20KB _all.css 14KB _all.css 14KB _all.css 12KB normalize.css 9KB base.css 3KB yellow.css 2KB purple.css 2KB orange.css 2KB green.css 2KB aero.css 2KB blue.css 2KB pink.css 2KB grey.css 2KB red.css 2KB line.css 2KB all.css 2KB yellow.css 1KB purple.css 1KB orange.css 1KB yellow.css 1KB orange.css 1KB purple.css 1KB green.css 1KB green.css 1KB blue.css 1KB aero.css 1KB pink.css 1KB grey.css 1KB grey.css 1KB pink.css 1KB aero.css 1KB blue.css 1KB red.css 1KB red.css 1KB minimal.css 1KB polaris.css 1KB square.css 1KB yellow.css 1KB purple.css 1KB orange.css 1KB green.css 1KB aero.css 1KB blue.css 1KB pink.css 1KB grey.css 1KB futurico.css 1KB red.css 1KB flat.css 1KB Thumbs.db 88KB Thumbs.db 9KB montserrat-regular.eot 13KB montserrat-bold.eot 13KB
checkbox.gif 2KB radiobutton.gif 2KB
index.html 54KB ICheck.html 8KB index.html 4KB index.html 3KB
banner.jpg 24KB jquery.js 91KB zepto.js 18KB icheck.js 14KB icheck.min.js 5KB custom.js 3KB custom.min.js 2KB custominput.js 900B
polaris@2x.png 7KB polaris.png 3KB red@2x.png 3KB orange@2x.png 3KB aero@2x.png 3KB yellow@2x.png 3KB pink@2x.png 3KB purple@2x.png 3KB aero@2x.png 3KB pink@2x.png 3KB grey@2x.png 3KB blue@2x.png 3KB flat@2x.png 3KB yellow@2x.png 3KB grey@2x.png 3KB red@2x.png 3KB orange@2x.png 3KB purple@2x.png 3KB green@2x.png 3KB square@2x.png 3KB blue@2x.png 3KB green@2x.png 3KB futurico@2x.png 3KB icheck.png 2KB yellow.png 2KB purple.png 2KB red.png 2KB pink.png 2KB orange.png 2KB square.png 2KB grey.png 2KB blue.png 2KB共 150 条
- 1
- 2
资源评论
