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 (スキンブルー) を使用した場合の効果は次のとおりです。
LazyForm jQuery プラグイン CheckBox Radio と Select_jquery をカスタマイズする

3. LazyForm (スキンブラック) を使用した場合の効果は次のとおりです。
LazyForm jQuery プラグイン CheckBox Radio と Select_jquery をカスタマイズする

4. スキンデフォルト
LazyForm jQuery プラグイン CheckBox Radio と Select_jquery をカスタマイズする

demo.html コードは次のとおりです:

代案代案以下のように:

(function($) { 
/* --------------------------------- --------------------------------------- 
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'); each($.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; '') 
.attr({ 
'id': id, 
'class': className 
}) 
.bind('mouseover Mouseout', function () {
ホバー = !ホバー; 
$span.attr('class', self.type (self.checked ? '-checked' : '') (hover ? '-hover' : '')); 
}) 
.bind('click', 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 = $('').width(selectUlWidth).hide(); 
var $selectLi = null; 
var $hoverLi = null; 

$self.children().each(function() { 
var $tempLi = $('').append(this.text); 
if( this.selected) { 
$tempLi.addClass('hover'); 

$selectLi = $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; 

$selectItem.removeClass();テキスト($selectLi.text()); 

$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 = $selectLi; selectUl.show(); 
} else { 
$selectUl.hide(); 
} 

e.stopPropagation(); 

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

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

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



代打打包下ダウンロード

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

LazyForm jQuery プラグイン CheckBox Radio と Select_jquery をカスタマイズする

関連記事