绚丽的复选框jquery-checkbox资源-CSDN文库

共10个文件

png：4个

js：3个

css：2个

jquery

checkbox

4星 · 超过85%的资源需积分: 9 149 浏览量 2012-12-05 13:04:53 上传评论 2 收藏 34KB RAR 举报

**绚丽的复选框 jQuery-Checkbox** 在网页设计中，复选框（checkbox）是常见的交互元素，用于让用户选择一个或多个选项。然而，原始的HTML复选框样式通常较为简单，缺乏吸引力。为了提升用户体验和界面美观度，开发者会借助JavaScript库，如jQuery，来实现更富视觉效果的复选框。"绚丽的复选框 jQuery-Checkbox"就是这样一款插件，它能够将普通的HTML复选框转换为具有动态效果和个性化样式的元素。 jQuery-Checkbox 是基于流行的JavaScript库jQuery构建的，其目标是提供一种简单易用的方法，使开发者能够快速地为网站添加吸引人的复选框组件。这个插件通过自定义CSS样式和JavaScript事件处理，实现了多种动画效果和交互功能，使得用户在操作复选框时能感受到更佳的交互体验。在使用jQuery-Checkbox之前，你需要确保页面已经引入了jQuery库。之后，你可以通过下载并引用该插件的资源文件——在本例中，文件名为"jquery-checkbox.1.3.0"。这个压缩包可能包含了CSS样式文件、JavaScript源代码文件以及可能的示例文件，它们都是使用该插件所必需的。安装完成后，可以通过以下步骤来初始化jQuery-Checkbox： 1. **选择器选择复选框**：使用jQuery选择器选择你想要改变样式的复选框。例如，如果你所有的复选框都有一个共享的类名`custom-checkbox`，你可以使用`$(".custom-checkbox")`来选取它们。 2. **调用插件方法**：然后，对选取的元素调用`.checkbox()`方法，这会将它们转化为jQuery-Checkbox的效果。代码如下： ```javascript $(".custom-checkbox").checkbox(); ``` 3. **配置选项**：jQuery-Checkbox提供了许多可配置的选项，允许你定制复选框的行为和外观。例如，你可以设置`checkedColor`来改变选中状态时的背景色，或者设置`animationSpeed`来调整动画速度。配置选项如下： ```javascript $(".custom-checkbox").checkbox({ checkedColor: "#FF6347", animationSpeed: 300 }); ``` 4. **事件监听**：插件还支持监听复选框的状态变化，你可以通过`onChecked`和`onUnchecked`事件来执行相应的回调函数。例如： ```javascript $(".custom-checkbox").checkbox({ onChecked: function() { console.log("复选框已被选中"); }, onUnchecked: function() { console.log("复选框已被取消选中"); } }); ``` 5. **兼容性**：jQuery-Checkbox通常对主流浏览器有良好的支持，包括Chrome、Firefox、Safari、Edge和Internet Explorer。但请注意，不同的浏览器可能会有不同的渲染效果，因此在实际应用中，进行跨浏览器测试是必要的。 "绚丽的复选框 jQuery-Checkbox"提供了一种高效且美观的方式来增强网页的复选框功能。通过利用jQuery的便利性和插件的自定义能力，开发者可以轻松创建出与网站整体风格相协调的交互元素，提高用户对网站的满意度。在实际项目中，结合HTML、CSS和JavaScript的综合运用，你可以创造出更多个性化的复选框效果，丰富用户界面的视觉体验。

资源推荐

资源详情

资源评论

收起资源包目录

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

<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

评论收藏

内容反馈