基于jquery擴(kuò)展漂亮的CheckBox(自己編寫)
更新時(shí)間:2013年11月19日 15:51:25 作者:
默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限,下面就與大家分享下自己編寫的CheckBox控件。喜歡的朋友可以拿去使用
大家都知道默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限,無(wú)法滿足大多用戶的美觀度。今天跟大家一起分享前一段時(shí)間自己編寫的CheckBox控件。喜歡的朋友可以拿去使用,有什么好的建議希望你給我留言。廢話不多說(shuō),切入正題。
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、自定復(fù)選框類
//復(fù)選框
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("控件屬性設(shè)置有誤:部分控件并不是復(fù)選框!");
return;
}
//對(duì)象單擊事件
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();
}
}
//設(shè)置有文字復(fù)選框
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//對(duì)象點(diǎn)擊事件
_obj.unbind('click').click(function () { click_fun($(this)); });
}
//點(diǎn)擊回調(diào)事件
this.click_callback = function () { }
//取消選擇事件
this.click_cancel = function () { }
}
2、調(diào)用如下:
var checkbox = new CheckBox();
checkbox.obj = $('.content ul li .combox');
//點(diǎn)擊回調(diào)事件 根據(jù)自己的需求去調(diào)整,默認(rèn)沒(méi)有相應(yīng)操作事件,可以不用賦值
checkbox.click_callback = function () { fun_setPay(); }
//取消選擇事件
checkbox.click_cancel = function () { fun_setPay(); }
checkbox.init();
使用的圖片:
示例展示圖:
Html部分代碼如下:
復(fù)制代碼 代碼如下:
<b class="combox"></b>
Css部分代碼如下:
復(fù)制代碼 代碼如下:
.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、自定復(fù)選框類
復(fù)制代碼 代碼如下:
//復(fù)選框
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("控件屬性設(shè)置有誤:部分控件并不是復(fù)選框!");
return;
}
//對(duì)象單擊事件
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();
}
}
//設(shè)置有文字復(fù)選框
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//對(duì)象點(diǎn)擊事件
_obj.unbind('click').click(function () { click_fun($(this)); });
}
//點(diǎn)擊回調(diào)事件
this.click_callback = function () { }
//取消選擇事件
this.click_cancel = function () { }
}
2、調(diào)用如下:
復(fù)制代碼 代碼如下:
var checkbox = new CheckBox();
checkbox.obj = $('.content ul li .combox');
//點(diǎn)擊回調(diào)事件 根據(jù)自己的需求去調(diào)整,默認(rèn)沒(méi)有相應(yīng)操作事件,可以不用賦值
checkbox.click_callback = function () { fun_setPay(); }
//取消選擇事件
checkbox.click_cancel = function () { fun_setPay(); }
checkbox.init();
使用的圖片:

示例展示圖:

相關(guān)文章
jquery選擇checked在ie8普通模式下的問(wèn)題
這篇文章主要介紹了jquery選擇checked在ie8普通模式下的問(wèn)題,需要的朋友可以參考下2014-02-02jquery.blockUI.js上傳滾動(dòng)等待效果實(shí)現(xiàn)思路及代碼
上傳滾動(dòng)等待效果想必大家在很多場(chǎng)合都有見(jiàn)過(guò)吧,本文將介紹jquery.blockUI.js實(shí)現(xiàn)上傳滾動(dòng)等待效果,感興趣的你可不要錯(cuò)過(guò)了哈,希望可以幫助到你2013-03-03jquery表單驗(yàn)證插件formValidator使用方法
這篇文章主要為大家詳細(xì)介紹了Jquery表單驗(yàn)證插件formValidator的相關(guān)使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04如何解決jQuery EasyUI 已打開Tab重新加載問(wèn)題
最近在項(xiàng)目中遇到這樣的需求,要求實(shí)現(xiàn)點(diǎn)擊左側(cè)已經(jīng)打開的tab可以刷新重新加載datagrid。下面給大家分享實(shí)現(xiàn)代碼,一起看看吧2016-12-12jQuery數(shù)組處理代碼詳解(含實(shí)例演示)
jQuery數(shù)組處理代碼詳解,需要的朋友可以參考下2012-02-02jquery動(dòng)態(tài)分頁(yè)效果堪比時(shí)光網(wǎng)
剛剛弄好了一個(gè)jquery動(dòng)態(tài)分頁(yè)效果,拿出來(lái)與大家分享,效果與時(shí)光網(wǎng)的差不多2014-09-09