Hot!Ajax

  • Increase font size
  • Default font size
  • Decrease font size
  • default color
  • black color

Latest News

Gsearch

Google
Home arrow jQuery arrow Accordions | Menu | Form arrow NiceJForm完美提交表单（jquery插件）
NiceJForm完美提交表单（jquery插件）
User Rating: / 35
PoorBest 
Thursday, 11 October 2007

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" <strong>class="niceform"</strong>>
  

5.在</body>之前加入：

<script type="text/javascript">

 $(document).ready( function() { <strong>$.NiceJForms.build();</strong> } );

 </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/

Comments (3)add comment

Write comment

busy
 
< Prev   Next >
[ Back ]