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