[Learn AF3]第五章 App Framework 3组件之Drawer——Side Menu

Drawer——Side menu

---

组件名称：Drawer

    说明：af3中的side menu和af2中有很大变化，af3中的side menu实际上是通过插件$.afui.drawer来实现的

    方法：

show (id, position, string)         显示side menu，参数中指定的是nav的 id, 要显示的位置：left、right，指定变换效果：cover,reveal,push
hide (string,string)                隐藏Side Menu，参数为nav的id和位置，也可以无参数调用，此时自动隐藏当前打开的drawer

属性：无

    事件：无

    使用：声明方法是在view元素中添加nav元素：<nav id="menu1"><header></header><ul><li><a href=""></a></li></ul></nav>

side menu可以通过两种方法打开：

方法一，在header中添加class="menuButtong"的锚元素A，这个menuButton是自动右对齐的。

<a class="menuButton" data-right-menu="menuMain" data-transition="reveal"></a>

方法二，通过脚本打开：

<a class="at-right noborder-button button icon tools" href="#" onclick="$.afui.drawer.show('#menuMain','left','cover')"></a>

side menu的三种动画效果说明：

　　“cover”   side menu从边上逐渐打开，并逐渐覆盖主画面

　　“push”   side menu从边上逐渐打开，并随着推开主画面

　　”reveal“  主画面逐渐向一边移开，并逐渐露出仿佛一直位于下面的side menu（side menu并不动，只是逐渐曝露出来）。

side menu存在问题：

目前，af3中的side menu还存在很大问题，至少如果按照官网所说的声明为subview的方法：

官方代码

这种方式，在我这里始终显示不正常，一直没有试验成功，目前只能使用如下方式声明：

             <nav  id="menuMain" class="bb" onclick="$.afui.drawer.hide()">
 
                <header><h1>Main View Menu</h1></header>
 
                <ul class="list inset">
                    <li><a class="icon " href="#page2-1" data-transition="slide">goto page2-1</a></li>
                     <li><a class="icon " href="#" onclick="$.afui.loadContent('#page2-2',false,false,'slide');" data-transition="slide">goto page2-2</a></li>
                </ul>
 
             </nav>

而且，在切换到其他page的时候，sidemenu也没有自动关闭，因此在上面代码中还添加了关闭代码。

实例代码：下面的完整代码中演示了完整的side menu使用方法

---

<div class="view active" id="viewMain">
            <header>
                <h1 class="title">Main view</h1>
                <a class="menuButton" data-right-menu="menuMain" data-transition="reveal"></a>
                <a class="at-right noborder-button button icon tools" href="#" onclick="$.afui.drawer.show('#menuMain','left','cover')"></a>
 
            </header>
            <div class="pages">
                <div class="panel active" id="page1_1">
                    <p>this is page in main view</p>
                </div>
            </div>
            <footer>
                <a  data-transition="up" class="icon html5" onclick="$.afui.loadContent('#page2-2',false,false,'up');">view2</a>
            </footer>
            <nav  id="menuMain" class="bb" onclick="$.afui.drawer.hide()">
               <!-- <div class="view active" id="menuMain_view">-->
                <header><h1>Main View Menu</h1></header>
                <!--<div class="pages">
                    <div class="panel active" id="menuMain_view_page">
                -->
                <ul class="list inset">
                    <li><a class="icon " href="#page2-1" data-transition="slide">goto page2-1</a></li>
                     <li><a class="icon " href="#" onclick="$.afui.loadContent('#page2-2',false,false,'slide');" data-transition="slide">goto page2-2</a></li>
                </ul>
                <!--   </div></div>
                </div> -->
             </nav>
        </div>
        <div class="view " id="view2">
            <header>
                <h1 class="title">view 22</h1>
                <a class=" icon menuButton" data-left-menu="menuRight2" data-transition="push"></a>
            </header>
            <div class="pages">
                <div class="panel active" id="page2-1"  >
                    <p>this is page in  view 2 page1</p>
                </div>
                <div class="panel active" id="page2-2"  >
                    <p>this is page in  view 2 page2</p>
                </div>
            </div>
            <footer>
                <a href="#page1_1" data-transition="down" class="icon home">back to main view</a>
                <a href="#page2-1" data-transition="slide:back" class="icon stack"></a>
                <a href="#page2-2" data-transition="slide" class="icon star"></a>
            </footer>
            <nav  id="menuRight2" class="bb" style="max-width: 250px;"  onclick="$.afui.drawer.hide()">
                 <header><h1>View2菜单</h1></header>
                  <ul class="list ">
                        <li ><a class="icon home" href="#page1_1">go page1-1</a></li>
                    </ul>
 
            </nav>
        </div>

---

第四章 App framework组件之Button   [Learn AF3系列]  第六章  App Framework 3.0中的内置矢量图标