<!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>Plugin features</h2>
<ul>
<li>
<strong>Identical inputs across different browsers and devices</strong> — both
<span class="self" data-to="download">desktop and mobile</span>
</li>
<li>
<strong>Touch devices support</strong> — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle </li>
<li>
<strong>Keyboard accessible inputs</strong> —
<span class="mark">Tab</span>,
<span class="mark">Spacebar</span>,
<span class="mark">Arrow up/down</span> and other shortcuts </li>
<li>
<strong>Screenreader accessible inputs</strong> —
<a href="https://developer.mozilla.org/en-US/docs/Accessibility/ARIA" target="blank">ARIA</a> attributes for VoiceOver and others </li>
<li>
<strong>Customization freedom</strong> — use any HTML and CSS to style inputs (try
<span class="self" data-to="skins">6 Retina-ready skins</span>) </li>
<li>
<strong>jQuery and Zepto</strong> JavaScript libraries support from single file </li>
<li>
<strong>Lightweight size</strong> — 1 kb gzipped </li>
<li class="offset">
<strong class="self" data-to="options">32 options</strong> to customize checkboxes and radio buttons </li>
<li>
<strong class="self" data-to="callbacks">11 callbacks</strong> to handle changes </li>
<li>
<strong class="self" data-to="methods">9 methods</strong> to make changes programmatically </li>
<li> Saves changes to original inputs,
<span class="self" data-to="init">works carefully</span> with any selectors </li>
</ul>
</div>
<div class="social clear">
<ul class="left">
<li>
<a href="http://github.com/fronteed/iCheck/">Download latest version</a>
</li>
</ul>
<ul class="right local">
<li>
<a href="http://twitter.com/fronteed/">Follow @fronteed</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=Highly customizable checkboxes and radio buttons&url=http://fronteed.com/iCheck/&via=fronteed&hashtags=jQuery,Zepto">Share on Twitter</a>
</li>
<li>
<a href="https://github.com/fronteed/iCheck">Star on GitHub</a>
</li>
</ul>
</div>
<div class="demo-holder">
<h2 class="demo-title">Demo</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">show code</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">show code</span>
</span>
</dt>
<dd> <pre class="markup">
$('#input-1, #input-3').iCheck('uncheck');
</pre> </dd>
<dt>
<span class="self do-disable">Add
基于SpringBoot 搭建的番茄短视频-后台管理系统.zip （2000个子文件） 
components-md.css 761KB components.css 749KB components-portal.css 749KB components-rounded.css 748KB components-md.min.css 600KB components-md-rtl.min.css 600KB components.min.css 589KB components-rtl.min.css 589KB components-rounded.min.css 589KB components-rounded-rtl.min.css 589KB components-buttons.css 153KB bootstrap.css 148KB bootstrap.css 148KB bootstrap.css 124KB bootstrap.css 124KB bootstrap-rtl.min.css 115KB bootstrap-rtl.min.css 115KB bootstrap.min.css 115KB bootstrap.min.css 115KB layout.css 106KB layout.min.css 87KB layout-rtl.min.css 72KB plugins-md.css 54KB plugins.css 54KB plugins-md.min.css 41KB plugins-md-rtl.min.css 41KB plugins.min.css 40KB plugins-rtl.min.css 40KB darkblue.css 40KB font-awesome.css 32KB font-awesome.css 32KB jquery-ui.min.css 29KB bootstrap-datepicker3.standalone.css 29KB bootstrap-datepicker3.css 28KB bootstrap-datepicker3.standalone.min.css 26KB font-awesome.min.css 26KB font-awesome.min.css 26KB bootstrap-datepicker3.min.css 26KB fullcalendar.css 24KB custom.css 21KB custom.css 21KB _all.css 20KB _all.css 20KB ui.jqgrid-bootstrap.css 18KB ui.jqgrid-bootstrap.css 18KB ui.jqgrid-bootstrap.css 18KB ui.jqgrid-bootstrap.css 18KB bootstrap-datepicker.standalone.css 18KB select2.css 17KB select2.css 17KB ui.jqgrid.css 17KB ui.jqgrid.css 17KB ui.jqgrid.css 17KB ui.jqgrid.css 17KB bootstrap-datepicker.css 17KB bootstrap-datepicker.standalone.min.css 15KB select2-bootstrap.min.css 15KB select2-bootstrap.min.css 15KB select2.min.css 15KB select2.min.css 15KB bootstrap-datepicker.min.css 15KB _all.css 14KB _all.css 14KB blog.css 13KB blog.css 13KB sweetalert.css 13KB sweetalert.css 13KB dropzone.css 12KB dropzone.css 12KB _all.css 12KB bootstrap-datetimepicker.css 12KB bootstrap-datetimepicker.css 12KB fullcalendar.min.css 11KB simple-line-icons.css 11KB blog.min.css 10KB blog.min.css 10KB blog-rtl.min.css 10KB blog-rtl.min.css 10KB search.css 9KB search.css 9KB dropzone.min.css 9KB dropzone.min.css 9KB simple-line-icons.min.css 9KB normalize.css 9KB normalize.css 9KB bootstrap-datetimepicker.min.css 9KB bootstrap-datetimepicker.min.css 9KB inbox.css 8KB pricing.css 8KB pricing.css 8KB todo.css 8KB bootstrap-select.css 7KB bootstrap-select.css 7KB test.css 7KB test.css 7KB search.min.css 7KB search-rtl.min.css 7KB search.min.css 7KB search-rtl.min.css 7KB daterangepicker.css 7KB共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
