最新消息:

第27款插件:jquery.jqtransform.js表单美化

表单插件 杨红伟 2073浏览 0评论

描述:jqTransform,是DFC Engineering写的一个jQuery的样式插件,用于美化表单元素,使用方便简单,能美化所有表单元素包括input,radio,textarea,select,checkbox。
图片展示:

11

兼容浏览器:IE6+/Firefox/Chrome
官方链接http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
JS下载: http://www.ijquery.cn/js/jquery.jqtransform.js
CSS下载: http://www.ijquery.cn/js/jqtransform.css
注意,这里有相应的图片,没有图片的话,效果会非常的丑陋!这里我全部打包了,提供下载!
预览:http://www.ijquery.cn/demo/jqtransform
打包下载: http://www.ijquery.cn/demo/jqtransform/jqtransform.zip
参数说明:
JS引用代码:(注:这里调用了jqtransform.css样式,还是要说明,必须有图片才有效果)

[js]

<link rel="stylesheet" type="text/css" href="jqtransform.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqtransform.js"></script>
<script language="javascript">
$(function(){
$(‘.jqtransform’).jqTransform();
});
</script>

[/js]

HTML代码:注意(没有插件和有插件的HTML表单,只在于)

[html]

<form action="#" method="post">
<p><label>用户名:</label><input type="text" /></p>
<p><label>密码:</label><input type="password" /></p>
<p><label>性别:</label><input type="radio" name="sex" /> <label style="width:auto">男</label>
<input type="radio" name="sex" /> <label style="width:auto">女</label> </p>
<p><label>学历:</label>
<select>
<option value="1">博士</option>
<option value="2">硕士</option>
<option value="3">大学本科</option>
<option value="4">大专</option>
<option value="5">中技</option>
</select>
</p>
<p><label>短信订阅:</label><input type="checkbox" />  <label>开通短信订阅功能</label></p>
<p><label>备注:</label>
<textarea name="note" rows="6" cols="40"></textarea>
</p>
<p><label> </label><input type="submit" value="提交" /> <input type="reset" value="重置" /></p>
</form>

[/html]

 

CSS代码:在上边已经调用如下:

[css]<link rel="stylesheet" type="text/css" href="jqtransform.css" />[/css]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址