heqingtong
heqingtong
  • 发布:2016-07-09 17:20
  • 更新:2016-07-09 17:20
  • 阅读:1280

对MUI的一些建议

分类:MUI
mui

建议把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>  

以上结构公用的部分就能单独出来。

2016-07-09 17:20 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复