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; }下面添上

   


main.css  大概497行

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

appframework.ui.js这个js文件大概1112行

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下面加入：大概2030行

   

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