下一个代码在 Jquery 1.5.1 中工作,但在 Jquery 1.8.0 中这个代码不起作用,为什么?css的问题添加跨度后。如何解决这个滞后?
如果包含在 index.html jquery.1.5.1 代码中有效,但如果包含 jquery 1.8.1,则代码并非全部有效...
CSS:
#checkbox .CheckBox{
background:url('checkbox_33.png') no-repeat right bottom;
display:inline-block;
min-width:110px;
/* height:33px; */
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}
jQuery代码
(function($){
$.fn.Checkbox = 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 : 'CheckBox '+(this.checked?'checked':''),
html: '<span class="CBContent">'+labels[this.checked?0:1]+
'</span><span class="CBPart"></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('.CBContent').html(labels[isChecked?0:1]);
});
// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);