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 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
写入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
ucenter通信原理分析
2015/01/09 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python datetime包函数简单介绍
2019/08/28 Python
django API 中接口的互相调用实例
2020/04/01 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
甜点店创业计划书
2014/01/27 职场文书
促销活动总结
2014/04/28 职场文书
退货证明模板
2015/06/23 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
技术转让协议书
2016/03/19 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
mysql sock文件存储了什么信息
2022/07/15 MySQL