ADMINLTE 局部重新整理布局

整理于http://bbs.csdn.net/topics/391846671

公司背景管理系統選用了ADMINLTE，咋一看還不錯，但是最後都做完了，發現，哎呀不能局部重新整理啊，核心功能沒辦法實作了，不能換架構，隻能想辦法改了，百度了一下，這位部落客給的建議最好，分享給大家了，我自己把這個方法遺留的問題小小解決了下

首先，在首頁面的<div class="content-wrapper">區的<section class="content">中，增加一個iframe，如

<iframe id="menuFrame" name="menuFrame" src="main.htm" style="overflow:visible;" scrolling="yes" frame height="100%" width="100%"></iframe>

           

注意：其中的main.html是預設顯示的一個頁面。name為menuFrame。

然後在側邊欄的連結處，設定<a>标簽的target屬性為mengFrame，如下所示：

<li class="active">
    <a href="pages/test.html" target="_blank" rel="external nofollow"  target="menuFrame" >
     <i class="fa fa-link"></i> <span>使用者管理</span>
   </a>
  </li>
           

最後就還剩iframe這塊的高度問題，css控制不理想，是以推薦js控制

1.擷取到螢幕的高度window.screen.availHeight

2.用螢幕高度減去頭部的高度window.screen.availHeight -100px (100px改成你自己的頭部高度)

3.設定高度

var hh=window.screen.availHeight -100
    $('.content').css('height',hh+'px')
//.content是你iframe的父級元素
           

如果你的ifram需要自适應高度，則用以下方法設定高度

//iframe高度
//'frameContent'子元素頁面的最外層id
    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.getElementById('frameContent').scrollHeight +20 || iframeWin.document.body.scrollHeight;
            }
        }
    };

    var iframe= document.getElementById('menuFrame');
    iframe.onload = function () {
        setIframeHeight(iframe);
    };
           

大功告成，現在局部重新整理爽歪歪咯