MUI中等待框的H5实现

niunan

浏览: 719489 次
性别:
来自: 南宁

最近访客更多访客>>

u012363178

abc123

Gootearsine

草料场

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

MUI没有内置的那个弹出转圈圈的那个等待框，那个nativeui.showwaiting是只能用于app中的，不能用在H5网页中的，网上找了下，找到个别人已经写好的，自己测试了下没问题，先记下来

@{
    Layout = null;
    Niunan.GRWX.Model.Product product = ViewBag.product;
    Niunan.GRWX.Model.Userinfo user = ViewBag.user;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>兑换礼品</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="/content/css/mui.min.css" rel="stylesheet" />
    <link href="/content/css/theone.css" rel="stylesheet" />
    <style>
        html,
        body {
            background-color: #efeff4;
        }

        .title {
            padding: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
            background-color: #fff;
        }
    </style>
    <style>
        /*----------------mui.showLoading---------------*/
        .mui-show-loading {
            position: fixed;
            padding: 5px;
            width: 120px;
            min-height: 120px;
            top: 45%;
            left: 50%;
            margin-left: -60px;
            background: rgba(0, 0, 0, 0.6);
            text-align: center;
            border-radius: 5px;
            color: #FFFFFF;
            visibility: hidden;
            margin: 0;
            z-index: 2000;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            opacity: 0;
            -webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

            .mui-show-loading.loading-visible {
                opacity: 1;
                visibility: visible;
                -webkit-transform: scale(1) translate(-50%, -50%);
                transform: scale(1) translate(-50%, -50%);
            }

            .mui-show-loading .mui-spinner {
                margin-top: 24px;
                width: 36px;
                height: 36px;
            }

            .mui-show-loading .text {
                line-height: 1.6;
                font-family: -apple-system-font,"Helvetica Neue",sans-serif;
                font-size: 14px;
                margin: 10px 0 0;
                color: #fff;
            }

        .mui-show-loading-mask {
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }

        .mui-show-loading-mask-hidden {
            display: none !important;
        }
    </style>
</head>

<body>

 

    <div class="mui-content user-password user-addcard">
        <form class="mui-input-group" style="margin-top: 0;">
            <div class="mui-input-row">
                <label>礼品名称</label>
                <span style="line-height:38px;">@product.proname</span>
            </div>
            <div class="mui-input-row">
                <label>用户名</label>
                <span style="line-height:38px;">@user.username</span>
            </div>
            <div class="mui-input-row">
                <label>手机</label>

                <input type="text" class="mui-input-clear" id="mobile" name="mobile" value="@user.mobile" />
            </div>
            <div class="mui-input-row">
                <label>收货地址</label>
                <input type="text" class="mui-input-clear" id="address" name="address" value="@user.address" />
            </div>
            <div class="enterbtn-wr">
                <button type="button" class="mui-btn mui-btn-danger enterbtn" id="btn1">兑换礼品</button>
                @Html.AntiForgeryToken()
                <input type="hidden" id="proid" value="@product.id" />
                <input type="hidden" id="userid" value="@user.id" />
            </div>
        </form>
    </div>


    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/mui.min.js"></script>
    <script>
        //扩展mui.showLoading http://ask.dcloud.net.cn/article/12856?item_id=12464
        (function ($, window) {
            //显示加载框
            $.showLoading = function (message, type) {
                if ($.os.plus && type !== 'div') {
                    $.plusReady(function () {
                        plus.nativeUI.showWaiting(message);
                    });
                } else {
                    var html = '';
                    html += '<i class="mui-spinner mui-spinner-white"></i>';
                    html += '<p class="text">' + (message || "数据加载中") + '</p>';

                    //遮罩层
                    var mask = document.getElementsByClassName("mui-show-loading-mask");
                    if (mask.length == 0) {
                        mask = document.createElement('div');
                        mask.classList.add("mui-show-loading-mask");
                        document.body.appendChild(mask);
                        mask.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
                    } else {
                        mask[0].classList.remove("mui-show-loading-mask-hidden");
                    }
                    //加载框
                    var toast = document.getElementsByClassName("mui-show-loading");
                    if (toast.length == 0) {
                        toast = document.createElement('div');
                        toast.classList.add("mui-show-loading");
                        toast.classList.add('loading-visible');
                        document.body.appendChild(toast);
                        toast.innerHTML = html;
                        toast.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
                    } else {
                        toast[0].innerHTML = html;
                        toast[0].classList.add("loading-visible");
                    }
                }
            };

            //隐藏加载框
            $.hideLoading = function (callback) {
                if ($.os.plus) {
                    $.plusReady(function () {
                        plus.nativeUI.closeWaiting();
                    });
                }
                var mask = document.getElementsByClassName("mui-show-loading-mask");
                var toast = document.getElementsByClassName("mui-show-loading");
                if (mask.length > 0) {
                    mask[0].classList.add("mui-show-loading-mask-hidden");
                }
                if (toast.length > 0) {
                    toast[0].classList.remove("loading-visible");
                    callback && callback();
                }
            }
        })(mui, window);
    </script>
    <script>

        document.getElementById('btn1').addEventListener('tap', function () {
            var userid = document.getElementById('userid').value;
            var proid = document.getElementById('proid').value;
            var mobile = document.getElementById('mobile').value;
            var zipcode = '';
            var address = document.getElementById('address').value;
            var __RequestVerificationToken = document.getElementsByName('__RequestVerificationToken')[0].value;
            var postdata = { userid: userid, proid: proid, mobile: mobile, zipcode: zipcode, address: address, __RequestVerificationToken: __RequestVerificationToken };
            console.log(postdata);
            var url = "/order/add";
            mui.showLoading("正在提交..", "div");
            mui.post(url, postdata, function (data) {
                mui.hideLoading(function () { });//隐藏后的回调函数
                if (data.code == 0) {
                    mui.alert(data.msg, function () { location.href = "/userinfo/index" });
                } else {
                    mui.alert(data.msg);
                }
            }, 'json')
        })
    </script>


</body>

</html>

分享到：