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框架的AJAX实例代码
Nov 03 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
js Date概念详细介绍
Nov 22 Javascript
javascript中var的重要性分析
Feb 11 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
解决遍历时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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
Python识别html主要文本框过程解析
2020/02/18 Python
python中if及if-else如何使用
2020/06/02 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
高中地理教学反思
2014/01/29 职场文书
绩效管理实施方案
2014/03/19 职场文书
场地使用证明模板
2014/10/25 职场文书
村干部任职承诺书
2015/01/21 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
python基础之类方法和静态方法
2021/10/24 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python