jqTransform form表單美化插件使用方法
更新時(shí)間：2012年07月05日 23:15:31 作者：
jQtransForm jQuery表單美化修飾插件，附帶有PHP提交程序，當(dāng)然ASP/ASP/NET/JSP都是同理，這里主要是jQuery美化部分的實(shí)例，美化對(duì)象為文本框、密碼框、文本域、Select下拉框、按鈕等，有了這些示例，美化其它的表單元素應(yīng)該不是大問(wèn)題。
jQtransForm下載地址 http://m.fzitv.net/jiaoben/25166.html
用法
1- 添加腳本包含在標(biāo)題部分的網(wǎng)頁(yè)
//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>
2- 寫你的 form
<form class="jqtransform">
<div class="rowElem">
<label for="name">Name: </label>
<input type="text" name="name" />
</div>
<div class="rowElem">
<input type="submit" value="send" />
<div>
</form>
3- 最后使用插件
After it, select the forms and call the jqTransform plugin. See some examples:
<script type="text/javascript">
$(function() {
//find all form with class jqtransform and apply the plugin
$("form.jqtransform").jqTransform();
});
</script>
兼容性：ie 6+, safari 2+, firefox 2+
附：select如有js聯(lián)動(dòng)效果，則不能美化。需要原有的select，如以下方法：
<script language="javascript">
$(function(){
$('.rowElem').jqTransform({imgPath:'jqtransformplugin/img/'});
});
</script>
<form action="" class="jqtransformdone" method="POST">
<div class="rowElem">
<label>標(biāo)題</label>
<input type="text" name="inputtext"/>
</div>
<div class="NOrowElem">
<label>地區(qū)</label>
<select name="select1">
<option selected="selected" value="0">省</option>
<option value="1523">北京</option>
<option value="1524">陜西省</option>
</select>
<select name="select2" >
<option selected="selected" value="">市</option>
<option value="1525">北京市</option>
<option value="1526">西安市</option>
</select>
</div>
</form>
用法
1- 添加腳本包含在標(biāo)題部分的網(wǎng)頁(yè)
復(fù)制代碼 代碼如下:
//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>
2- 寫你的 form
復(fù)制代碼 代碼如下:
<form class="jqtransform">
<div class="rowElem">
<label for="name">Name: </label>
<input type="text" name="name" />
</div>
<div class="rowElem">
<input type="submit" value="send" />
<div>
</form>
3- 最后使用插件
After it, select the forms and call the jqTransform plugin. See some examples:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
//find all form with class jqtransform and apply the plugin
$("form.jqtransform").jqTransform();
});
</script>
兼容性：ie 6+, safari 2+, firefox 2+
附：select如有js聯(lián)動(dòng)效果，則不能美化。需要原有的select，如以下方法：
復(fù)制代碼 代碼如下:
<script language="javascript">
$(function(){
$('.rowElem').jqTransform({imgPath:'jqtransformplugin/img/'});
});
</script>
復(fù)制代碼 代碼如下:
<form action="" class="jqtransformdone" method="POST">
<div class="rowElem">
<label>標(biāo)題</label>
<input type="text" name="inputtext"/>
</div>
<div class="NOrowElem">
<label>地區(qū)</label>
<select name="select1">
<option selected="selected" value="0">省</option>
<option value="1523">北京</option>
<option value="1524">陜西省</option>
</select>
<select name="select2" >
<option selected="selected" value="">市</option>
<option value="1525">北京市</option>
<option value="1526">西安市</option>
</select>
</div>
</form>
相關(guān)文章
這篇文章主要介紹了jQuery模擬黑客帝國(guó)矩陣效果的方法,實(shí)例分析了jQuery操作頁(yè)面元素實(shí)現(xiàn)動(dòng)畫效果的技巧,需要的朋友可以參考下2015-06-06
本文講解了JQuery切換顯示的效果實(shí)例代碼，需要的朋友可以參考一下2013-02-02
今天發(fā)現(xiàn)HotKeys插件的功能真的很強(qiáng)大,且使用簡(jiǎn)單,以后再也不用考慮鍵值的問(wèn)題了,自己定義每個(gè)鍵的函數(shù)就行了2008-08-08
新聞上下滾動(dòng)jquery 超簡(jiǎn)潔(必看篇)
下面小編就為大家?guī)?lái)一篇新聞上下滾動(dòng)jquery 超簡(jiǎn)潔(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
對(duì)博客系統(tǒng)已經(jīng)做到了博客評(píng)論模塊部分了，對(duì)單篇博文進(jìn)行靜態(tài)化的同時(shí)對(duì)博文的評(píng)論部分采取AJAX的方式去讀取。2009-11-11
讓頁(yè)面上兩個(gè)div中的滾動(dòng)條(滑塊)同步運(yùn)動(dòng)示例
如何想讓頁(yè)面上兩個(gè)div中的滾動(dòng)條(滑塊)同步運(yùn)動(dòng)該怎實(shí)現(xiàn)，具體代碼如下，感興趣的朋友可以參考下2013-08-08
本文給大家匯總介紹了jQuery的幾種判斷元素的方法，包括是否含有某 class、元素是否存在、是否 checked以及元素是否禁用，都是常用的方法，希望大家能夠喜歡2017-02-02
jquery批量設(shè)置屬性readonly和disabled的方法
批量設(shè)置屬性的方法有很多，在本文為大家介紹下使用jquery批量設(shè)置readonly和disabled屬性2014-01-01
JQuery標(biāo)簽頁(yè)效果的兩個(gè)實(shí)例講解（4）
本文跟大家分享了兩個(gè)Jquery標(biāo)簽頁(yè)效果，各有各的特色，希望大家都會(huì)喜歡，并且能夠熟練掌握，感興趣的小伙伴們可以參考一下2015-09-09
JQuery事件中的Event屬性是經(jīng)常性的被忽略的。大多數(shù)時(shí)間你的確不怎么用它，但有些時(shí)候它還是它還是很有作用的。2010-04-04