jqTransform form表单美化插件使用方法

jQtransForm下载地址 http://www.jb51.net/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>

赞 (0)

相关推荐

  • JavaScript/jQuery 表单美化插件小结

    JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub:https://github.com/emblematiq/Niceforms 使用方法,在页面头部引入以下脚本及样式即可: 复制代码 代码如下: <link href="ni

  • jQuery表单美化插件jqTransform使用详解

    jQuery表单美化插件jqTransform使用详解

    jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+,插件还是很不错的,使用起来也很简单,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <script type="te

  • jqTransform美化表单

    jqTransform美化表单

    jqTransform,是DFC Engineering写的一个jQuery的样式插件,用于美化表单元素,使用方便简单,能美化所有表单元素包括input,radio,textarea,select,checkbox. 运行效果图: 使用方法: 1.添加javascript引用和css文件的引用 <link rel="stylesheet" type="text/css" href="jqtransform.css" /> <sc

  • jquery使用ul模拟select实现表单美化的方法

    jquery使用ul模拟select实现表单美化的方法

    本文实例讲述了jquery使用ul模拟select实现表单美化的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ul模拟select,是jQuery插件实现的Select下拉菜单效果,类似的功能网上已经有一些了,每一款都代表了不同的编程思路,为学习提供一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ul-select-table-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • 使用ajax+jqtransform实现动态加载select

    使用ajax+jqtransform实现动态加载select

    今天在工作的时候遇到一个问题,页面中公司名称是在项目名称选择后用ajax读取出来的.但是jqtransform是在页面加载完成后调用的,所以导致了公司名称下拉框无法展示最新的数据. <link rel="stylesheet" href="${ctx}/jqtransformplugin/jqtransform.css" type="text/css"></link> <script type="text/

  • 3个效果超酷的FORM表单美化效果 打包下载

    3个效果超酷的FORM表单美化效果 打包下载

    第一个 效果图: 打包下载 ----------------------------------------------------------------------------------------- 第二个 效果图:打包下载 --------------------------------------------------------------------------------------- 第三个 效果图: 打包下载 本地下载

  • jqTransform form表单美化插件使用方法

    jQtransForm下载地址 http://www.jb51.net/jiaoben/25166.html 用法 1- 添加脚本包含在标题部分的网页 复制代码 代码如下: //required <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.j

  • jQuery Form 表单提交插件之formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的应用

    jQuery Form 表单提交插件之formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的应用

    一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串. 是否可以连环调用: 否, 这个方法返回的是一个字符串. 例子: var queryString = $('#myFormId').formSerialize(); // the data could now be submitted using $.get, $.post, $.ajax, etc $.post('

  • jQuery form 表单验证插件(fieldValue)校验表单

    jQuery form表单验证相关知识,在做项目中经常会用到,其实也不算复杂,下面通过一段代码给大家介绍jQuery form 表单验证插件(fieldValue)校验表单的相关知识,感兴趣的朋友一起学习吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--使用 fieldValue

  • jQuery Form表单取值的方法

    之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且name值等于后台能识别的参数名. <form method='post' id="punishformID"> <input hidden="hidden" name="Stu" value=@Model.Stu> <in

  • jquery的ajax提交form表单的两种方法小结(推荐)

    jquery的ajax提交form表单的两种方法小结(推荐) 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url:

  • layui 对弹窗 form表单赋值的实现方法

    目的: 点击编辑按钮 实现 数据回显到弹出 子页面 表单 内.如下图: Html 代码: <body> <div class="layui-form" lay-filter="useradmin" id="useradmin"> <div class="layui-form-item"> <label class="layui-form-label">用  户

  • Django 构建模板form表单的两种方法

    通常情况下,我们想构建一张表单时会在模板文件login.html中写入 <form action="/your-name/" method="post"> <label for="your_name">Your name: </label> <input id="your_name" type="text" name="your_name" va

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

随机推荐