脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jqTransform使表单更加美化

jqTransform美化表单

 更新时间：2015年10月10日 09:30:35   投稿：lijiao  
本文为大家揭秘如何使表单更加美化，感兴趣的小伙伴们可以参考一下

jqTransform，是DFC Engineering写的一个jQuery的样式插件，用于美化表单元素，使用方便简单，能美化所有表单元素包括input，radio，textarea，select，checkbox。
运行效果图：

使用方法：
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的样式插件，用于美化表单元素，使用方便简单，希望大家可以应用到自己网页制作当中。

您可能感兴趣的文章:

相关文章

  • jQuery查找节点方法完整实例

    jQuery查找节点方法完整实例

    这篇文章主要介绍了jQuery查找节点方法,结合完整实例形式分析了jQuery针对DOM节点属性的相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • jquery淡入淡出效果简单实例

    jquery淡入淡出效果简单实例

    这篇文章主要介绍了jquery淡入淡出效果简单实现方法,以完整实例形式分析了jQuery中fadeIn及fadeOut实现淡入淡出的相关技巧,需要的朋友可以参考下
    2016-01-01
  • ASP.NET jQuery 实例10 动态修改hyperlink的URL值

    ASP.NET jQuery 实例10 动态修改hyperlink的URL值

    这节我们来看下如何实现通过选择RadioButtonList值动态改变hyperlink控件的URL值，并简要介绍bind和live方法的区别
    2012-02-02
  • jQuery中nextAll()方法用法实例

    jQuery中nextAll()方法用法实例

    这篇文章主要介绍了jQuery中nextAll()方法用法,实例分析了nextAll()方法的功能、定义及查找匹配元素之后所有的同辈元素使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery超简单实现手风琴效果的方法

    jquery超简单实现手风琴效果的方法

    这篇文章主要介绍了jquery超简单实现手风琴效果的方法,只需要几行代码即可实现手风琴效果的样式变换功能,需要的朋友可以参考下
    2015-06-06
  • 基于jquery的回到页面顶部按钮

    基于jquery的回到页面顶部按钮

    昨天看到一个园友的blog中有个页面下滚后出现用于"回到页面顶部"按钮的效果, 感觉挺不错的, 所以自己也写了一个, 用jQuery写是再简单不过了. 下面就直接给出代码了
    2011-06-06
  • jquery预览图片实现鼠标放上去显示实际大小

    jquery预览图片实现鼠标放上去显示实际大小

    本文为大家介绍的这个示例为jquery实现的预览图片，当鼠标放上去显示实际大小，感兴趣的朋友可以学习下
    2014-01-01
  • Jquery倒计时源码分享

    Jquery倒计时源码分享

    这是一个基于jquey写的倒计时。当然代码有点小改动，只是改了一下展示效果。
    2014-05-05
  • validform表单验证的实现方法

    validform表单验证的实现方法

    这篇文章主要介绍了validform表单验证的实现方法，validform插件主要把所有的验证条件和验证提示信息绑定到每个表单元素，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-03-03
  • JQuery实现带排序功能的权限选择实例

    JQuery实现带排序功能的权限选择实例

    这篇文章主要介绍了JQuery带排序功能的权限选择,涉及jQuery鼠标事件及json数据处理的相关技巧,需要的朋友可以参考下
    2015-05-05

最新评论