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使Div居中并随网页大小改变而改变
Jun 24 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
Javascript地址引用代码实例解析
Feb 25 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php的urlencode()URL编码函数浅析
2011/08/09 PHP
php命令行用法入门实例教程
2014/10/27 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
对Python实现累加函数的方法详解
2019/01/23 Python
python中for in的用法详解
2020/04/17 Python
python中sys模块是做什么用的
2020/08/16 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
生物科学系大学生的自我评价
2013/12/20 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
安全生产承诺书
2014/03/26 职场文书
个人年终总结结尾
2015/03/06 职场文书