jquery를 기반으로 아름다운 CheckBox 확장(직접 작성)_jquery

기본 HTML 확인란 컨트롤 스타일은 정의가 매우 제한되어 있으며 대부분의 사용자의 미학을 충족시킬 수 없다는 것은 누구나 알고 있습니다. 오늘은 제가 얼마 전에 작성한 CheckBox 컨트롤을 여러분과 공유하고 싶습니다. 마음에 드는 친구들이 사용해도 좋습니다. 좋은 제안이 있으면 메시지를 남겨주세요. 더 이상 고민하지 않고 요점을 살펴보겠습니다.

HTML 부분의 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< ;b class="combox">

Css 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

.combox{float:left;Background:url(/img/Icon_BG.png);}
.combox{너비:16px;높이:16px; 배경 위치:-21px -40px;cursor:pointer;font-size: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(' selected') > -1) {
obj.removeClass('checked')
_this.click_cancel()
} else {
obj.addClass('checked'); >_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/ /객체 클릭 이벤트
_obj.unbind ('click').click(function () { click_fun($(this)); })
}
//클릭 콜백 이벤트
this. click_callback = function () { }
//선택 이벤트 취소
this.click_cancel = function () { }
}


다음과 같이 호출합니다.

코드 복사 코드는 다음과 같습니다. var checkbox = new CheckBox()

checkbox .obj = $('.content ul li .combox');

//클릭 콜백 이벤트는 기본적으로 해당 작업 이벤트가 없으므로 할당할 필요가 없습니다.
checkbox.click_callback = function () { fun_setPay() }
//선택 이벤트 취소
checkbox.click_cancel = function () { fun_setPay() }
checkbox.init ()


사용된 사진:

표시 사진 예: