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文件自定义表单样式。

jqTransform:呈现更美的表单的更多相关文章

  1. WTF Forms – 使用 CSS 实现用户体验更好的表单

    WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...

  2. 在AngularJS中实现自定义表单验证

    除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...

  3. 【ASP.NET 基础】表单和控件

    1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...

  4. #WEB安全基础 : HTML/CSS | 0x10.1更多表单

    来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...

  5. 使用Angular提交表单

    使用Angular提交表单 我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用 步骤为: 1. 加载 ...

  6. 基于Extjs的web表单设计器 第一节

    前面一节介绍了表单设计器的背景和最终的大概样式,本节主要介绍表单设计器的需求及功能设计. 在讲需求之前先明确几个常用的概念: 主表或者卡片表——具有多行多列的一个区域的控件块,如下图所示. 明细表—— ...

  7. 基于表单布局:分析过时的table结构与当下的div结构

    一些话在前面 最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框.单选按钮等要实现左对齐. 从开始入门就被告知table布局已经过时了,当 ...

  8. Vue数据驱动表单渲染,轻松搞定form表单

    form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,支持双向数据绑定.事件扩展以及自定义组件,可快速生成包含有省市区三级联动.时间选择.日期选择等17种功能组件. Github ...

  9. IT兄弟连 HTML5教程 HTML5表单 HTML表单中的get和post方法

    指引 表单在网页应用中十分重要,基本上任何一个网站都必须使用到表单元素,所以表单的美观和易于交互对于网站设计就变得十分重要.HTML5对目前Web表单进行了全面提升,使得我们使用表单更加智能.它在保持 ...

随机推荐

  1. HBase在特征工程中的应用

    前言HBase是一款分布式的NoSQL DB,可以轻松扩展存储和读写能力. 主要特性有: 按某精确的key获取对应的value(Get) 通过前缀匹配一段相邻的数据(Scan) 多版本 动态列 服务端 ...

  2. matlab优化函数fminunc

    一起来学演化计算-matlab优化函数fminunc 觉得有用的话,欢迎一起讨论相互学习~Follow Me fminunc 求无约束多变量函数的最小值 非线性编程求解器 找到指定问题的最小值,\(m ...

  3. Linux系统调优——内核相关参数(五)

    修改内核参数有3种办法:一种临时修改,两种永久修改. 临时修改是使用sysctl [选项] [参数名=值]命令:永久修改是修改/etc/sysctl.conf文件或修改/proc/sys/目录下的对应 ...

  4. 【esp8266】技术汇总帖

    https://blog.csdn.net/xh870189248/article/details/80027961 这哥们 牛

  5. IE11的变化 navigator.userAgent中不再包含“MSIE”关键字

    IE升级了,让人好头疼,升级个东西,我们也要跟着升级,程序猿压力大呀.... 1.navigator.userAgent中不再包含“MSIE”关键字 2.用javascript的判断是否是IE11的方 ...

  6. 大师Geoff Hinton关于Deep Neural Networks的建议

    大师Geoff Hinton关于Deep Neural Networks的建议 Note: This covers suggestions from Geoff Hinton's talk given ...

  7. html收尾

    <form>input 元素</form> <fieldset ></fieldset > <legend ></legend> ...

  8. centos7修改yum源为阿里镜像

    参考博客: https://blog.csdn.net/kxwinxp/article/details/78578492 https://blog.csdn.net/inslow/article/de ...

  9. conda 创建tensorflow虚拟环境后,无法import tensorflow在jupyter

    ensorflow安装好了,在python中也测试过了,但在jupyter中却会报错,原因是先装的Anaconda 之后装的tensorflow,所以环境有问题,所以需要重装jupyter,先激活te ...

  10. python爬虫-豆瓣电影的尝试

    一.背景介绍 1. 使用工具 Pycharm 2. 安装的第三方库 requests.BeautifulSoup 2.1 如何安装第三方库 File => Settings => Proj ...