WeUI表单

WeUI 袁德灿
文章标签: WeUI表单

模仿制作:

今天制作的是一个提交表单,直接从https://weui.io/#input页面查看源码,搜索关键字,查看需要的源码片段。

引用官网最新版:GitHub中的最新版1.13

<link rel="stylesheet" type="text/css" href="css/weui.css">

效果图:

1533892552(1).jpg

实例代码:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" charset="utf-8"> 
	<title></title>
	
	<link rel="stylesheet" type="text/css" href="css/weui.css">
</head>
<body>
 
	<div class="weui-cells__title">新增会员</div>
	<div class="weui-cell">
	    <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
	    <div class="weui-cell__bd">
	        <input class="weui-input" type="text" placeholder="请输入姓名"/>
	    </div>
	</div>
	<div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">性别</label>
        </div>
        <div class="weui-cell__bd">
            <select class="weui-select" name="select2">
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>
    </div>
	<div class="weui-cell">
	    <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
	    <div class="weui-cell__bd">
	        <input class="weui-input" type="text" placeholder="请输入身份证号"/>
	    </div>
	</div>
	<div class="weui-cell">
	    <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
	    <div class="weui-cell__bd">
	        <input class="weui-input" type="tel" placeholder="请输入手机号"/>
	    </div>
	</div>
	<div class="weui-cell">
	    <div class="weui-cell__hd"><label class="weui-label">地址</label></div>
	    <div class="weui-cell__bd">
	        <input class="weui-input" type="tel" placeholder="请输入地址"/>
	    </div>
	</div>
	<div class="weui-cell">
	    <div class="weui-cell__hd"><label class="weui-label">微信二维码</label></div>
	    <div class="weui-cell__bd">
	    	
	        <img src="img/zxwyit.png" style="width: 6vw;
	        height: 6vw;vertical-align: bottom;margin-left: 4vw;">
	    </div>
	</div>
 
	<div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
    </div>
</body>
</html>

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :