欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jquery擴展漂亮的CheckBox(自己編寫)

 更新時間:2013年11月19日 15:51:25   作者:  
默認的html復選框控件樣式可定義相當有限,下面就與大家分享下自己編寫的CheckBox控件。喜歡的朋友可以拿去使用
大家都知道默認的html復選框控件樣式可定義相當有限,無法滿足大多用戶的美觀度。今天跟大家一起分享前一段時間自己編寫的CheckBox控件。喜歡的朋友可以拿去使用,有什么好的建議希望你給我留言。廢話不多說,切入正題。

Html部分代碼如下:
復制代碼 代碼如下:

<b class="combox"></b>

Css部分代碼如下:
復制代碼 代碼如下:

.combox{float:left;background:url(/img/Icon_BG.png);}
.combox{width:16px;height:16px;background-position:-21px -40px;cursor:pointer;font-size:9px;}
.combox.checked{background-position:-37px -40px;}

Js部分代碼如下:

1、自定復選框類
復制代碼 代碼如下:

//復選框
var CheckBox = function () {
this.obj;
var _this = this, _obj;
//初始化
this.init = function () {
_obj = _this.obj;
var tem = _obj.length > 1 ? _obj.eq(0) : _obj;
if (tem.length == 1 && tem.attr('class').indexOf('combox') == -1) {
showMessage("控件屬性設置有誤:部分控件并不是復選框!");
return;
}
//對象單擊事件
var click_fun = function (obj) {
if (obj.attr('class').indexOf('checked') > -1) {
obj.removeClass('checked');
_this.click_cancel();
} else {
obj.addClass('checked');
_this.click_callback();
}
}

//設置有文字復選框
if (_obj.attr('_txt') != undefined) {
_obj.each(function (i) {
var cb = _obj.eq(i);
cb.wrapAll('<font class="cb_txt"></font>');
//文本單擊事件
cb.parent().append(cb.attr('_txt')).click(function () { click_fun(cb); });
});
} else//對象點擊事件
_obj.unbind('click').click(function () { click_fun($(this)); });
}
//點擊回調事件
this.click_callback = function () { }
//取消選擇事件
this.click_cancel = function () { }
}

2、調用如下:
復制代碼 代碼如下:

var checkbox = new CheckBox();
checkbox.obj = $('.content ul li .combox');
//點擊回調事件 根據(jù)自己的需求去調整,默認沒有相應操作事件,可以不用賦值
checkbox.click_callback = function () { fun_setPay(); }
//取消選擇事件
checkbox.click_cancel = function () { fun_setPay(); }
checkbox.init();

使用的圖片:
 
示例展示圖:

相關文章

最新評論