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中获取下个月一号,是星期几
Jun 01 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php采集神器cURL使用方法详解
2016/02/19 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python模块导入的方法
2019/10/24 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
消防器材管理制度
2014/01/28 职场文书
公司募捐倡议书
2014/05/14 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏