html制作复选框,使用Jquery+CSS创建漂亮的复选框

在这个简短的教程中，我们将创建一个简单的jQuery插件更换默认浏览器复选框，创建出一个漂亮的复选框。

HTML

Better Check Boxes with jQuery and CSS | Tutorialzine Demo

• Display effects:

• Enable location tracking:

• Include me in search results:

• Email notifications:

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;

}

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 = $('',{

className: 'tzCheckBox '+(this.checked?'checked':''),

html:''+labels[this.checked?0:1]+

''

});

// 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);

相关链接