[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中的内置矢量图标

posted @ 2015-03-10 01:35  柒零壹  阅读(1105)  评论(0编辑  收藏  举报