基于jQuery的表单美化插件jNice

很漂亮的表单美化插件,当然了如果你对颜色不满意,下载后可以通过更改CSS和图片的颜色来实现,下载了自己看看吧很简单如果实在不知道如何修改颜色的话就给我留言,有留言必定回.

上张图片让大家看看:


由于官方没有教程,这里简单的写点东西,希望能对菜鸟有些帮助,如果是比我强的朋友,不要笑话.

一.下载下面提供的插件包

二.在页面加入下列调用代码(具体文件位置自己定义):

1.页面的基本定义调用base.css,这个里买你的代码很简单,也可以放到自己的页面定义CSS里面

<link href="/jquery/inc/style/base.css" 
rel="stylesheet" type="text/css" />

2.表单的CSS定义,定义了表单的样式,其中有颜色等定义,注意除了这里还有部分颜色是图片实现的.

<link href="jNice.css" rel="stylesheet" type="text/css" />

3.jQuery核心代码,也可以将这个js文件下载到本地进行调用.

<script type="text/javascript" src="http://code.jquery.com/
jquery-latest.pack.js"><script>

4.jNice的核心代码,这里面写了一些用来动态定义表单样式的js代码,高手可以研究一下.

<script type="text/javascript" src="
jquery.jNice.js"><script>

三.将加入你的form标签,例如:

<form class="jNice">

四.下拉列表值插入问题
正常来讲这样就结束了,应该可以正常使用了,但是如果你想用js代码向表单的下拉列表里面插入内容,用正常的语句就无法完成了,不过不用担心,制作这个美化插件的高手当然不会忘记这个问题,所以下面是解决方案.

你可以用以下代码来代替你现在使用的向下拉列表插入项目的代码.
//下面是用来定义你要插入内容的下拉列表的ID, 其中#select2代表你要插入值的下拉列表的ID

var element = $('#select2')[0];

//下面是内容插入代码,其中"My Option"是下拉列表的text值,"123"是value值

var myNewOption = new Option("My Option", "123", true);
element.options[element.options.length] = myNewOption;
$.jNice.SelectUpdate(element);

好了,到这里基本结束,由于时间仓促,主要是我比较懒,这里就不过于详细的介绍了
,如果你有什么不明白的地方,可以在下面留言,我一定会尽快回复.

演示地址:http://www.whitespace-creative.com/jquery/jNice/
下载地址:http://plugins.jquery.com/project/jNice