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

appframework学习--mask toast

时间: 2024-10-22 20:11:25

appframework学习--mask toast的相关文章

app-framework学习--弹出mask(toast)时让ui失去焦点

作者:木尘 日期:2014-11-26 app-framework弹出mask(toast)时让ui失去焦点: showToast("hi!",2000); $.ui.blockUI(.1); setTimeout(function () { $.unblockUI(); }, 2000); 效果图:

appframework学习--nav的使用说明

app-framework学习--nav的使用说明: 语法: <nav id="mynav" style="background-image:url(../images/beijing.png)"> .... ... ... ... </nav> 在panel调用时,写法: <div title='***' id="***" class="panel" data-footer="foot

app-framework学习--panel传值

作者:木尘 日期:2015-01-17 app-framework学习--panel传值 关于appframework页面传值问题,好多人问,今天在这里给几点建议: 1.本地数据存取 /******** 本地数据存取函数 *********/ var localStorageUtils = { setParam : function(name, value) { localStorage.setItem(name, jsonUtils.toString(value)); }, getParam

appframework学习--appframework开发常见问题及解决方法(不定期更新)

1.页面跳转错误:Uncaught TypeError: Cannot read property 'afCSS3AnimateId' of undefined 原因:data-defer=""  跳转路径不正确 解决:路径正确即可 2.程序正在启动的圈圈一直 原因:转id冲突,出现重名id 解决:id冲突,出现重名id appframework学习--appframework开发常见问题及解决方法(不定期更新)

app-framework学习--popup的使用

app-framework的popup方法很好用,也很方便 下面使用法 $.ui.popup( {     title:"这里是title",     message:"主题信息",     cancelText:"关闭",     cancelCallback: function(){ //自己写的function可以在这里调用 console.log("关闭"); },     doneText:"确定"

Android学习:Toast复习总结

        Toast.makeText(this.getApplication(), "hello toast^^^^^^", 1).show(); 1特点: (1)没有焦点 (2)显示的时间有限,会自动消失. 2:参数说明: 第一个参数:应用的上下文Context Context提供了关于应用环境全局信息的接口.它是一个抽象类,它的实现由 Android系统所提供.通过context我们可以加载资源,获取由android提供的一些 服务类. 在Android当中一般有两种con

app-framework学习-----官网地址及demo下载地址

一起学习共同进步,加油!!! 官网地址:http://app-framework-software.intel.com/ 下载地址:http://download.csdn.net/detail/haozq2012/7635951

app-framework学习--iscrolldemo

作者:木尘 日期:2015-01-07 由于appframework本身的scroll比较坑所以有了这个demo 顺带为了加快程序使用 require.js 实现异步加载demo如下: 用了 iscroll5 require+ jquery+iscroll+afui 下载地址:http://download.csdn.net/detail/haozq2012/8337087 附带下载:下拉刷新上拉加载demo: http://download.csdn.net/detail/haozq2012/

app-framework学习--完美解决scroller 拖动问题

2步搞定,想给谁用就给谁用 第一步:panel  的div加上style="overflow:hidden" 第二步:要滚动的div  js调用以下: $("#ID").scroller({ verticalScroll:true, horizontalScroll:false, autoEnable:true}); ok,看看效果吧,哈哈... 欢迎加入appframework交流群:333492644 333492644333433349264492644