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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
js仿微博动态栏功能
Feb 22 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
详解Js里的for…in和for…of的用法
Mar 28 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
PHP crc32()函数讲解
2019/02/14 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
小程序实现录音功能
2020/09/22 Javascript
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
Overload和Override的区别
2012/09/02 面试题
自荐信格式范文
2013/10/07 职场文书
大学生年度自我鉴定
2013/10/31 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
迎七一演讲稿
2014/09/12 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python