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 02 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 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 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
深入密码加salt原理的分析
2013/06/06 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
django输出html内容的实例
2018/05/27 Python
python如何查看微信消息撤回
2018/11/27 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python3排序的实例方法
2020/10/20 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
大学生个人事迹材料
2014/01/21 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
自荐信如何制作?
2014/02/21 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python