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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
iis6+javascript Add an Extension File
Jun 13 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
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
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
Redis构建分布式锁
2017/03/28 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
python 实现两个线程交替执行
2020/05/02 Python
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
法律进学校实施方案
2014/03/15 职场文书
一体化教学实施方案
2014/05/10 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
电力工程合作意向书
2015/05/11 职场文书
毕业设计工作总结
2015/08/14 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
MySQL创建定时任务
2022/01/22 MySQL
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js