<html>
<head>
<title>"jQuery checkbox v.1.3.0 Beta 1" demo Download by http://www.jb51.net</title>
<link rel="stylesheet" href="jquery.checkbox.css" />
<link rel="stylesheet" href="jquery.safari-checkbox.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.checkbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input:checkbox:not([safari])').checkbox();
$('input[safari]:checkbox').checkbox({cls:'jquery-safari-checkbox'});
$('input:radio').checkbox();
});
displayForm = function (elementId)
{
var content = [];
$('#' + elementId + ' input').each(function(){
var el = $(this);
if ( (el.attr('type').toLowerCase() == 'radio'))
{
if ( this.checked )
content.push([
'"', el.attr('name'), '": ',
'value="', ( this.value ), '"',
( this.disabled ? ', disabled' : '' )
].join(''));
}
else
content.push([
'"', el.attr('name'), '": ',
( this.checked ? 'checked' : 'not checked' ),
( this.disabled ? ', disabled' : '' )
].join(''));
});
alert(content.join('\n'));
}
changeStyle = function(skin)
{
jQuery('#myform :checkbox').checkbox((skin ? {cls: skin} : {}));
}
</script>
<style type="text/css">
body, html { padding: 0px; margin: 0px; background: #ccc; font-family: Arial;font-size: 13px;}
h1 {margin: 20px 0 0 0;padding: 0;color: #09f;font-size: 28px; text-align: center;font-weight: bold;}
h2 {margin: 25px 0 0 0;padding: 0;font-size: 20px;}
h3 {margin: 25px 0 0 0;padding: 0;font-size: 16px;}
p {clear: both;vertical-align: middle;font-size: 13px;margin: 10px 0 0 0;padding: 0;}
pre { display: block;margin: 0px;padding: 2px 2px 2px 2px; border: 1px solid #888; background: #ccc;}
code { display: block;margin: 0px;padding: 2px 2px 2px 20px;border: 1px solid #888;background: #fff;}
.hr { clear: both;margin: 20px 0 20px 0;font-size: 2px;line-height: 2px;background: #ccc;border: 1px solid #888;height: 2px;display: block;}
table {font-size: 13px;}
a {color: #069;}
a:hover{color: #e30;}
a.code{display: block;float:left;clear:both;padding: 2px 0px;}
label { cursor: hand; cursor: pointer;}
</style>
</head>
<body>
<table width="760" cellpadding="0" cellspacing="0" align="center" style="background: #fff; height: 100%;" height="100%"><tr><td style="padding: 20px;" valign="top">
<h1>"jQuery checkbox v.1.3.0 Beta 1" demo</h1>
<p>Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.</p>
<h2>Features:</h2>
<ol>
<li>only inline elements used, just like default checkoxes</li>
<li>cross-browser look and feel (tested in IE6, IE7, IE8, Firefox and Chrome engines)</li>
<li>work with radio buttons too</li>
<li>supports inline and jQuery attached click events</li>
<li>supports "label hovering": when you point over parent label element, it will highlight its checkbox (thanks to Eugene for the idea)</li>
<li>dynamic skin changing</li>
<li>adds new checkbox events "check", "uncheck", "disable", "enable", ready to use in jQuery.bind() method</li>
</ol>
<h2>Usefull information:</h2>
<ul>
<li><a href="http://plugins.jquery.com/project/jquery-checkbox/">jQuery checkbox @ jQuery Plugins</a></li>
<li><a href="http://groups.google.com/group/jquery-checkbox/">jQuery checkbox @ Google Groups</a></li>
<li><a href="http://code.google.com/p/jquery-checkbox/">jQuery checkbox @ Google Code</a></li>
<li>Feel free to contact <script>document.write(['<','a hr','ef="m','ailt','o:wm','.','mor','gun@','gm','ail','.c','om"','>me<','/','a>'].join(''));</script> for support or if you want to make a donation.</li>
<li>Please contact <script>document.write(['<','a hr','ef="m','ailt','o:wm','.','mor','gun@','gm','ail','.c','om"','>me<','/','a>'].join(''));</script> if you want your site listed under "Who uses" block.</li>
</ul>
<h2>Requirements:</h2>
<ul>
<li>jQuery 1.3.x or 1.2.x (1.3.2 recommended) </li>
</ul>
<h2>Download:</h2>
<ul>
<li><a href="http://plugins.jquery.com/files/jquery-checkbox.1.3.0b1.zip">Download from plugins.jQuery.com</a></li>
<li><a href="http://jquery-checkbox.googlecode.com/files/jquery-checkbox.1.3.0b1.zip">Download from code.google.com</a></li>
</ul>
<div class="hr"></div>
<h2>Examples:</h2>
<div id="form1" style="position:relative">
<h3>Default skin</h3>
<p><label><label> <input name="checkbox.1.1" type="checkbox" onclick="var j = jQuery('#check').attr('disabled', jQuery('#check').attr('disabled') ? false : true)"> Unchecked checkbox (by clicking on this checkbox you can disable/enable the checkbox below)</label></label></p>
<p><input name="checkbox.1.2" type="checkbox" id="check" checked> <label for="check"><label> Checked checkbox (this one)</label></label></p>
<p><input name="checkbox.1.3" type="checkbox" disabled> Disabled & unchecked checkbox</p>
<p><input name="checkbox.1.4" type="checkbox" disabled checked> Disabled & checked checkbox</p>
<h3>Safari skin</h3>
<p><input name="checkbox.2.1" type="checkbox" safari=1 onclick="jQuery('#check2').attr('checked', !jQuery('#check2').attr('checked') ? true : false)"> Unchecked checkbox (by clicking on this checkbox you can check/uncheck the checkbox below)</p>
<p><input name="checkbox.2.2" type="checkbox" safari=1 id="check2" checked> Checked checkbox (this one)</p>
<p><input name="checkbox.2.3" type="checkbox" safari=1 disabled> Disabled & unchecked checkbox</p>
<p><input name="checkbox.2.4" type="checkbox" safari=1 disabled checked> Disabled & checked checkbox</p>
<h3>Radio button (wrapped in <label>)</h3>
<p><label><input name="radio.1" value="1" type="radio"> 1st radio button</label></p>
<p><label><input name="radio.1" value="2" type="radio" checked> 2nd radio button</label></p>
<p><label><input name="radio.1" value="3" type="radio"> 3rd radio button</label></p>
</div>
<div class="hr"></div>
<p><a href="javascript:displayForm('form1');">Display form state</a></p>
<div class="hr"></div>
<h3>Code</h3>
<pre><code>$(document).ready(function() {
// ":not([safari])" is desirable but not necessary selector
$('input:checkbox:not([safari])').checkbox();
$('input[safari]:checkbox').checkbox({cls:'jquery-safari-checkbox'});
$('input:radio').checkbox();
}); </code></pre>
<div class="hr"></div>
<h3>Advanced demo (changing skin on the fly)</h3>
<p>
<a href="javascript: changeStyle();">Switch to "Default" skin</a> <a href="javascript: changeStyle('jquery-safari-checkbox');">Switch to "Safari" skin</a>
</p>
<form id="myform" action="javascript:void(0)">
<table cellspacing="5">
<tr><th> </th><th>Last Name</th><th>First Name</th><th>Title</th></tr>
<tr><td><input type="checkbox" name="checkbox[]" class="top5" /></td><td>Davolio</td><td>Nancy</td><td>Sales Representative</td></tr>
<tr><td><input type="checkbox" name="checkbox[]" class="top5" /></td><td>Fuller</td><td>Andrew</td><td>Vice President, Sales</td></tr>
<tr><td><input type="checkbox" name="checkbox[]" class="top5" /></td><td>Leverling</td><td>Janet</td><td>Sales Representative</td></tr>
<tr><td><input type="checkbox" name="checkbox[]" class="top5" /></td><td>Peacock</td><td>Margaret</td><td>Sales Representative</td></tr>
<tr><td><input type="checkbox" name="checkbox[]" class="top5 bottom5" /></td><td>Buchanan</td><td>Steven</td><td>Sales Manager</td></tr>
<tr><td><input type="checkbox" name="checkbox[]" class="bottom5" /></td><td>Suyama</td><td>Michael</td><td>Sales Representative</td></tr>
<tr><td><input type="checkbox" name="checkbox[]" class="bottom5" /></td><td>King</td><td>Robert</td><td>Sales Representative</td></tr>
<tr><td><input type="checkbox" name="checkbox[]" class="bottom5" /></td><td>Callahan</td><td>Laura</td><td>Inside Sales C
jquery-checkbox.1.3.0.rar （10个子文件） 
jquery-checkbox.1.3.0 
empty.png 137B
jquery.checkbox.js 4KB jquery.js 56KB jquery.safari-checkbox.css 818B safari-checkbox.png 1KB jquery.checkbox.css 732B jquery.checkbox.min.js 2KB
index.html 8KB checkbox.png 3KB demo.png 5KB
- 1
- 2
- 3
- 4
- 5
- 6
前往页