jqTransform美化表单

2024-10-21 12:37:08

jqTransform，是DFC Engineering写的一个jQuery的样式插件，用于美化表单元素，使用方便简单，能美化所有表单元素包括input，radio，textarea，select，checkbox。
运行效果图：

使用方法：
1、添加javascript引用和css文件的引用

<link rel="stylesheet" type="text/css" href="jqtransform.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>

2、编写HTML表单结构

<form class="jqtransform" action="#" method="post">
  <p><label>用户名：</label><input type="text" /></p>
  <p><label>密码：</label><input type="password" /></p>
  <p><label>性别：</label><input type="radio" name="sex" /> <label style="width:auto">男</label>
 <input type="radio" name="sex" /> <label style="width:auto">女</label> </p>
  <p><label>学历：</label>
   <select>
    <option value="1">博士</option>
    <option value="2">硕士</option>
    <option value="3">大学本科</option>
    <option value="4">大专</option>
    <option value="5">中技</option>
   </select>
  </p>
  <p><label>短信订阅：</label><input type="checkbox" /> <label>开通短信订阅功能</label></p>
  <p><label>备注：</label>
  <textarea name="note" rows="6" cols="40"></textarea>
  </p>
  <p><label> </label><input type="submit" value="提交" /> <input type="reset" value="重置" /></p>
</form>

3、调用插件

$('.jqtransform').jqTransform();

一个漂亮的表单就出来了，不过有点瑕疵，jqTransform对IE下中文表单按钮的支持不够理想，如：button的value为英文时显示正常，但是多个英文单词如value为Sure,I submit!则会掉行，如果value为中文那就更杯具了，”提交“两个字竖着排，这当然不是我想要的效果。解决办法是从CSS样式下手，找到jqtransform.css文件的button.jqTransformButton，大概在14行。加入：

width:auto;
white-space: nowrap;

即将按钮的宽度设置为自动，单行显示。当然你也可以设置一个固定的宽度，您还可以修改CSS文件自定义表单样式。

以上就是告诉大家如何使表单更加美化，就是利用一个简单的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 Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+,插件还是很不错的,使用起来也很简单,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <script type="te
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使用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是在页面加载完成后调用的,所以导致了公司名称下拉框无法展示最新的数据. <link rel="stylesheet" href="${ctx}/jqtransformplugin/jqtransform.css" type="text/css"></link> <script type="text/
3个效果超酷的FORM表单美化效果打包下载

第一个效果图: 打包下载 ----------------------------------------------------------------------------------------- 第二个效果图:打包下载 --------------------------------------------------------------------------------------- 第三个效果图: 打包下载本地下载
jqTransform美化表单

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

nicejforms可以算是jquery的一个插件,可以起到非常好的美化表单的作用 demo:http://www.healdream.com/upload/html/nicejforms/nicejforms_green.htmldown:http://www.51files.com/?O4IXTNT9ZO9BIL954XTP 用法:首先将两个js包含进来,就像这样复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric
Angular2.js实现表单验证详解

表单创建一个有效.引人注目的数据输入体验.Angular表单协调一组数据绑定控件,跟踪变更.验证输入的有效性,并且显示错误信息. 接下来,主要内容有: 1.使用组件和模板构建Angular表单: 2.用ngModel创建数据绑定,以读取和写入输入控件的值. 构建Angular表单我们想构建包含姓名,电话,特长三个字段的表单 1.我们可以参照快速启动那篇,创建一个名为forms的新项目,也可以使用之前的项目进行修改: 2.创建Person类: 3.创建控制此表单的组件: 4.创建具有初始表单布局
.net jquery绘制自定义表单源码分享

前言两年前在力控的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了.没想到两年多后再这有重新提出要写一个绘制表单的功能.对此也是有点小激动呢?总共用时8.5天的时间基本功能也就实现了,当然再者中间也借用了网上的一些资料,公司前端也没有帮忙处理,所以样式和部分功能还没有更好地得到处理,github上出的code只有前端脚本,至于后端的处理,会在博客中体现出来. 1.工作前准备 1.1.实现的思路思路一: (1)ueditor添加自定义按钮 (2)绘制表单(控件会触发的脚
js实现文件上传表单域美化特效

一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的<input type="file">元素,然后使用一个<label>元素来制作美化效果. HTML结构该文件上传域美化效果最基本的HTML结构如下: <input type="file" name="file" id="file" class=&q
JS模拟并美化的表单控件完整实例

本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) //element 为表单元素. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-like-table-control-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

jqTransform美化表单

相关推荐

随机推荐