LazyForm jQuery plugin 定制您的CheckBox Radio和Select


Posted in Javascript onOctober 24, 2009

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

效果截图:
一、在没有使用LazyForm的情况下,在XP下运行截图如下
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
二、使用LazyForm(皮肤Blue)效果如下
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
三、使用LazyForm(皮肤Black)效果如下
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
四、皮肤Default
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
五、皮肤Gray
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
demo.html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>demo-lazyform</title> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/lazyform.js"></script> 
<link type="text/css" rel="stylesheet" href="css/blue/lazyform.css" id="lazyFormSkin" /> 
<style type="text/css"> 
body 
{ 
font: 12px Simsun, Arial, Helvetica, sans-serif; 
line-height: 20px; 
} 
</style> <script type="text/javascript"> 
$(function() { 
$('#form1').submit(function() { 
var skin = $('#ddlSkin option:selected').val(); 
$('#lazyFormSkin').attr('href', 'css/' + skin + '/lazyform.css'); 
skin = 'Skin: ' + skin; 
var gender = 'Gender: ' + 
$('input[name=gender]:checked').val(); 
var gender2 = 'Gender2: ' + 
$('input[name=gender2]:checked').val(); 
var hobby = 'Hobby: ' + 
($('#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 = 'Country: ' + $('#ddlCountry option:selected').text(); 
var country2 = 'Country2: ' + $('#ddlCountry2 option:selected').text(); 
$('#result').html(skin + '<br />' + gender + '<br />' + gender2 + '<br />' + 
hobby + '<br />' + hobby2 + '<br />' + country + '<br />' + country2); 
return false; 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" method="post" action="javascript:alert('success!');"> 
<p> 
<label for="Skin">Skin:</label> 
<select id="ddlSkin"> 
<option value="Blue">Blue</option> 
<option value="Black">Black</option> 
<option value="Default">Default</option> 
<option value="Gray" >Gray</option> 
</select> 
</p> 
<p> 
<label for="Gender">Gender:</label> 
<br /> 
<input type="radio" id="rdoMale" name="gender" value="Male" checked="checked" /> 
Male 
<br /> 
<input type="radio" id="rdoFemale" name="gender" value="Female" /> 
Female 
</p> 
<p> 
<label for="Gender">Gender2:</label> 
<input type="radio" id="rdoMale2" name="gender2" value="Male2" /> 
Male2 
<input type="radio" id="rdoFemale2" name="gender2" value="Female2" checked="checked" /> 
Female2 
</p> 

<p> 
<label for="Hobby">Hobby:</label> 
<br /> 
<input type="checkbox" id="cbxBaskball" value="Baskball" checked="checked" /> 
Baskball 
<br /> 
<input type="checkbox" id="cbxFootball" value="Football" checked="checked" /> 
Football 
<br /> 
<input type="checkbox" id="cbxSwimming" value="Swimming" /> 
Swimming 
</p> 
<p> 
<label for="Hobby">Hobby2:</label> 
<input type="checkbox" id="cbxBaskball12" value="Baskball2" checked="checked" /> 
Baskball12 
<input type="checkbox" id="cbxFootball2" value="Football2" /> 
Football2a 
<input type="checkbox" id="cbxSwimming2" value="Swimming2" checked="checked" /> 
Swimming2 
</p> 
<p> 
<label for="Country">Country:</label> 
<br /> 
<select id="ddlCountry"> 
<option value="China" selected="selected">China</option> 
<option value="United States" >United States</option> 
<option value="Canada" >Canada</option> 
<option value="Holland">Holland</option> 
</select> 
</p> 
<p> 
<label for="Country">Country2:</label> 
<select id="ddlCountry2" style="width: 350px;"> 
<option value="China2">China2</option> 
<option value="United States2" selected="selected">United States2</option> 
<option value="Canada2" >Canada2</option> 
<option value="Holland2">Holland2</option> 
</select> 
</p> 
<p> 
<input type="submit" value="submit" /> 
</p> 
<p id="result"></p> 
</form> 
</body> 
</html>

从代码你就可以看到,LazyForm没有动您的Html和Css样式一根汗毛。
想让Select变长,设置个长度就可以了。
把LazyForm.js去掉,就是您的原样。没有任何改变。

LazyForm源码:

(function($) { 
/* ------------------------------------------------------------------------ 
LazyForm 1.0 
Copyright (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'); 
_selects.each($.lazyform._initSelect); 
$(document).click(function() { 
$('div.select div.open').removeClass().next('ul').hide(); 
}); 
}, 
_initInput: function() { 
var $self = $(this); 
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 = $('<span />') 
.attr({ 
'id': id, 
'class': className 
}) 
.bind('mouseover mouseout', function() { 
hover = !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 = $('<div />').attr('id', 'select-' + self.id).width(selectWidth).addClass('select'); 
var $selectItem = $('<div />').append('<span />'); 
var $selectItemText = $selectItem.children('span'); 
var $selectUl = $('<ul />').width(selectUlWidth).hide(); 
var $selectLi = null; 
var $hoverLi = null; 
$self.children().each(function() { 
var $tempLi = $('<li />').append(this.text); 
if(this.selected) { 
$tempLi.addClass('hover'); 
$selectItemText.text(this.text); 
$selectLi = $tempLi; 
$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 = $tempLi; 
} 
}); 
$selectItem.removeClass(); 
$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 = $selectLi; 
} 
$selectUl.show(); 
} else { 
$selectUl.hide(); 
} 
e.stopPropagation(); 
}); 
$select.append($selectItem); 
$select.append($selectUl); 
$self.hide().before($select); 
} 
}); 
$(document).ready(function() { 
$.lazyform.init(); 
}); 
})(jQuery);

代码打包下载
Javascript 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
javascript自定义的addClass()方法
May 28 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
简单的网页广告特效实例
Aug 19 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 #Javascript
js文件中调用js的实现方法小结
Oct 23 #Javascript
struts2 jquery 打造无限层次的树
Oct 23 #Javascript
jquery 插件开发方法小结
Oct 23 #Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 #Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 #Javascript
JavaScript 常用函数库详解
Oct 21 #Javascript
You might like
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
几个高效,简洁的字符处理函数
2007/04/12 Javascript
js CSS操作方法集合
2008/10/31 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python中防止sql注入的方法详解
2017/02/25 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
利用nohup来开启python文件的方法
2019/01/14 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
机关会计岗位职责
2014/04/08 职场文书
初中教师业务学习材料
2014/05/12 职场文书
关键在于落实心得体会
2014/09/03 职场文书
债务授权委托书范本
2014/10/17 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书