appframework3.0（JQmobi）入门教程

2015-03-31 22:02 2011人阅读 评论(0) 收藏 举报

版权声明：本文为博主原创文章，未经博主允许不得转载。

appframework3.0好像是3月24日发布的，今天31号，发现和之前的appframework2.1 || 2.2并不同。

jqmobi3.0中不在支持 data-load/data-unload 属性。

如果想继续用 以前的 data-load/data-unload  可以复制一下代码放到您的程序中

They are renamed, and there is now "before" events too.  If you liked the old way, you could always write a plugin to enable it.

//psuedo code
var dispatchPanelEvent:function(fnc,myPanel){
    if (typeof fnc === "string" && window[fnc]) {
        return window[fnc](myPanel);
    }
    else if(fnc.indexOf(".")!==-1){
        var scope=window,items=fnc.split("."),len=items.length,i=0;
        for(i;i<len-1;i++){
            scope=scope[items[i]];
            if(scope===undefined) return;
        }
        return scope[items[i]](myPanel);
    }
};
$(document).on("panelload",function(e){
   var hasLoad=$(e.target).attr("data-load");

   return dispatchPanelEvent(hasLoad,e.target);
})

$(document).on("panelunload",function(e){
   var hasLoad=$(e.target).attr("data-unload");

   return dispatchPanelEvent(hasLoad,e.target);
})

结构：

id="mainview" 肯定是 app页面的主视图。

id="splashscreen" 是加载页面过渡的代码块。

在id="mainview" 中，直接header 和 footer 应该是默认的公共顶部和底部。nav是左右导航，id=left做导航，id=right是右导航。

左右导航中还包含header和footer，可以以class=pages再分多个页面。

data-include="“包含一个子页面。

data-left-drawer="left" 声明左导航。

class="panel"声明一个画面。

data-title="Main"是当前画面顶部标题。如果没有可能会继承上一级的header。

data-selected="true" 默认选中这个画面。

 data-tab="navbar_ui" 选中的id=navbar_ui的ID。

 data-footer="footerui"自定义底部导航。

title=""也是标题，出现在顶部，不知道和data-title="Main"区别。

data-menu-close 关闭左右导航。

data-menu-close data-right-menu="right" 关闭又侧导航。

onclick="$.afui.drawer.hide('#left')" 关闭id=left的导航。

$.afui.drawer.show('#right','right','push')打开右导航像推动效果。

data-transition="slide" 转场效果为slide