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中DOM的基本属性
Feb 26 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
vue.js+element 默认提示中英文操作
Nov 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
Python获取当前时间的方法
2014/01/14 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python实现将xml导入至excel
2015/11/20 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
简单实现python画圆功能
2018/01/25 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python实现大文本文件分割
2019/07/22 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python datetime中strptime用法详解
2019/08/29 Python
python编写简单端口扫描器
2019/09/04 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python bisect模块原理及常见实例
2020/06/17 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
解除租房协议书
2014/12/03 职场文书
环卫工作个人总结
2015/03/04 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers