jqTransform表单美化插件-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

jqTransform表单美化插件

简介: jqTransform是基于jQuery的样式插件,用于美化表单元素,使用方便简单,能美化所有表单元素包括input,radio,textarea,select,checkbox。

美化之前

screenshot

美化之后

screenshot

使用步骤

引入必要js和css文件

<!-- 引进必要文件 -->
<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css"  media="all">
<script type="text/javascript" src="requiered/jquery.js"></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>

编写HTML表单代码

<form id="jqtransform" >
        
    <div class="rowElem"><label>文本:</label><input type="text"></input></div>
        
    <div class="rowElem"><label>密码:</label><input type="password"></input></div>
        
    <div class="rowElem">
        <label>单选:</label>
        <input type="radio" name="radio">
        <label>A </label>
        <input type="radio" name="radio">
        <label>B</label>
    </div>
    
    <div class="rowElem">
        <label>下拉:</label>
        <select name="select">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
    <div class="rowElem">
        <label>多选:</label>
        <input type="checkbox" name="1" /><label>A</label>
        <input type="checkbox" name="2" /><label>B</label>
        <input type="checkbox" name="3" /><label>C</label> 
    </div>
    <div class="rowElem">
        <label>多行文本:</label>
        <textarea cols="25" rows="5" name="mytext"> </textarea>
    </div>
        

    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
</form>

调用jqtransformp插件

$(function() {
    $('form').jqTransform({imgPath:'jqtransformplugin/img/'});
})

附件下载:https://developer.aliyun.com/topic/download?id=239

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章