[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>
问题:
目前,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>
[Learn AF3系列] 第六章 App Framework 3.0中的内置矢量图标
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。