注册 登录
lobtao
lobtao
  • 发布：2014-10-22 20:50
  • 更新：2014-10-28 12:21
  • 阅读：1869

nav和aside在同一界面时，nav不会居底

分类：MUI
mui

如题。nav和aside在同一界面时，nav不会居底

2014-10-22 20:50 负责人:无 分享

没有找到相关结果

    已邀请:
    DCloud_UNI_CHB

    DCloud_UNI_CHB

    aside上加了哪些class？有完整代码吗？

    2014-10-27 19:47 分享
    lobtao

    lobtao (作者)

    {{{
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>MUI测试</title>
    <meta content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style"> 

    <link href="css/mui.css" rel="stylesheet"/>  
<script src="js/mui.js" charset="utf-8"></script>  
<script src="js/zepto.js" charset="utf-8"></script>  
<script type="text/javascript">  
    //简单处理label点击触发radio或checkbox  
    window.addEventListener('tap', function (event) {  
        var target = event.target;  
        for (; target && target !== document; target = target.parentNode) {  
            if (target.tagName && target.tagName === 'LABEL') {  
                var parent = target.parentNode;  
                if (parent.classList && (parent.classList.contains('mui-radio') || parent.classList.contains('mui-checkbox'))) {  
                    var input = parent.querySelector('input');  
                    if (input) {  
                        input.click();  
                    }  
                }  
            }  
        }  
    });  
    mui.init();  

</script>

    </head>
    <body>

    <style>
    .mui-control-content-my {
    display: none;
    } 

    .mui-control-content-my.mui-active {  
    display: block;  
}  

.mui-control-content-my h3 {  
    padding-top: 100px;  
    text-align: center;  
}

    </style>

    <div class="mui-off-canvas-wrap" >
    <div class="mui-inner-wrap">
    <aside class="mui-off-canvas-left" id="offCanvas">
    <button class="mui-btn mui-btn-primary mui-btn-block" id="offCanvasHide">
    关闭侧滑菜单(js call)
    </button>
    <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>
    </ul>
    </aside>

    <header class="mui-bar mui-bar-nav">
    <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
    <a class="mui-icon mui-icon-bars mui-pull-left" href="#offCanvas"></a> 

    <h1 class="mui-title">选项卡（Tab）</h1>

    </header>
    <!--<header class="mui-bar mui-bar-nav">-->
    <!--<a class="mui-icon mui-icon-bars mui-pull-left" href="#offCanvas"></a>-->
    <!--<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>-->
    <!--<h1 class="mui-title">右滑导航</h1>-->
    <!--</header>-->

    <nav class="mui-bar mui-bar-tab ">
    <a href="#tabbar" class="mui-tab-item mui-active">
    <span class="mui-icon mui-icon-phone"></span>
    <span class="mui-tab-label">电话咨询</span>
    </a>
    <a href="#tabbar-with-chat" class="mui-tab-item">
    <span class="mui-icon mui-icon-email"></span>
    <span class="mui-tab-label">短信咨询</span>
    </a>
    <a href="#tabbar-with-contact" class="mui-tab-item">
    <span class="mui-icon mui-icon-contact"></span>
    <span class="mui-tab-label">通讯录</span>
    </a>
    <a href="#tabbar-with-map" class="mui-tab-item">
    <span class="mui-icon mui-icon-map"></span>
    <span class="mui-tab-label">查看地图</span>
    </a>
    </nav>

    <div class="mui-content mui-off-canvas-height-fixed">
    <div class="mui-control-content-my mui-active" id="tabbar">
    <ul class="mui-table-view mui-grid-view mui-grid-9">
    <li class="mui-table-view-cell mui-media mui-col-xs-4">
    <span class="mui-icon mui-icon-home"></span> 

        <div class="mui-media-body">home</div>  
</li>  

<li class="mui-table-view-cell mui-media mui-col-xs-4">  
    <span class="mui-icon mui-icon-search"></span>  

    <div class="mui-media-body">search</div>  
</li>  

<li class="mui-table-view-cell mui-media mui-col-xs-4">  
    <span class="mui-icon mui-icon-weixin"></span>  

    <div class="mui-media-body">weixin</div>  
</li>  
<li class="mui-table-view-cell mui-media mui-col-xs-4">  
    <span class="mui-icon mui-icon-home"></span>  
</li>  

<li class="mui-table-view-cell mui-media mui-col-xs-4">  
    <span class="mui-icon mui-icon-search"></span>  
</li>  

<li class="mui-table-view-cell mui-media mui-col-xs-4">  
    <span class="mui-icon mui-icon-weixin"></span>  
</li>

    </ul>

    <div class="mui-slider">
    <div class="mui-slider-group">
    <div class="mui-slider-item">
    <ul class="mui-table-view mui-grid-view mui-grid-9">
    <li class="mui-table-view-cell mui-media mui-col-xs-4">
    <a> 

                        <span class="mui-icon mui-icon-home"></span>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-search"></span>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-weixin"></span>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-home"></span>  

                    <div class="mui-media-body">home</div>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-search"></span>  

                    <div class="mui-media-body">search</div>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-weixin"></span>  

                    <div class="mui-media-body">weixin</div>  
                </a>  
            </li>  

        </ul>  
    </div>  

    <div class="mui-slider-item">  
        <ul class="mui-table-view mui-grid-view mui-grid-9">  
            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-home"></span>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-search"></span>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-weixin"></span>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-home"></span>  

                    <div class="mui-media-body">home</div>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-search"></span>  

                    <div class="mui-media-body">search</div>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-weixin"></span>  

                    <div class="mui-media-body">weixin</div>  
                </a>  
            </li>  

        </ul>  
    </div>  

    <div class="mui-slider-item">  
        <ul class="mui-table-view mui-grid-view mui-grid-9">  
            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-home"></span>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-search"></span>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-weixin"></span>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-home"></span>  

                    <div class="mui-media-body">home</div>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-search"></span>  

                    <div class="mui-media-body">search</div>  
                </a>  
            </li>  

            <li class="mui-table-view-cell mui-media mui-col-xs-4">  
                <a>  

                    <span class="mui-icon mui-icon-weixin"></span>  

                    <div class="mui-media-body">weixin</div>  
                </a>  
            </li>  

        </ul>  
    </div>  
</div>  
<div class="mui-slider-indicator">  
    <div class="mui-indicator mui-active">  
    </div>  
    <div class="mui-indicator">  
    </div>  
    <div class="mui-indicator">  
    </div>  
</div>

    </div>

    </div>

    <div class="mui-control-content-my" id="tabbar-with-chat">
    <div class="mui-content-padded">
    <h5>登录框</h5> 

        <form class="mui-input-group">  
        <div class="mui-input-row">  
            <label>用户名：</label>  
            <input type="text" placeholder="请输入用户名">  
        </div>  
        <div class="mui-input-row">  
            <label>密&nbsp;&nbsp;&nbsp;码：</label>  
            <input type="text" placeholder="请输入密码">  
        </div>  
        <div class="mui-button-row">  
            <button class="mui-btn mui-btn-primary">确定</button>  
            &nbsp;&nbsp;  
            <button class="mui-btn">取消</button>  
        </div>  
    </form>  
</div>

    </div>
    <div class="mui-control-content-my" id="tabbar-with-contact">
    <ul class="mui-table-view mui-grid-view mui-grid-9">
    <li class="mui-table-view-cell mui-media mui-col-xs-4">
    <span class="mui-icon mui-icon-home"></span> 

            <div class="mui-media-body">home</div>  
    </li>  

    <li class="mui-table-view-cell mui-media mui-col-xs-4">  
        <span class="mui-icon mui-icon-search"></span>  

        <div class="mui-media-body">search</div>  
    </li>  

    <li class="mui-table-view-cell mui-media mui-col-xs-4">  
        <span class="mui-icon mui-icon-weixin"></span>  

        <div class="mui-media-body">weixin</div>  
    </li>  
    <li class="mui-table-view-cell mui-media mui-col-xs-4">  
        <span class="mui-icon mui-icon-home"></span>  
    </li>  

    <li class="mui-table-view-cell mui-media mui-col-xs-4">  
        <span class="mui-icon mui-icon-search"></span>  
    </li>  

    <li class="mui-table-view-cell mui-media mui-col-xs-4">  
        <span class="mui-icon mui-icon-weixin"></span>  
    </li>  
</ul>

    </div>
    <div class="mui-control-content-my" id="tabbar-with-map"> 

    <form class="mui-input-group">  
    <div class="mui-input-row mui-checkbox mui-left">  
        <label>CheckBox</label>  
        <input name="check" type="checkbox">  

    </div>  

    <div class="mui-input-row mui-checkbox mui-right">  
        <label>CheckBox</label>  
        <input name="check" type="checkbox" checked>  
    </div>  
</form>  

<button class="mui-btn mui-btn-primary mui-btn-block" id="offCanvasShow">  
    显示侧滑菜单(js call)  
</button>

    </div>
    </div>

    </div>

    <!--<div class="mui-off-canvas-backdrop"></div>-->

    </div>

    <script type="text/javascript">
    $(function () { 

        $('.mui-tab-item').on('tap', function () {  
        console.log($(this).html());  
        var strTemp = $(this).attr('href');  
        strTemp = strTemp.substring(1, strTemp.length);  
        $('.mui-control-content-my').removeClass('mui-active');  
        $('#' + strTemp).addClass('mui-active');  
    });  

    mui.init({  
        swipeBack: false  
    });

    // var offCanvasContainer = document.querySelector('.mui-off-canvas-wrap');
    // var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
    var offCanvas = mui('#offCanvas');
    // document.getElementById('switch').addEventListener('toggle', function(event) {
    // if (event.detail.isActive) { //整体滑动时，侧滑菜单在inner-wrap内
    // offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
    // } else { //仅主内容滑动时，侧滑菜单在off-canvas-wrap内
    // offCanvasContainer.insertBefore(offCanvas[0], offCanvasContainer.firstElementChild)
    // }
    // });
    document.getElementById('offCanvasShow').addEventListener('tap', function () {
    //offCanvas.offCanvas('toggle')//toggle or show;
    offCanvas.offCanvas('show');
    console.log('show');
    });
    document.getElementById('offCanvasHide').addEventListener('tap', function () {
    //offCanvas.offCanvas('toggle')//toggle or hide;
    offCanvas.offCanvas('hide');
    console.log('hide');
    });
    });
    </script>

    <script>

    </script>

    </body>
    </html>
    }}}

    2014-10-27 23:39 分享
    DCloud_UNI_FXY

    DCloud_UNI_FXY

    参考hello-mui里边的offcanvas-with-left.html代码。

    2014-10-28 11:10 分享
    DCloud_UNI_CHB

    DCloud_UNI_CHB

    你这个页面是要使用可拖拽式侧滑导航是吗？

    简单解决方案，自定义css：
    {{{
    .mui-off-canvas-wrap .mui-inner-wrap .mui-bar {
    position: fixed;
    }
    }}}

    2014-10-28 12:21 分享
    为什么被折叠? 0 个回复被折叠

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

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报