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.

1. //psuedo code
2. var dispatchPanelEvent:function(fnc,myPanel){
3. if (typeof fnc === "string" && window[fnc]) {
4. return window[fnc](myPanel);
5. }
6. else if(fnc.indexOf(".")!==-1){
7. var scope=window,items=fnc.split("."),len=items.length,i=0;
8. for(i;i<len-1;i++){
9. scope=scope[items[i]];
10. if(scope===undefined) return;
11. }
12. return scope[items[i]](myPanel);
13. }
14. };
15. $(document).on("panelload",function(e){
16. var hasLoad=$(e.target).attr("data-load");
17. return dispatchPanelEvent(hasLoad,e.target);
18. })
19. $(document).on("panelunload",function(e){
20. var hasLoad=$(e.target).attr("data-unload");
21. return dispatchPanelEvent(hasLoad,e.target);
22. })

结构：

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