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 相关文章推荐
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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
德生H-501的评价与改造
2021/03/02 无线电
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php读取mysql的简单实例
2014/01/15 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
飞利浦美国官网:Philips美国
2020/02/28 全球购物
上班上网检讨书
2014/01/29 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
2015年中个人总结范文
2015/03/10 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python