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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
JavaScript 不只是脚本
May 30 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
浅析vue深复制
Jan 29 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
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python3 max()函数基础用法
2019/02/19 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
python操作toml文件的示例代码
2020/11/27 Python
土木工程专业自荐信
2013/10/04 职场文书
小学教师听课制度
2014/02/01 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
后勤工作个人总结
2015/02/28 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
Python基础之hashlib模块详解
2021/05/06 Python
在 Python 中利用 Pool 进行多线程
2022/04/24 Python