appframework学习--mask toast

标签：app-framework   jqmobi   toast   mask   

mask使用很简单，官网有介绍：

传入显示的文字和停留时间即可：

function showMask(text,time) {
    $.ui.showMask(text);
    window.setTimeout(function () {
        $.ui.hideMask();
    }, time);
}</span>

由于官网没有提供toast功能，研究了一下，添加几行代码即可：

上面几个文件的#afui_mask { position:absolute;top:45%;z-index:999999; }下面添上
   

#afui_toast { position:absolute;top:88%;z-index:999999; }

这个js文件

hideMask: function() {
     $.query("#afui_mask").hide();
 },</span>

这个函数下面添加以下几个函数：

 /**
         * Show the toast
         */
        showToast: function(text) {
            $.query("#afui_toast>h1").html(text);
            $.query("#afui_toast").show();
        },
        /**
         * Hide the toast
         */
        hideToast: function() {
            $.query("#afui_toast").hide();
        },

（别忘记{后面的，否则不能用）

//setup ajax mask
            this.addContentDiv("afui_ajax", "");
            var maskDiv = $.create("div", {
                id: "afui_mask",
                className: "ui-loader",
                html: "<span class='ui-icon ui-icon-loading spin'></span><h1>Loading Content</h1>"
            }).css({
                "z-index": 20000,
                display: "none"
            });
            document.body.appendChild(maskDiv.get(0));

这个js下面加入：

            //toast
            var toastDiv = $.create("div", {
                id: "afui_toast",
                className: "ui-loader",
                html: "</span><h1>Loading Content</h1>"
            }).css({
                "z-index": 20000,
                display: "none"
            });
            document.body.appendChild(toastDiv.get(0));

到此为止就可以像mask一样的使用toast了，下面是效果图：

function showToast(text,time) {
    $.ui.showToast(text);
    window.setTimeout(function () {
        $.ui.hideToast();
    }, time);
}

appframework学习--mask toast,布布扣,bubuko.com

appframework学习--mask toast

标签：app-framework   jqmobi   toast   mask   

原文地址：http://blog.csdn.net/vincentblog/article/details/38336519