jqTransform form表单美化插件使用方法


Posted in Javascript onJuly 05, 2012

jQtransForm下载地址 https://3water.com/jiaoben/25166.html

用法
1- 添加脚本包含在标题部分的网页

//required 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

2- 写你的 form
<form class="jqtransform"> 
<div class="rowElem"> 
<label for="name">Name: </label> 

<input type="text" name="name" /> 
</div> 
<div class="rowElem"> 

<input type="submit" value="send" /> 
<div> 
</form>

3- 最后使用插件
After it, select the forms and call the jqTransform plugin. See some examples:
<script type="text/javascript"> 
$(function() { 
//find all form with class jqtransform and apply the plugin 
$("form.jqtransform").jqTransform(); 
}); 
</script>

兼容性:ie 6+, safari 2+, firefox 2+

附:select如有js联动效果,则不能美化。需要原有的select,如以下方法:

<script language="javascript"> 
$(function(){ 
$('.rowElem').jqTransform({imgPath:'jqtransformplugin/img/'}); 
}); 
</script>

<form action="" class="jqtransformdone" method="POST"> 
<div class="rowElem"> 
<label>标题</label> 
<input type="text" name="inputtext"/> 
</div> 
<div class="NOrowElem"> 
<label>地区</label> 
<select name="select1"> 
<option selected="selected" value="0">省</option> 
<option value="1523">北京</option> 
<option value="1524">陕西省</option> 
</select> 
<select name="select2" > 
<option selected="selected" value="">市</option> 
<option value="1525">北京市</option> 
<option value="1526">西安市</option> 
</select> 
</div> 
</form>
Javascript 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 #Javascript
JavaScript中变量提升 Hoisting
Jul 03 #Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 #Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 #Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 #Javascript
JavaScript中的细节分析
Jun 30 #Javascript
JavaScript中的作用域链和闭包
Jun 30 #Javascript
You might like
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Flask之flask-session的具体使用
2018/07/26 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
工作表扬信的范文
2014/01/10 职场文书
安全生产检讨书
2014/01/21 职场文书
自我鉴定总结
2014/03/24 职场文书
党员评议个人总结
2014/10/20 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫