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

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

WBOY

リリース： 2016-05-16 17:14:13

オリジナル

1055 人が閲覧しました

デフォルトの 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 (); 

使用画像: 

表示例: