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 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 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
谈谈新手如何学习PHP
2006/12/23 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python实用日期时间处理方法汇总
2015/05/09 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
分析Python读取文件时的路径问题
2018/02/11 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python3 反射的四种基本方法解析
2019/08/26 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
聚美优品广告词改编
2014/03/14 职场文书
学校教师培训工作总结
2015/10/14 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB