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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 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调用shell的方法
2014/11/05 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
用Python写的图片蜘蛛人代码
2012/08/27 Python
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
iPython pylab模式启动方式
2020/04/24 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
初中思想品德教学反思
2016/02/24 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL