Thinkcmf5+,後臺簡單適配ios+安卓手機【簡單修改】

1,添加css  【public\themes\admin_simpleboot3\public\assets\simpleboot3\css\simplebootadmin.css】

/**手機自定義**/

@media screen and (max-width:600px){
	.zhezhao{width:100%;height:100%;background-color:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;position:absolute;left:0px;	top:0px;display:none;z-index:8;}
	#sidebar{display:none; z-index: 9}
	.navbar{z-index: 10}
	.main-content {margin-left: 0px!important;}
	body{min-width: 100%!important;overflow-x: auto}
	#close-all-tabs-btn{display: none!important;}
	.pull-left{display: none}
	.light-blue{text-align: right}
	.simplewind-nav .light-blue:nth-child(2){display: none}
	.zhl_nav{display: block}
	.appiframe{position: static}
	.cmf_nav{display: none}
	.appiframe{width: 1px; min-width: 900px; *width: 100%;}
	#content{overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;}
}

2修改頁面【public\themes\admin_simpleboot3\admin\index\index.html】

//第188行左右
<!--<div class="navbar navbar-default">-->
    <!--<div class="container-fluid">-->
        <!--<div class="navbar-header">-->
            <!--<a href="{:url('admin/index/index')}" class="navbar-brand" style="min-width: 200px;text-align: center;">ThinkCMF</a>-->
            <!--<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">-->
                <!--<span class="icon-bar"></span>-->
                <!--<span class="icon-bar"></span>-->
                <!--<span class="icon-bar"></span>-->
            <!--</button>-->
        <!--</div>-->

//修改爲
<!--添加遮罩-->
<div class="zhezhao" id="zhezhao"></div>

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="{:url('admin/index/index')}" class="navbar-brand" style="min-width: 200px;text-align: center;">ThinkCMF</a>
            <!--修改按鈕-->
            <button class="navbar-toggle cmf_nav" type="button" data-toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button class="navbar-toggle zhl_nav" type="button" >
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

底部js中添加

  $('.zhl_nav').click(function () {
            $('#sidebar').toggle()
            $('.zhezhao').toggle()
        })
        $('.zhezhao').click(function () {
            $('#sidebar').hide()
            $('.zhezhao').hide()
        })

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章