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 常用方法经典总结
Jan 28 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
通过layer实现可输入的模态框的例子
Sep 27 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发电子邮件
2006/10/09 PHP
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
可输入的下拉框
2006/06/19 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
详解python中递归函数
2019/04/16 Python
Pytorch转tflite方式
2020/05/25 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
秘书英文求职信范文
2014/01/31 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
森林防火标语
2014/06/23 职场文书
体育教师求职信
2014/06/30 职场文书
开业庆典致辞
2015/08/01 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL