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 新手学习常见问题解决方法
Apr 18 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 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过滤危险html代码
2008/08/18 PHP
PHP 基本语法格式
2009/12/15 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
二招解决php乱码问题
2012/03/25 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
React数据传递之组件内部通信的方法
2017/12/31 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
wxPython 入门教程
2008/10/07 Python
python冒泡排序算法的实现代码
2013/11/21 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
幼儿园招生广告
2014/03/19 职场文书
美国留学经济担保书
2014/05/20 职场文书
公司口号大全
2014/06/11 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Python如何让字典保持有序排列
2022/04/29 Python
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技