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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
vue配置多代理服务接口地址操作
Sep 08 Javascript
JavaScript实现简单计时器
Jun 22 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调用Oracle存储过程的方法
2008/09/12 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
室内设计专业学生的自我评价分享
2013/11/27 职场文书
采购内勤岗位职责
2013/12/10 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL