返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

LazyForm jQuery plugin 定制您的CheckBox Radio和Select

2020-05-24 21:23:02易采站长站整理

在下面浏览器下测试通过：Firefox, IE7, IE8, Google浏览器。 (IE6还是算了吧），其它浏览器还没试过。
目前刚添加了4个皮肤，添加新皮肤非常方便，您可以参考已添加的皮肤图片和css代码，相信您会很快搞定。
效果截图：
一、在没有使用LazyForm的情况下，在XP下运行截图如下

二、使用LazyForm(皮肤Blue)效果如下

三、使用LazyForm(皮肤Black)效果如下

四、皮肤Default

五、皮肤Gray

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() + ‘ ‘ : ”);

相关文章 大家在看