一个很巧妙的复选框控
In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.
在这个简短的教程中，我们利用一个简单的jQuery插件替换默认浏览器中的复选框(checkbox)。这个有助于增加你的窗体样式，同时如果javascript不会用的话，也不用求助于默认窗体控制。
HTML（超文本标记语言Hypertext Markup Language）
The first step is to lay down the structure of the underlying HTML document. We will need a form with checkboxes which we will later be replacing with their enhanced jQuery versions.
第一步构建基本的HTML文档框架。我们需要一个复选框样式，以后会用增强版的jQuery插件来替换它。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Better Check Boxes with jQuery and CSS | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />
</head>
<body>
<div id="page">
<form method="get" action="./">
<ul>
<li>
<label for="ch_effects">Display effects: </label>
<input type="checkbox" id="ch_effects" name="ch_effects" data-on="Show effects" data-off="Hide effects" />
</li>
<li>
<label for="ch_location">Enable location tracking: </label>
<input type="checkbox" id="ch_location" name="ch_location" checked />
</li>
<li>
<label for="ch_showsearch">Include me in search results: </label>
<input type="checkbox" id="ch_showsearch" name="ch_showsearch" />
</li>
<li>
<label for="ch_emails">Email notifications: </label>
<input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON" data-off="OFF" />
</li>
</ul>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script>
<script src="js/script.js"></script>
</body>
</html>
The main container element – the #page div, holds our form. Inside it is an unordered list with a number of label elements which describe the checkboxes. Something that is good from a usability standpoint, is that clicking a label will check/uncheck the corresponding checkbox (specified by the for attribute).
主(container/容器)内容元素 - #page div(隔间/排版)，里面有样式。还有带有用来描述一组复选框的lable(标签)要素的无序列表。点击一个标签将选定/取消选定相应的复选框（使用for属性来实现这一操作），这个方法从可用性的角度来讲是很不错的。
Notice the HTML5 data attributes, specified on some of the labels. We are using these to attach custom data to every tag in an HTML5 document. In our case the attributes will determine the text labels of the on / off states of the checkbox replacements.
注意HTML5的data(数据)属性，在一些lables（标记）中的被指定。我们利用这些来链接自定义的数据到HTML5文档中的每一个tag(标签)。这个例子中，属性值决定checkbox替代物中text标记的On/Off状态。
And here is the markup of our replacement checkboxes:
这里是替代checkbox的标记
<span class="tzCheckBox checked"> <span class="tzCBContent">ON</span> <span class="tzCBPart"></span> </span>
When our plugin is called, it will loop through the checkboxes, and insert the HTML code you can see above after each one, while at the same time hiding the original. Thechecked class determines the styling of the checkbox replacement (on or off state).
当jQuery插件被调用，它将在这些checkbox选框中循环。在每个显示复选框的地方插入以上你看到的HTML代码，同时隐藏原来的代码。Thechecked 类决定复选框替代品的样式（on/off状态）。
Checkbox Replacements Explained（复选框替代品释义）
Now lets move on to the styling.
现在继续设计样式
CSS（层叠样式表单(Cascading Style Sheets)）
We are using a single transparent PNG background image to style the checkbox replacements. The top part of the image is the checked (on) state and the bottom – the off state. The width of the checkbox replacement grows with the text labels.
我们使用单个透明的PNG图片来样式化checkbox替代品。图片最上面的图片用作开启(on)状态而下面的用作关闭(off)状态。checkbox替代品的宽度随文本标记增加。
jquery.tzCheckbox.css
.tzCheckBox{
background:url('background.png') no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}
.tzCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}
.tzCheckBox .tzCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}
.tzCheckBox.checked .tzCBContent{
text-align:left;
padding:0 0 0 38px;
}
.tzCBPart{
background:url('background.png') no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}
.tzCheckBox.checked .tzCBPart{
background-position:top right;
left:auto;
right:-14px;
}
The .tzCheckBox span is positioned as an inline-block, which keeps it on the same line as the surrounding text, while giving us the ability to style its margin and padding properties as a block element. It also has a relative positioning assigned, so we can use the sliding doors technique and show the .tzCBPart span with the remaining part of the background.
Depending on whether we are displaying the on or off state, the .tzCPContent span is either aligned to the left or the right, with the appropriate paddings so that it makes its .tzCheckBox container span grow.
.tzCheckBox 段指定为内联块，用来与周围的文本保持在同一行，同时我们有能力在样式区块改变margin(边缘)和padding(补白区块)。这里还使用一个相对位置，所以我们可以利用滑动通道技术显示.tzCBPart 段中的背景。
根据显示的是on还是off状态，我们可以在.tzCPContent 段中设置滑动对齐到左还是右，设置恰当的补白区块可以使.tzCheckBox 区段增长。
Better Checkboxes - jQuery Plugin
增强版复选框 - jQuery插件
Now it is time to build the actual jQuery plugin.
现在该是设计jQuery的时候了！
jQuery(Javascrīpt框架)
We are going to name our plugin tzCHeckbox. It is going to take a JavaScript object, with a labels property as a parameter. This property is an array specifying the text labels displayed in the on / off state.
首先命名我们的插件tzCHeckbox。利用lables属性作为参数获取javascript对象。这个属性是一个指定显示on/off状态标记文本的数组。
jquery.tzCheckbox.js
(function($){
$.fn.tzCheckbox = function(options){
// Default On / Off labels:
options = $.extend({
labels : ['ON','OFF']
},options);
return this.each(function(){
var originalCheckBox = $(this),
labels = [];
// Checking for the data-on / data-off HTML5 data attributes:
if(originalCheckBox.data('on')){
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// Creating the new checkbox markup:
var checkBox = $('<span>',{
className : 'tzCheckBox '+(this.checked?'checked':''),
html: '<span class="tzCBContent">'+labels[this.checked?0:1]+
'</span><span class="tzCBPart"></span>'
});
// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function(){
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// Synchronizing the original checkbox:
originalCheckBox.attr('checked',isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
});
// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);
All changes to the checkbox replacement are propagated back to the original checkbox (which is hidden, but still on the page). This also works the other way around, as in certain circumstances (when you click on a label element for example) the original checkbox might be changed. This will trigger the change event and update the replacement.
所有对checkbox替代品改变都将传送到原来的checkbox（虽然被背景图隐藏了，但还显示在页面上）。使用相反的使用方法，在某种情况下（当你点击用来举例的标记元素时），原来的checkbox可能改变。这将转换事件状态并且更新这个替代品
Keeping the original checkboxes on the page is important, as this way submitting the form (with or without AJAX) would also send the correct values the user has chosen.
Using the plugin is also pretty straightforward:
保留原来的checkbox在页面上，当用这种方法提交列表时（使用或不用ajax）也将传送用户选择的正确的值。
$('input[type=checkbox]').tzCheckbox({
labels: [ 'Enable', 'Disable' ]
});
This selects all the checkboxes on the page and passes them to tzCheckbox with ‘Enable’ and ‘Disable’ as replacement text.
这个用来选择页面上所有的复选框并传送他们到带有‘Enable’ and ‘Disable’替代物tzCheckbox文本中
With this our checkbox replacement jQuery plugin is complete!
现在这个复选框中的jQuery插件算是完成了！！
Conclusion总结
You can use today’s plugin to enhance the admin or configuration panels of your web apps, or even built better mobile sites with it. If, for some reason, JavaScript has been disabled on the user’s browser, they will still see the default checkboxes as a fallback.
你可以使用今天教的这个插件增强你的应用程序中管理或配置面板，甚至用它来构建更加好的手机网页。如果，由于某种原因，javascript无法再你的浏览器中使用，我们仍将看到默认的复选框checkbox作为后路。
翻译的不好的地方还请原谅，请留言更正，非常感激！！
源地址链接：http://tutorialzine.com/2011/03/better-check-boxes-jquery-css/
里面还有很多的其他优秀的文章！！遇到好的，我还会发文章的！！原文件http://files.cnblogs.com/zuizuihao/jquery.tzCheckbox.zip