建议把mui-content 做为主内容体。把侧栏和一下弹窗等等都放到mui-content外面。以便于公用。不然的话每个页面都需要重写很多相同的代码。比如结构为:
<header class="mui-bar mui-bar-nav">
<a id="icon-menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">div模式下拉菜单</h1>
</header>
<nav></nav>
<div class="mui-content">
----- 主体内容部分------
<div>
--------------之外放 侧栏啊 弹窗啊 等等mui-content之外的操作 比如把侧栏放外面
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<aside id="offCanvasSide" class="mui-off-canvas-right">
<div class="mui-scroll">
<div class="title">侧滑导航</div>
<div class="content">
<p style="margin: 10px 15px;">
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
</p>
</div>
<div class="title">侧滑列表示例</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
</ul>
</div>
</aside>
</div>
以上结构公用的部分就能单独出来。
0 个回复