首页 > 代码库 > appframework学习--mask toast

appframework学习--mask toast

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);
}