LazyForm jQuery plugin 定制您的CheckBox Radio和Select_jquery

在下面浏览器下测试通过：Firefox, IE7, IE8, Google浏览器。 (IE6还是算了吧），其它浏览器还没试过。
目前刚添加了4个皮肤，添加新皮肤非常方便，您可以参考已添加的皮肤图片和css代码，相信您会很快搞定。

效果截图：
一、在没有使用LazyForm的情况下，在XP下运行截图如下

二、使用LazyForm(皮肤Blue)效果如下

三、使用LazyForm(皮肤Black)效果如下

四、皮肤Default

五、皮肤Gray

demo.html代码如下：

复制代码 代码如下:

<头>
>



>
<样式类型=“text/css”>
正文
{
字体：12px Simsun、Arial、Helvetica、sans-serif；
行高：20px；
}


<脚本类型=“text/javascript”>
$(function() {
$('#form1').submit(function() {
var Skin = $('#ddlSkin option:selected').val();
$('#lazyFormSkin').attr('href', 'css/' 皮肤 '/lazyform.css');
skin = '皮肤： ' 皮肤;

var 性别 = '性别： '
$('input[name=gender]:checked').val();
var sex2 = 'Gender2:'
$('input[name=gender2]:checked').val; ();

var 爱好 = '爱好：'
($('#cbxBaskball').is(':checked') ? $('#cbxBaskball').val() ' ' : '')
($('#cbxFootball').is(':checked') ? $('#cbxFootball').val() ' ' : '')
($('#cbxSwimming') ).is(':checked') ? $('#cbxSwimming').val() ' ' : '');
var hobby2 = "Hobby2:"
($('#cbxBaskball2'). is(':checked') ? $('#cbxBaskball2').val() ' ' : '')
($('#cbxFootball2').is(':checked') ? $('#cbxFootball2 ').val() ' ' : '')
($('#cbxSwimming2').is(':checked') ? $('#cbxSwimming2').val() ' ' : '');

var Country = '国家：' $('#ddlCountry option:selected').text();
var Country2 = 'Country2:' $('#ddlCountry2 option:selected').text ();

$('#result').html(皮肤 '
' 性别 '
' 性别2 '
'
爱好 '< br //>' 爱好2 '
' 国家 '
'

返回 false；
});
}）；



<身体>

<标签=“皮肤”>皮肤：

<选项值=“蓝色”>蓝色
黑色选项>
默认选项>
灰色选项>

性别：标签>

>
/>
男


>

女

<标签=“性别”>性别2：

男2


女2

爱好：标签>

>
<输入类型=“checkbox”id=“cbxBaskball”值=“Baskball”checked=“checked”/>
篮球


>
<输入类型=“checkbox”id=“cbxFootball”值=“Football”checked=“checked”/>
足球


;

游泳

<标签=“爱好”>爱好2：
<输入类型=“checkbox”id=“cbxBaskball12”值=“Baskball2”checked=“checked”/>/>
Baskball12


Football2a


游泳2

国家/地区：标签>

>

中国;
美国选项>
加拿大选项>
<选项值=“荷兰”>荷兰

<标签=“国家”>国家2：
<选择 id="ddlCountry2" style="width: 350px;">
China2;
United States2;
<选项值=“加拿大2”>加拿大2
<选项值=“Holland2”>Holland2

<输入类型=“提交”值=“提交”/>

从代码中你就可以看到，LazyForm没有动你的Html和Css风格的辫汗毛。
使选择变长，设置个长度就可以了。
把LazyForm.js去掉，就是你的原样。没有任何改动。

LazyForm源码：

复制代码代码如下：

(函数($) {
/* --------------------------------- ---------------------------------------
LazyForm 1.0
版权所有（c ) 2009, 陈张鹏, 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悬停 = false;

var $span = $( '')
.attr({
'id': id,
'class': className
})
.bind('mouseover mouseout', function () {
悬停 = !hover;
$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')
$selectItemText.text(this.text);

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

$selectItem.removeClass();文本($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);



代码资源下载