webui控件在前端开发中的作用（HTML5 weui使用笔记）

<a href="javascript:;" class="weui_btn weui_btn_primary">按钮-确定-可用</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮-确定-不可用</a>
<a href="javascript:;" class="weui_btn weui_btn_warn">按钮-警告-可用</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">按钮-警告-不可用</a>
<a href="javascript:;" class="weui_btn weui_btn_default">按钮-取消-可用</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮-取消-不可用</a>
<a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮-镂空-取消</a>
<a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮-镂空-确定</a>
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮-迷你-确定</a>
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮-迷你-取消</a>

<li class="weui_cells">
    <li class="weui_cell">
        <li class="weui_cell_bd weui_cell_primary">
            <p>带说明的列表项</p>
        </li>
        <li class="weui_cell_ft">说明文字</li>
    </li>
</li>
<li class="weui_cells weui_cells_access">
    <a class="weui_cell" href="javascript:;">
        <li class="weui_cell_hd">
            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
        </li>
        <li class="weui_cell_bd weui_cell_primary">
            <p>带图标、说明、跳转的列表项</p>
        </li>
        <li class="weui_cell_ft">说明文字</li>
    </a>
    <a class="weui_cell" href="javascript:;">
        <li class="weui_cell_bd weui_cell_primary">
            <p>说明、跳转的列表项</p>
        </li>
        <li class="weui_cell_ft">说明文字</li>
    </a>
</li>

<li class="weui_cells weui_cells_radio">
    <label class="weui_cell weui_check_label" for="x11">
        <li class="weui_cell_bd weui_cell_primary">
            <p>单选列表项1</p>
        </li>
        <li class="weui_cell_ft">
            <input type="radio" class="weui_check" name="radio1" id="x11">
            <span class="weui_icon_checked"></span>
        </li>
    </label>
    <label class="weui_cell weui_check_label" for="x12">
        <li class="weui_cell_bd weui_cell_primary">
            <p>单选列表项2</p>
        </li>
        <li class="weui_cell_ft">
            <input type="radio" name="radio1" class="weui_check" id="x12" checked="checked">
            <span class="weui_icon_checked"></span>
        </li>
    </label>
</li>

<li class="weui_cells weui_cells_checkbox">
    <label class="weui_cell weui_check_label" for="s11">
        <li class="weui_cell_hd">
            <input type="checkbox" class="weui_check" name="checkbox1" id="s11" checked="checked">
            <i class="weui_icon_checked"></i>
        </li>
        <li class="weui_cell_bd weui_cell_primary">
            <p>复选列表项1</p>
        </li>
    </label>
    <label class="weui_cell weui_check_label" for="s12">
        <li class="weui_cell_hd">
            <input type="checkbox" name="checkbox1" class="weui_check" id="s12">
            <i class="weui_icon_checked"></i>
        </li>
        <li class="weui_cell_bd weui_cell_primary">
            <p>复选列表项2</p>
        </li>
    </label>
    <label class="weui_cell weui_check_label" for="s13">
        <li class="weui_cell_hd">
            <input type="checkbox" name="checkbox1" class="weui_check" id="s13">
            <i class="weui_icon_checked"></i>
        </li>
        <li class="weui_cell_bd weui_cell_primary">
            <p>复选列表项3</p>
        </li>
    </label>
    <label class="weui_cell weui_check_label" for="s14">
        <li class="weui_cell_hd">
            <input type="checkbox" name="checkbox1" class="weui_check" id="s14">
            <i class="weui_icon_checked"></i>
        </li>
        <li class="weui_cell_bd weui_cell_primary">
            <p>复选列表项4</p>
        </li>
    </label>
</li>

<li class="weui_cells weui_cells_form">
    <li class="weui_cell">
        <li class="weui_cell_hd">
            <label class="weui_label">qq</label>
        </li>
        <li class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入qq号" />
        </li>
    </li>
    <li class="weui_cell weui_vcode">
        <li class="weui_cell_hd">
            <label class="weui_label">验证码</label>
        </li>
        <li class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" placeholder="请输入验证码" />
        </li>
        <li class="weui_cell_ft">
            <img src="../img/vcode.jpg" alt="webui控件在前端开发中的作用（HTML5 weui使用笔记）" border="0" />

<li class="weui_cells weui_cells_form">
    <li class="weui_cell">
        <li class="weui_cell_bd weui_cell_primary">
            <li class="weui_uploader">
                <li class="weui_uploader_hd weui_cell">
                    <li class="weui_cell_bd weui_cell_primary">图片上传</li>
                    <li class="weui_cell_ft">0/2</li>
                </li>
                <li class="weui_uploader_bd">
                    <ul class="weui_uploader_files">
                        <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>
                        <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>
                        <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>
                        <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">
                            <li class="weui_uploader_status_content">
                                <i class="weui_icon_warn"></i>
                            </li>
                        </li>
                        <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">
                            <li class="weui_uploader_status_content">50%</li>
                        </li>
                    </ul>
                    <li class="weui_uploader_input_wrp">
                        <input class="weui_uploader_input" type="file" accept="image.jpg" alt="webui控件在前端开发中的作用（HTML5 weui使用笔记）" border="0" />

<li class="weui_cell">
    <li class="weui_cell_hd">
        <label for="" class="weui_label">日期</label>
    </li>
    <li class="weui_cell_bd weui_cell_primary">
        <input class="weui_input" type="date" value="" />
    </li>
</li>
<li class="weui_cell">
    <li class="weui_cell_hd">
        <label for="" class="weui_label">时间</label>
    </li>
    <li class="weui_cell_bd weui_cell_primary">
        <input class="weui_input" type="datetime-local" value="" placeholder="" />
    </li>
</li>

<li class="weui_cells">
    <li class="weui_cell weui_cell_select weui_select_before">
        <li 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>
                <option value="4">+你大爷</option>
            </select>
        </li>
        <li class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入号码" />
        </li>
    </li>
</li>
<li class="weui_cells">
    <li class="weui_cell weui_cell_select">
        <li class="weui_cell_bd weui_cell_primary">
            <select class="weui_select" name="select1">
                <option selected="" value="1">微信号</option>
                <option value="2">QQ号</option>
                <option value="3">Email</option>
            </select>
        </li>
    </li>
    <li class="weui_cell weui_cell_select weui_select_after">
        <li class="weui_cell_hd">
            国家/地区
        </li>
        <li class="weui_cell_bd weui_cell_primary">
            <select class="weui_select" name="select2">
                <option value="1">中国</option>
                <option value="2">美国</option>
                <option value="3">英国</option>
            </select>
        </li>
    </li>
</li>

<li id="Dialog1" class="weui_dialog_confirm">
    <li class="weui_mask"></li>
    <li class="weui_dialog">
        <li class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></li>
        <li class="weui_dialog_bd">自定义弹窗内容<br>...</li>
        <li class="weui_dialog_ft">
            <a name="no" href="javascript:;" class="weui_btn_dialog default">取消</a>
            <a name="yes" href="javascript:;" class="weui_btn_dialog primary">确定</a>
        </li>
    </li>
</li>
<script>
$("#Dialog1").find("[name='no']").click(function(){
    $("#Dialog1").hide();
    // 活用一下显示延迟关闭方法
    // $('#Dialog1').show().delay(3000).hide(0);
});
$("#Dialog1").find("[name='yes']").click(function(){
    $("#Dialog1").hide();
});
</script>

<li id="Dialog2" class="weui_dialog_alert">
    <li class="weui_mask"></li>
    <li class="weui_dialog">
        <li class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></li>
        <li class="weui_dialog_bd">弹窗内容，告知当前页面信息等</li>
        <li class="weui_dialog_ft">
            <a name="yes" href="javascript:;" class="weui_btn_dialog primary">确定</a>
        </li>
    </li>
</li>
<script>
$("#Dialog2").find("[name='yes']").click(function(){
    $("#Dialog2").hide();
});
</script>

<li class="weui_progress">
    <li class="weui_progress_bar">
        <li id="prs" class="weui_progress_inner_bar" style="width: 50%;"></li>
    </li>
    <a href="javascript:;" class="weui_progress_cancel">
        <i class="weui_icon_cancel"></i>
    </a>
</li>
<li class="weui_btn_area">
    <a href="javascript:;" class="weui_btn weui_btn_primary" id="btnStartProgress">上传</a>
</li>
<script>
$("#btnStartProgress").click(function(){
    $('#prs').animate(
        {width:"100%"},
        5000,
        function(){
            $(this).css("width","10%");
        }
    );
});
</script>

<li id="toast">
    <li class="weui_mask_transparent"></li>
    <li class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content">操作异常<br>(2秒后自动关闭)</p>
    </li>
</li>
<script>
setTimeout(function(){
    $("#toast").hide();
}, 2000);
</script>

<li id="loadingToast" class="weui_loading_toast">
    <li class="weui_mask_transparent"></li>
    <li class="weui_toast">
        <li class="weui_loading">
            <li class="weui_loading_leaf weui_loading_leaf_0"></li>
            <li class="weui_loading_leaf weui_loading_leaf_1"></li>
            <li class="weui_loading_leaf weui_loading_leaf_2"></li>
            <li class="weui_loading_leaf weui_loading_leaf_3"></li>
            <li class="weui_loading_leaf weui_loading_leaf_4"></li>
            <li class="weui_loading_leaf weui_loading_leaf_5"></li>
            <li class="weui_loading_leaf weui_loading_leaf_6"></li>
            <li class="weui_loading_leaf weui_loading_leaf_7"></li>
            <li class="weui_loading_leaf weui_loading_leaf_8"></li>
            <li class="weui_loading_leaf weui_loading_leaf_9"></li>
            <li class="weui_loading_leaf weui_loading_leaf_10"></li>
            <li class="weui_loading_leaf weui_loading_leaf_11"></li>
        </li>
        <p class="weui_toast_content">数据加载中</p>
    </li>
</li>
<script>
setTimeout(function(){
    $("#loadingToast").hide();
}, 3000);
</script>

<li class="weui_msg">
    <li class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></li>
    <li class="weui_text_area">
        <h2 class="weui_msg_title">操作成功</h2>
        <p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
    </li>
    <li class="weui_opr_area">
        <p class="weui_btn_area">
            <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
            <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
        </p>
    </li>
    <li class="weui_extra_area">
        <a href="">查看详情</a>
    </li>
</li>

<article class="weui_article">
    <h1>大标题</h1>
    <section>
        <h2 class="title">章标题</h2>
        <section>
            <h3>1.1 节标题</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute</p>
        </section>
        <section>
            <h3>1.2 节标题</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </section>
</article>

<i class="weui_icon_msg weui_icon_success"></i>
<i class="weui_icon_msg weui_icon_info"></i>
<i class="weui_icon_msg weui_icon_warn"></i>
<i class="weui_icon_msg weui_icon_waiting"></i>
<i class="weui_icon_safe weui_icon_safe_success"></i>
<i class="weui_icon_safe weui_icon_safe_warn"></i>
<li class="icon_sp_area">
    <i class="weui_icon_success"></i>
    <i class="weui_icon_success_circle"></i>
    <i class="weui_icon_success_no_circle"></i>
    <i class="weui_icon_info"></i>
    <i class="weui_icon_waiting"></i>
    <i class="weui_icon_waiting_circle"></i>
    <i class="weui_icon_circle"></i>
    <i class="weui_icon_warn"></i>
    <i class="weui_icon_download"></i>
    <i class="weui_icon_info_circle"></i>
    <i class="weui_icon_cancel"></i>
</li>

<li class="bd spacing">
    <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉ActionSheet</a>
</li>
<li id="actionSheet_wrap">
    <li class="weui_mask_transition" id="mask"></li>
    <li class="weui_actionsheet" id="weui_actionsheet">
        <li class="weui_actionsheet_menu">
            <li id="actionsheet1" class="weui_actionsheet_cell">示例菜单1</li>
            <li id="actionsheet2" class="weui_actionsheet_cell">示例菜单2</li>
            <li id="actionsheet3" class="weui_actionsheet_cell">示例菜单3</li>
            <li id="actionsheet4" class="weui_actionsheet_cell">示例菜单4</li>
        </li>
        <li class="weui_actionsheet_action">
            <li class="weui_actionsheet_cell" id="actionsheet_cancel">取消</li>
        </li>
    </li>
</li>
<script>
$("#showActionSheet").click(function(){
    var mask = $("#mask");
    var weuiActionsheet = $("#weui_actionsheet");
    mask.show().addClass('weui_fade_toggle').click(function(){
        hideActionSheet(weuiActionsheet, mask);
    });
    $("#actionsheet_cancel").click(function(){
        hideActionSheet(weuiActionsheet, mask);
    });
    $("#actionsheet1").add($("#actionsheet2")).add($("#actionsheet3")).add($("#actionsheet4")).unbind("click");
    $("#actionsheet1").click(function(){
        alert("点击了示例菜单1");
        hideActionSheet(weuiActionsheet, mask);
    });
    $("#actionsheet2").click(function(){
        alert("点击了示例菜单2");
        hideActionSheet(weuiActionsheet, mask);
    });
    $("#actionsheet3").click(function(){
        alert("点击了示例菜单3");
        hideActionSheet(weuiActionsheet, mask);
    });
    $("#actionsheet4").click(function(){
        alert("点击了示例菜单4");
        hideActionSheet(weuiActionsheet, mask);
    });
    weuiActionsheet.addClass('weui_actionsheet_toggle');
    weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

    var hideActionSheet = function(weuiActionsheet, mask){
        weuiActionsheet.removeClass("weui_actionsheet_toggle");
        mask.removeClass("weui_fade_toggle");
        weuiActionsheet.on('transitionend', function() {
            mask.hide();
        }).on('webkitTransitionEnd',
        function() {
            mask.hide();
        });
    }
});
</script>