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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
深入理解js中this的用法
May 28 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python numpy实现rolling滚动案例
2020/06/08 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
音乐专业自荐信
2014/02/07 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
联村联户简报
2015/07/21 职场文书
初中信息技术教学反思
2016/02/16 职场文书