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>
例如:
<-- first side menu is the default -->
<nav id="main">
Default side menu
</nav>
<nav id="second">
Second menu
</nav>
例如:
<div class="panel" data-nav="main" title="Test">
</div>
<div class="panel" data-nav="second" title="Test 2">
</div>