appframework3.0(JQmobi)入门教程

时间:2023-03-09 07:07:31
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. })

结构:

appframework3.0(JQmobi)入门教程

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