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 相关文章推荐
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
YII框架http缓存操作示例
2019/04/29 PHP
IE 当eval遇上function的处理
2011/08/09 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jQuery功能函数详解
2015/02/01 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
微信小程序云开发之使用云存储
2019/05/17 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python中使用mysql数据库详细介绍
2015/03/27 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
python-str,list,set间的转换实例
2018/06/27 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
django model object序列化实例
2020/03/13 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
大一自我鉴定范文
2013/10/04 职场文书
公证书样本
2014/04/10 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle