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 相关文章推荐
js 小贴士一星期合集
Apr 07 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
javascript修改图片src的方法
Jan 27 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 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
基于header的一些常用指令详解
2013/06/06 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
服务员岗位职责
2014/01/29 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
致裁判员加油稿
2014/02/08 职场文书
公司请假条范文
2014/04/11 职场文书
通信工程求职信
2014/07/16 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
《社戏》教学反思
2016/02/22 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书