DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> LazyForm jQuery plugin 定制您的CheckBox Radio和Select
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
編輯：JQuery特效代碼     

打包下載

在下面浏覽器下測試通過：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() + ' ' : '');
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);

JQuery特效代碼
jquery中show()、hide()和toggle()用法實例教程
本文實例講述了jquery中show()、hide()和toggle()用法。分享給大家供大家參考。
調用HttpHanlder的幾種返回方式小結
1：如果只需要返回字符串形式的 例如內容、JSON字符串數組等context.Response.Wr
jquery表單驗證插件（jquery.validate.js）的3種使用方式
jquery  驗證非常簡單，下面總結常用的三種方式：第一種方式：也是比較標准的方式：首先

相關文章

jQuery基礎知識JQuery入門技巧JQuery特效代碼JQuery常見問題
小編推薦
jquery 倒計時效果實現秒殺思路 jquery將一個表單序列化為一個對象的方法 jQuery 處理網頁內容的實現代碼 jquery tab標簽頁的制作 SinaEditor使用方法詳解 jquery幻燈片插件bxslider樣式改進實例教程 ajax頁面無刷新 IE下遭遇Ajax緩存導致數據不更新的問題 jqGrid隨窗口大小變化自適應大小的示例代碼 jquery 彈出層注冊頁面等(asp.net後台) jquery基礎教程之數組使用詳解
熱門推薦
jQuery 3.0 中的Data作用說明 Jquery獲取元素的父容器對象示例代碼 jquery列表拖動排列(由項目提取相當好用) 加載jQuery後$沖突的解決辦法 jquery實現簡單的拖拽效果實例兼容所有主流浏覽器(優化篇) jquery刪除指定的html標簽並保留標簽內文本內容的方法 jquery下拉層登錄框 $.getJSON在IE下失效的原因分析及解決方法 jQuery拖動div、移動div、彈出層實現原理及示例
大家都在看
js生成的驗證碼的實現與技術分析 javascript基於prototype實現類似OOP繼承的方法 博客從wp換成typecho ^_^ jquery 輸入框數字限制插件 簡介JavaScript中用於處理正切的Math.tan()方法 IE8與IE7具體功能中InPrivate模式下的安全性測試 js實現按一下刪除鍵刪除整個單詞附demo 用DHTML來模擬實現下拉菜單
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved