使用jqMobi开发app基础：Side Menu详解手机开发

    Side Menu作为内容左侧的导航菜单，对于内容很多的app来说很有用，可以通过滑动出现Side Menu，向右滑动出现Side Menu，向左滑动隐藏Side Menu。

    Side Menu作为AF UI的一部分，并没有包含在appframework.ui.min.js中，因此为了使用 Side Menu必须包含相关插件的js。

除了基础的appframework.js，appframework.ui.min.js还需要如下js：

<script type="text/javascript"> 
 
        if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) { 
            var script = document.createElement("script"); 
            script.src = "plugins/af.desktopBrowsers.js"; 
            var tag = $("head").append(script);//为了在桌面浏览器中测试，添加此段脚本，在智能设备中可以去掉 
        } 
        </script> 
         <script type="text/javascript" charset="utf-8" src="./plugins/af.css3animate.js"></script> 
         <script type="text/javascript" charset="utf-8" src="./plugins/af.passwordBox.js"></script> 
          <script type="text/javascript" charset="utf-8" src="./plugins/af.scroller.js"></script> 
            <script type="text/javascript" charset="utf-8" src="./plugins/af.touchEvents.js"></script> 
          <script type="text/javascript" charset="utf-8" src="./plugins/af.touchLayer.js"></script> 
        <script type="text/javascript" charset="utf-8" src="./plugins/af.popup.js"></script> 
           <script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script> 
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/flip.js"></script> 
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/pop.js"></script> 
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/slide.js"></script> 
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideDown.js"></script> 
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideUp.js"></script> 
        <script type="text/javascript" charset="utf-8" src="./plugins/af.slidemenu.js"></script>

定义Side Menu 其实就是定义一个nav标签。

位置在div id=”afui”>内部，<div id=”content”>同级，但在<div id=”content”>,<div id=”navbar” >之下。

官方文档上说：

To enable a side menu in your app, add <nav> objects to the DOM and set id attributes. These should be declared at the bottom of your HTML, below the #content and #navbar div elements.

但我发现没有#navbar div好像也可以使用。

例如：

 <nav id="main"> 
            <div class='title'>左侧导航</div>  
                  <ul>  
                  <li ><a class="icon home mini" href="#main">首页</a></li>  
                   </ul>  
                   <ul>  
                  <li ><a class="icon home mini" href="#about">关于我们</a></li>  
                   </ul>               
           </nav>   

可以定义多个，以便于给不同的panel设置不同的Side Menu

例如：

<-- first side menu is the default --> 
<nav id="main"> 
    Default side menu 
</nav> 
  
<nav id="second"> 
    Second menu 
</nav>

给panel设置
Side Menu，是通过属性data-nav

例如：

<div class="panel" data-nav="main" title="Test"> 
  
</div>  
<div class="panel" data-nav="second" title="Test 2"> 
</div>

官方文档参考