今天实现9宫格菜单。先上效果图：

就是这个效果咯，界面不太美观，底部导航栏是为了苹果用户没有返回按键设计的，只是为了方便演示而已，没有做过多的处理。
首先先说一下这个底部导航栏如何实现，这个底部导航栏小编我写在了主页面index.html中，下面附上代码：

返回

注意到底部导航栏a标签有个id：“goBack”，存在即合理，这个id不会是空穴来风的啦。是为了实现点击返回到主页面的功能而存在的，举个例子，主页面加载9宫格，随便点击进入一个格子内，怎么返回到主页面呢？安卓机有返回按键，但是苹果机用户呢？没有返回按键，所以为了考虑到苹果用户，特意设置了一个返回按钮提供实现返回主页面的功能。

document.getElementById("goBack").addEventListener('tap', function() { 3 var webs = plus.webview.all(); 4 var k = webs.length; 5 if(k > 1) { 6 for(i = k - 1; i > 0; i--) { 7 if(webs[i].id.indexOf('tlwtt_') != -1) { 8 webs[i].hide('none'); 9 } else { 10 11 } 12 } 13 } 14 });

注意到上面这串代码的第7行会发现webs[i].id.indexOf('tlwtt_')，存在即合理。听小编慢慢道来哈，首先我们看到的主界面，实际上是由两个页面组合而成的，index.html和index_list.html页面，前面的博文有提到。如果没有字符串匹配的话，那么当我们在我们看到的主界面点击返回的时候，会返回到index.html页面，这个页面只有一个头部导航栏，这就很尴尬了。所以为了不能返回到index.html，特意设置id前缀。
实现9宫格效果，小编新建了一个页面为：grid_default.html页面，然后将index.html页面做一下修改，修改内容如下：

1 /** 2 * 加载另一个页面 mui.init({ 5 subpages: [{ id: "index_list", styles: { bottom: '50px' } 12 }] 13 });

修改部分为上面这串代码的第6行，之前是index_list.html页面。
新页面grid_default.html页面代码如下：

Home5EmailChatlocationSearchPhoneSettingaboutmore mui.init(); ); onPlusReady() {} ; () { 80 mui.openWindow({ styles: { }, 88 show: { }, 93 waiting: { } 97 }); 98 }); () { 101 mui.openWindow({ , , 104 styles: { , } 108 }); 109 }); () { 112 mui.openWindow({ , , 115 styles: { , } 119 }); 120 }); () { 123 mui.openWindow({ , , 126 styles: { , } 130 }); 131 }); () { 134 mui.openWindow({ , , 137 styles: { , } 141 }); 142 }); () { 145 mui.openWindow({ , , 148 styles: { , } 152 }); 153 }); () { 156 mui.openWindow({ , , 159 styles: { , } 163 }); 164 }); () { 167 mui.openWindow({ , , 170 styles: { , } 174 }); 175 }); () { 178 mui.openWindow({ , , 181 styles: { , } 185 }); 186 });

9宫格是<ul><li>实现，每一个图标均是一个<li>，那么给9宫格中的<li>赋予一个id值，然后监听tap事件，打开相应的页面。注意了，为了避免将index.html页面的头部导航栏以及底部导航栏遮盖住，所以需要设置styles，即：

styles: { top: '45px', bottom: '50px' }

这么做的目的是让其在界面中间部位显示出来。
提示一下，这几行代码一定要注意不要忘记：

1 mui.init(); document.addEventListener('plusready', onPlusReady, false); onPlusReady() {}

为了避免返回到index.html页面，小编加了一个id前缀，将其加在了grid_default.html页面中，如下所示：