抽屉菜单使用小结

时间：2015-07-23 19:56:30 阅读：154 评论：0 收藏：0 [点我收藏+]

抽屉菜单(不知道为什么叫这个名字)，在app中使用很频繁。appcan官网IDE中内置了该模板，我们只需要新建appcan页面，选择“抽屉”就可以实现。但是在创建页面后，会遇到两个恶心的问题需要手工解决，如下；
一、首先我们创建leftmenu页面，选择布局结构“抽屉”，内容为空，该页面为不添加任何内容。点击完成后，观察IDE左侧树形结构上会生成3个页面分别是 leftmenu.html , leftmenu_drawer.html, leftmenu_content.html 。这三个页面中 leftmenu_drawer.html 是第一个被加载的初始页面，接着我们需要修改config文件中的默认页面属性，将leftmenu_drawer.html作为默认页面。
然后在本地进行打包测试，我们会发现1个小问题，默认情况下弹出的左侧抽屉菜单没有图标，如图
没有图标，只有文字，打开调试信息发现
技术分享

有若干报错，全是找不到资源文件，自己仔细找一下ide下的文件夹会发现所有要用的资源文件都在leftmenu_drawer文件夹下面。这个是ide的错。解决办法很简单，把它复制到 leftmenu\css\下就能解决问题.
二、然后我们在用真机测试的时候会发现一个比较难堪的事情，当你点击 “回退”键的时候，不是先弹出一个对话框问你是否退出程序，而是直接把左侧的抽屉菜单弹出来了！接着你再点击“回退”键才会提示你“是否退出”应用！这个感觉太糟糕了！经过看论坛以前的帖子，解决办法如下：
在leftmenu.html 页面中，记住不是程序启动的第一个页面leftmenu_drawer.html ，而是在 leftmenu_drawer.html 的  appcan.ready()事件中进行 appcan.window.open() 事件的页面。我的程序中是 appcan.window.open("leftmenu", "leftmenu.html", 10, 256); 所以我要修改的就是 leftmenu.html 。打开它找到在 </body> 与 </html> 之间  找到 appcan.ready()事件，在此事件的最后一行，调用自定义的函数 addBackListener(); 接着在appcan.ready()外面，写addBackListener() 函数的内容，如下：
function addBackListener()
{
   //可以在这里加一句alter来判断是否被调用
   var plat = uexWidgetOne.getPlatform(); //判断平台类型
         if(plat)
         {
               uexWindow.onKeyPressed=function(keyCode)
               {
               //alert("onKeyPressed keyCode:" + keyCode);
               if(keyCode==0)
                  uexWidgetOne.exit(); //关键在这句，如果遇到返回键，就触发结束应用事件。据说在早期IDE中需要在线打包才能生效，
                                                      //现在的版本 v3.2.1 ，测试本地打包，该函数有效。
               }
               //alert("addBackListener setReportKey");
               uexWindow.setReportKey(0,1);
         }
}。

抽屉菜单使用小结

原文：http://blog.csdn.net/de_ruiyu/article/details/47026245

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)