zhouchanghao
/
ZHadmin
forked from jifuning/ZHadmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.css">
    <link rel="stylesheet" href="http://m.ydui.org/css/ydui.css" />
    <!-- 引入YDUI自适应解决方案类库 -->
    <script src="http://m.ydui.org/js/ydui.flexible.js"></script>
    <style>
        html,
        body {
            background-color: #efeff4;
        }
        p {
            margin: 0;
        }
        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }
        .mui-off-canvas-right {
            color: #fff;
        }
        .title {
           margin: 16px 15px 10px;
        }
        .title+.content {
            margin: 10px 15px 35px;
            color: #bbb;
            text-indent: 1em;
            font-size: 14px;
            line-height: 24px;
        }
        input {
            color: #000;
        }
        .buoy{
            width: 50px;
            height: 50px;
            line-height: 50px;
            position: fixed;
            top: 40%;
            left: 0;
            z-index: 2;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            padding: 0;
            text-align: center;
            box-shadow: 0 0 4px 1px #D1D2D2;
            background: #fff;
        }
        .buoy a{
            display: block;
        }
        .swiper-slide img{
            width: 100%;
            height: 209px;
            border-radius: 5px;
        }
        .banner-tit{
            position: absolute;
            bottom: 0;
            left: 0;
            height: 33px;
            line-height: 33px;
            text-indent: 5px;
            color: #fff;
            background: rgba(0,0,0,.5);
            width: 100%;
            font-size: 12px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .banner-tit p{
            color: #fff;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .swiper-pagination{
            bottom: 5px;
            right: 5px;
            width: auto;
            color: white;
            text-align: right;
            font-size: 12px;
        }
        .swiper-slide a{
            height: 100%;
            display: block;
        }
        .mui-scroll-wrapper{
            overflow-y: scroll !important;
        }
    </style>
</head>

<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="title">侧滑导航</div>
                <div class="title" style="margin-bottom: 25px;">侧滑列表示例</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>
        </div>
    </aside>
    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll" id="contents">

            </div>
        </div>
        <!--目录-->
        <button class="buoy">
            <a id="offCanvasBtn" href="#offCanvasSide">目录</a>
        </button>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/base64.js"></script>
<script src="js/PDFObjeck.js"></script>
<script src="js/function.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
      // autoplay: true,
      loop:true,
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      autoplay: {
        disableOnInteraction: false
      }
    });
    mui.init({
        swipeBack: false,
    });
    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    //移动效果是否为整体移动
    var moveTogether = false;
    offCanvasSide.classList.remove('mui-transitioning');
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    //变换侧滑动画移动效果；
    // document.getElementById('offCanvasShow').addEventListener('tap', function() {
    //     offCanvasWrapper.offCanvas('show');
    // });
    // document.getElementById('offCanvasHide').addEventListener('tap', function() {
    //     // offCanvasWrapper.offCanvas('close');
    // });
    //主界面和侧滑菜单界面均支持区域滚动；
    // mui('#offCanvasSideScroll').scroll();
    // mui('#offCanvasContentScroll').scroll();
</script>
</body>

</html>