快捷導(dǎo)航

JavaScript/jQuery 表單美化插件小結(jié)

更新時(shí)間：2012年02月14日 15:26:33 作者：

用過(guò)一些表單美化的工具，覺(jué)得不錯(cuò)，特地分享一下

Niceforms
Niceforms是一款獨(dú)立的表單美化工具，當(dāng)前版本為2.0
官方主頁(yè)：http://www.emblematiq.com/lab/niceforms/
官方演示：http://www.emblematiq.com/lab/niceforms/demo/niceforms.html
GitHub：https://github.com/emblematiq/Niceforms
使用方法，在頁(yè)面頭部引入以下腳本及樣式即可：

復(fù)制代碼代碼如下:

 
<link href="niceforms-v2.0/niceforms-default.css" rel="stylesheet" /> 
<script src="niceforms-v2.0/niceforms.js"></script> 
<!--[if IE]> 
<style>/*此樣式用于radio/checkbox后面的label在ie下可能不正常*/ 
.opt { padding-left: 8px; } 
</style> 
<![endif]--> 
<script> 
imagesPath = "niceforms-v2.0/img/";// niceforms圖片資源的路徑 
</script> 

效果：

Uniform
這是jQuery的表單美化插件
官方網(wǎng)站及在線(xiàn)演示：http://uniformjs.com/
github主頁(yè)：https://github.com/pixelmatrix/uniform
使用方法，在頁(yè)面頭部引入以下腳本及樣式：

復(fù)制代碼代碼如下:

 
<link rel="stylesheet" href="pixelmatrix-uniform/default/css/uniform.default.css" media="screen" /> 
<script src="jquery-1.7.1.min.js"></script> 
<script src="pixelmatrix-uniform/jquery.uniform.min.js" charset="utf-8"></script> 
<script> 
$(function() { 
$("input, textarea, select, button").uniform(); 
}); 
</script> 

Uniform包含3種主題default,Aristo,Agent，使用時(shí)引用相應(yīng)目錄下的css即可。
效果請(qǐng)直接看官方演示

Formly
Formly也是jQuery的一款表單美化插件
官方網(wǎng)站及在線(xiàn)演示：http://thrivingkings.com/formly/
github：https://github.com/ThrivingKings/Formly
使用方法，在頁(yè)面頭部引入以下腳本及樣式即可：

復(fù)制代碼代碼如下:

 
<link href="Formly/formly.css" rel="stylesheet" /> 
<script src="jquery-1.7.1.min.js"></script> 
<script src="Formly/formly.js"></script> 
<script> 
$(function() { 
$("form").formly(); 
}); 
</script> 

效果請(qǐng)直接看官方演示

Ideal Forms
Ideal Forms也是jQuery的一款表單美化插件
官方網(wǎng)站：spacirdesigns.com/jqidealforms
GoogleCode：http://code.google.com/p/idealforms/
使用方法，在頁(yè)面頭部引入以下腳本及樣式即可：

復(fù)制代碼代碼如下:

 
<link href="idealforms1.02/css/normalize.css" rel="stylesheet" /> 
<link href="idealforms1.02/css/idealforms/idealforms.css" rel="stylesheet" /> 
<link href="idealforms1.02/css/master.css" rel="stylesheet" media="screen" /> 
<style> 
ul.idealcheck li, ul.idealradio li { 
display: inline-block; 
} 
li { margin: 0; } 
body { 
width: 700px; 
} 
</style> 
<!--[if lt IE 8]> 
<style>/*在ie8以下版本的瀏覽器可能會(huì)存在問(wèn)題的修復(fù)*/ 
.main-label, ul.idealcheck, ul.idealcheck li, ul.idealradio, ul.idealradio li { float: left; } 
div { clear: both; } 
</style> 
<![endif]--> 
<script src="jquery-1.7.1.min.js"></script> 
<script src="idealforms1.02/js/jquery.idealforms.js"></script> 
<script> 
$(function() { 
$("#fancyform").idealforms(); 
}); 
</script> 

效果：

jqTransform
jqTransform也是jQuery的一款表單美化插件
官方網(wǎng)站及在線(xiàn)演示：http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
使用方法，在頁(yè)面頭部引入以下腳本及樣式即可：

復(fù)制代碼代碼如下:

 
<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" media="all" /> 
<script src="jquery-1.7.1.min.js"></script> 
<script src="jqtransformplugin/jquery.jqtransform.js"></script> 
<style>/*表單元素不對(duì)齊的修復(fù)*/ 
form { 
clear: both; 
} 
form.jqtransform .rowElem label { 
width: 150px; 
text-align: right; 
} 
form.jqtransform .rowElem label.radiovalue { 
width: 30px; 
display: block; 
float: left; 
} 
form.jqtransform .rowElem label.checkboxvalue { 
width: 70px; 
display: block; 
float: left; 
padding-left: 5px; 
} 
.jqTransformSelectWrapper li { 
padding: 0; 
margin: 0; 
} 
</style> 
<script> 
$(function() { 
$('form').jqTransform({ imgPath: 'jqtransformplugin/img/' }); 
}); 
</script> 