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 相关文章推荐
JavaScript开发时的五个注意事项
Dec 08 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
原生js实现点击轮播切换图片
2020/02/11 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
详解python中docx库的安装过程
2019/11/08 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python tkinter三种布局实例详解
2020/01/06 Python
Python class的继承方法代码实例
2020/02/14 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
公司前台接待岗位职责
2013/12/03 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
九年级物理教学反思
2014/01/29 职场文书
策划创业计划书
2014/02/06 职场文书
一句话工作感言
2014/03/01 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
Python max函数中key的用法及原理解析
2021/06/26 Python
virtualenv隔离Python环境的问题解析
2022/06/21 Python