移动端页面开发（组件篇）

今天花时间写了一个移动端的静态页面，使用的是zepto+weui框架。

文本录入框

<div class="weui-media-box weui-media-box_text">
    <h4 class="weui-media-box__title">企业名称</h4>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入企业名称">
        </div>
    </div>
</div>

电话号码录入

<div class="weui-media-box weui-media-box_text">
    <h4 class="weui-media-box__title">企业联系人电话</h4>
    <div class="weui-cell weui-cell_select weui-cell_select-before">
        <div class="weui-cell__hd">
            <select class="weui-select" name="select2">
                <option value="1">+86</option>
                <option value="2">+80</option>
                <option value="3">+84</option>
                <option value="4">+87</option>
            </select>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码">
        </div>
    </div>
</div>

数值录入

<div class="weui-media-box weui-media-box_text">
    <h4 class="weui-media-box__title">上年度销售收入（万元）</h4>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入上年度销售收入（万元）">
        </div>
    </div>
</div>

时间录入

<div class="weui-media-box weui-media-box_text">
    <h4 class="weui-media-box__title">贷款起始时间</h4>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" type="date" value="" placeholder="请输入贷款起始时间">
        </div>
    </div>
</div>

Textarea录入

<div class="weui-media-box weui-media-box_text">
    <h4 class="weui-media-box__title">需要协调解决的问题</h4>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <textarea class="weui-textarea" placeholder="请具体说明问题" rows="3"></textarea>
        </div>
    </div>
</div>

半透明提示

<!--BEGIN toast-->
<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">已完成</p>
    </div>
</div>
<!--end toast-->

对应的JS脚本，显示提示后关闭当前窗口（在微信环境内）

var $toast = $('#toast');
$('.submit-report').on('click', function() {
    if ($toast.css('display') != 'none') return;
    $toast.fadeIn(100);
    setTimeout(function () {
        $toast.fadeOut(100);
        if (typeof WeixinJSBridge != "undefined") {
            WeixinJSBridge.call('closeWindow');
        }
    }, 2000);
})