LazyForm jQuery 플러그인 CheckBox Radio 및 Select_jquery 사용자 정의-JS 튜토리얼-php.cn

Firefox, IE7, IE8, Google Chrome 브라우저에서 테스트 및 통과되었습니다. (IE6에서는 잊어버리세요.) 아직 다른 브라우저에서는 시도해보지 않았습니다.
현재 4개의 스킨이 추가되었습니다. 추가된 스킨 사진과 CSS 코드를 참고하시면 금방 완료되실 거라 믿습니다.

효과 스크린샷:
1. LazyForm을 사용하지 않고 XP에서 실행한 스크린샷은 다음과 같습니다
LazyForm jQuery 플러그인 CheckBox Radio 및 Select_jquery 사용자 정의

2. LazyForm(skin Blue)을 사용한 효과는 다음과 같습니다.
LazyForm jQuery 플러그인 CheckBox Radio 및 Select_jquery 사용자 정의

3. LazyForm(스킨 블랙) 사용 효과는 다음과 같습니다
LazyForm jQuery 플러그인 CheckBox Radio 및 Select_jquery 사용자 정의

4. 스킨 기본값

demo.html 코드는 다음과 같습니다.

(함수($) {
/* --------------------------------- -------------
LazyForm 1.0
저작권 (c ) 2009, ZhangPeng Chen, peng1988@gmail.com
-------------------------------------- ------------------------------------- */
$.lazyform = $.lazyform | | {};
$.extend($.lazyform, {
_inputs: null,
_selects: null,

init: function() {
_inputs = $(' input[type=checkbox], input[type=radio]');
_inputs.each($.lazyform._initInput)

_selects = $('select'); 각각($.lazyform._initSelect)

$(document).click(function() {
$('div.select div.open').removeClass().next('ul' ).hide();
});
},

_initInput: function() {
var $self = $(this); 🎜>var radio = $self.is(':radio');

var id = radio ? (self.type '-' self.name '-' self.id) : (self.type ' -' self.id);
var className = self.type (self.checked ? '-checked' : '')
var hover = false

var $span = $( '')
.attr({
'id': id,
'class': className
})
.bind('mouseover mouseout', function () {
hover = !hover;
$span.attr('class', self.type (self.checked ? '-checked' : '') (hover ? '-hover' : ''));
})
.bind('클릭', function() {
if(radio) {
$('input[name=' self.name ']').each(function( ) {
$('#' self.type '-' self.name '-' this.id).attr('class', self.type)
})
}

self.click();
$span.attr('class', self.type (self.checked ? '-checked' : ''))
});

$self.addClass('hidden').before($span);
},

_$openSelect: null,
_initSelect: function() {
var $self = $(this);
var self = this;

var selectWidth = $self.width();
var selectUlWidth = $self.width() - 2;

var $select = $('

').attr('id', 'select-' self.id).width(selectWidth).addClass('select');
var $selectItem = $('

').append('');
var $selectItemText = $selectItem.children('span');
var $selectUl = $('

').append(this.text);
if( this.selected) {
$tempLi.addClass('hover');
$selectItemText.text(this.text)

$selectLi =
$hoverLi; tempLi;
}
$selectUl.append($tempLi);

$tempLi
.bind('mouseover', function() {
$hoverLi.removeClass();
$tempLi.addClass('hover');
$hoverLi = $tempLi;
})
.bind('click', function() {
$self.children() .each(function() {
if($hoverLi && this.text == $hoverLi.text()) {
$tempLi.addClass('hover');
this.selected = true;

$selectLi = $tempLi;
$hoverLi;
}
})

$selectItemText. text($selectLi.text());
$selectUl.hide()
});

$selectItem.click(function(e) {
if($.lazyform._$openSelect && $.lazyform._$openSelect != $select) {
$('#' $.lazyform._$openSelect.attr('id') ' > div.open').removeClass().next('ul').hide()
}
$.lazyform._ $openSelect = $select;

$selectItem.toggleClass('open')
if($selectItem.attr('class') == 'open') {
if($hoverLi != $selectLi) {
$hoverLi.removeClass();
$selectLi.attr('class', 'hover')
$hoverLi =
}
$ selectUl.show();
} else {
$selectUl.hide();
}

e.stopPropagation()
});

$select.append($selectItem);
$select.append($selectUl);

$self.hide().before($select);
}
});

$(document).ready(function() {
$.lazyform.init();
});
})(jQuery);

代码打包下载

성명：

LazyForm jQuery 플러그인 CheckBox Radio 및 Select_jquery 사용자 정의

관련 기사