NiceJForm是一个拥有完美外形的表单,它是基于jquery库的,NiceJForms实际上是个jquery插件,用来使表单看起来更为美观。这不是最终版本,我知道可以通过多种途径改良它的脚本,但是至少,这是一个可以使用的稳定版本。非常感谢Lucian Slatineanu发布的NiceJForm,在他的blog中你可以获得更多信息。
在IE6,IE7,Firefox2.0中测试成功。
预览:
怎样使用:
使用NiceJForm你需要:
1.获得jQuery库 。
2.将jquery.js和nicejforms.js 加入到你的网页中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Page title</title> <script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="nicejforms.js"></script> </head>
<body>
3.css
<style type="text/css" media="screen">@import url("niceforms.css")</style>
4.form
<form action="vars.php" method="POST" class="niceform">
5.在</body>之前加入:
<script type="text/javascript">
$(document).ready( function() { $.NiceJForms.build(); } );
</script>
6.额外信息:
你可以使用nicejforms作为一个单独的插件接口
作,你将需要添加interface.js文件到你代码,并使用" nicejforms - interface.js "代替" nicejforms.js " :
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript" src="nicejforms-interface.js">
</script> </head> <body> ...
选项:
(integer) selectRightSideWidth
(integer) selectLeftSideWidth
(integer) selectAreaHeight
(integer) selectAreaOptionsOverlap
(string) imagesPath
选项实例:
<script type="text/javascript">
$(document).ready(function(){
$.NiceJForms.build({ imagesPath:"images/redtheme/" })
}); </script>
我已经发布了两个额外的css风格red和green,我相信新的风格马上会发布。
下载:http://www.hotajax.org/download/jquery/nicejforms.zip
译自:http://www.lexcat.ro/nicejforms/

| < Prev | Next > |
|---|
- 07/11/2007 07:07 - AutoCompleter Tutorial - jQuery(Ajax)/PHP/MySQL
- 05/11/2007 17:23 - Tabs - jQuery plugin
- 05/11/2007 07:50 - CSS Dock Menu(jquery)
- 04/11/2007 20:02 - AutoComplete - JQuery
- 03/11/2007 07:29 - jTagging(jquery)
- 10/10/2007 07:30 - jQuery的表单校验插件validate
- 09/10/2007 03:00 - autohelp(jquery)
- 08/10/2007 04:46 - LavaLamp菜单
- 17/09/2007 20:50 - 用jQuery进行两次确定提交
- 17/09/2007 18:02 - 基于jquery的进度条







