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 相关文章推荐
jquery获取input的value问题说明
Aug 19 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
js实现数字滚动特效
Dec 16 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 curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
python文件操作整理汇总
2014/10/21 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
好军嫂事迹材料
2014/01/15 职场文书
秋游活动策划方案
2014/02/16 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
技校毕业生自荐信
2014/06/03 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015年电教工作总结
2015/05/26 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书