jqueryをベースにした美しいCheckBoxの拡張(自作)_jquery

デフォルトの HTML チェック ボックス コントロール スタイルは定義が非常に限られており、ほとんどのユーザーの美観を満たすことができないことは誰もが知っています。今日は、少し前に書いた CheckBox コントロールを共有したいと思います。気に入った友人はそれを使用できます。何か良い提案があれば、メッセージを残していただければ幸いです。早速、本題に入りましょう。

コードの HTML 部分は次のとおりです:

コードをコピー コードは次のとおりです:

< ;b class="combox">

コードの CSS 部分は次のとおりです:

コードをコピー コードは次のとおりです:

.combox{float:left;background:url(/img/Icon_BG.png);}
.combox{幅:16px;高さ:16px;背景の位置:-21px -40px;カーソル:ポインター;フォントサイズ:9px;}
.combox.checked{背景の位置:-37px -40px ;}

コードの JS 部分 次のように:

1. カスタム チェックボックス クラス

コードをコピーします。 コードは次のとおりです。

//Checkbox
var CheckBox = function () {
this.obj
var _this = this, _obj; ;
//初期化
this.init = function () {
_obj = _this.obj;
var tem = _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('チェック済み') > -1) {
obj.removeClass('チェック済み');
} else {
obj.addClass('チェック済み'); >_this.click_callback();
}
}

//テキストチェックボックスを設定します
if (_obj.attr('_txt') != 未定義) {
_obj.each (関数 (i) {
var cb = _obj.eq(i);
cb.wrapAll('');
//テキストクリックイベント
cb.parent( ).append(cb.attr('_txt')).click(function () { click_fun(cb); })
} else/ /Object クリック イベント
_obj.unbind ('click').click(function () { click_fun($(this)); });
}
//コールバック イベント
this をクリックします。 click_callback = function () { }
//選択イベントをキャンセルします
this.click_cancel = function () { }
}


2. 次のように呼び出します:

コードをコピーします

コードは次のとおりです。 var checkbox = new CheckBox(); .obj = $('.content ul li .combox'); //クリック コールバック イベントは必要に応じて調整できます。デフォルトでは対応する操作イベントがないため、割り当てる必要はありません。 checkbox.click_callback = function () { fun_setPay(); } //選択イベントをキャンセルします

checkbox.click_cancel = function () { fun_setPay() }

checkbox.init ();


使用画像:


表示例: