jqTransform美化表单


Posted in Javascript onOctober 10, 2015

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

jqTransform美化表单

使用方法:
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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 #Javascript
页面内容排序插件jSort使用方法
Oct 10 #Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 #Javascript
js中unicode转码方法详解
Oct 09 #Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 #Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 #Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 #Javascript
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP 常用的header头部定义汇总
2015/06/19 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
JavaScript静态的动态
2006/09/18 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python实现kmp算法的实例代码
2019/04/03 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python3使用GUI统计代码量
2019/09/18 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
python 基于wx实现音乐播放
2020/11/24 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
半年思想汇报
2013/12/30 职场文书
企业安全生产标语
2014/06/06 职场文书
材料化学专业求职信
2014/07/15 职场文书
实习生工作证明范本
2014/09/14 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2015年组织部工作总结
2015/04/03 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书