operamasks-ui2.0 +MVC4.0+EF5.0實戰之三 業務功能區域及標籤頁控制項（tab）

　　上篇中完成了功能菜單的樹形展現，下面說一下系統布局中心地區主業務功能區，通過使用標籤頁控制項來實現開啟多個tab頁的方式，以便進行系統操作和業務辦理。　　

　　首先說一下前台tab控制項的初始化工作，在Home控制器的Index視圖裡，做以下操作：

　　1.在head標籤內部加入對om相關css樣式表的引用

　　　　@Styles.Render("~/OperaMasksUI/css/default/om-default.css") 　

　　2.在</body>標籤之前加入以下對js檔案的引用

　　 @Scripts.Render("~/OperaMasksUI/js/jquery163.min.js")

　　@Scripts.Render("~/OperaMasksUI/js/operamasks-ui200.min.js")

　　3.在前面布局控制項的左側地區中，加入一個ul元素，如下所示

        <div id="center-panel" >            <div id="tabs">               <ul>                    <li><a href="#tab1">歡迎使用</a></li>                </ul>                <div id="tab1">                    歡迎使用MVC開發架構                </div>            </div>        </div>

　　　　注意：這裡如果只加<div id="tabs"></div>,則會導致功能異常，應該是om架構自身不完善性造成的，我這邊是加了一個預設tab放置歡迎資訊，當然你也可以放網站地圖或者系統說明。

　　4.編寫js如下：　

        function LoadTabs()        {            $('#tabs').omTabs({                width: 'fit',                height: 'fit',                               closable: true            });        }

　　width和height預設屬性為auto，我改為了'fit'，即自動填滿滿父容器，這樣看上去能美觀一些。

　　以上操作完成了tab頁控制項初始化工作，下面重點來說一下與tree控制項配合實現多個業務功能頁面開啟的效果。

　　為樹節點添加點擊事件，點擊後自動在中心地區tab控制項裡自動添加一個tab頁，採取嵌入iframe方式，開啟功能菜單對應的url地址，以下這麼寫完成了準系統：　　

function TreeNodeClick(node, event) {      $("#tabs").omTabs('add', {      title: node.text,      content: '<iframe scrolling="yes" frameborder="0"  src=' + node.url + ' style="width:100%;height:100%;"></iframe>',      closable: true,      tabId:node.id      });}

　　tab網頁標題直接使用功能菜單名稱即可，content裡嵌入iframe，添加tabId唯一性標識是用於下文來判斷當前點擊的功能菜單樹節點是否在tabs控制項中已開啟過。

　　之所以說完成準系統，還有一些細節需要考慮的，加入兩個邏輯，一是需要判斷樹節點是不是葉子節點，如果是菜單分類，則不執行操作，否則執行tab控制項相關操作。二是需要判斷當前tab控制項列表中是否已存在當前要開啟功能菜單，若不存在，添加新tab頁並在其中開啟，若已存在，則只需令其啟用，變為當前展現的tab頁即可。

　　第一點判斷是否為分葉節點，這裡有種簡便的方式，即判斷節點url屬性是否為空白，若為空白，則認為是菜單分類。實際上，這裡並不是嚴格意義上判斷葉子節點邏輯，而是取巧的方式，不過這種方式具有更好的靈活性，例如，若菜單分類也加了url屬性，則同樣可以點擊開啟對應的功能頁面。

　　第二點判斷是否已開啟過，則om控制項沒提供簡便的方法，需要運用提供的現有的方法來自己完成，實現如下：　　

        function CheckTabsExist(currentTabId)        {            var total = $('#tabs').omTabs('getLength');                        for (i = 0; i < total; i++)            {                var tabId = $('#tabs').omTabs('getAlter', i);                                if (tabId == currentTabId)                {                    return true;                }                            }            return false;        }

　　完善後的樹節點點擊處理方法如下：

　　

function TreeNodeClick(node, event)        {            if (node.url)            {                                if (CheckTabsExist(node.id))                {                    var index = $('#tabs').omTabs('getAlter', node.id);                                      $("#tabs").omTabs('activate', index);                }                else                {                    $("#tabs").omTabs('add', {                        title: node.text,                        content: '<iframe scrolling="yes" frameborder="0"  src=' + node.url + ' style="width:100%;height:100%;"></iframe>',                        closable: true,                        tabId: node.id                    });                }            }                   }

　　如上所示，若已存在，則啟用，若不存在，則添加新標籤。

　　當開啟的tab標籤頁越來越多，就產生了一個新需求，即批量關閉標籤，跟瀏覽器類似，這需求可以通過添加右鍵菜單來實現。只需要在tab控制項初始化LoadTabs裡加入屬性 tabMenu:true即可，然後在tab標籤頁頭部點擊右鍵，就會出現“關閉”、“關閉其他”、“關閉所有”三個菜單，如果你要實現瀏覽器關閉左側和右側，om現有控制項沒提供該功能，需要你自己去擴充了。

 

　　最後，說一下跟easyui的區別吧。至目前為止，已經將easyui的三個控制項layout、tree、tab替換為om了，個人觀點，easy更人性化，完善性更好。人性化體現在，預設屬性儘可能貼近實際情景，比如，是否自動填滿父表單，而不需要使用者再額外指定。完善性則體現在各種情況的應對，起碼，我在使用easyuri過程中，就沒發現js報錯的情況，而使用om，則經常出現，往往是一些寬度和高度無法擷取，比如實戰一中，一個div標籤，沒內容閉包報錯，使用tab控制項的時候，如果唯寫一個div，則初始化的時候，會報scroller（捲軸）擷取長度出錯。還有更關鍵的一點，就是提供的屬性和方法是否更符合開發人員的需要，以本文中樹節點點擊事件為例，以下是我使用easyui寫的處理：

       　　　var node = $('#mainMenu').tree('getSelected');             var isLeaf = $('#mainMenu').tree('isLeaf', node.target);             if (isLeaf == true)             {                 if ($("#mainTabs").tabs('exists', node.text) == false)                 {                     $("#mainTabs").tabs('add', {                         title: node.text,                         content: '<iframe scrolling="yes" frameborder="0"  src=' + node.attributes + ' style="width:100%;height:100%;"></iframe>',                         closable: true,                         cache: false                     });                 }                 else                 {                     $("#mainTabs").tabs('select', node.text);                 }             }

　　首先擷取當前點擊值，判斷是否是分葉節點，有現成的方法可用，判斷tab標籤頁中是否已存在開啟的菜單，也有現成的方法可用，而om則顯得笨拙多了，兩個邏輯都要自己寫，對開發人員的友好性明顯有一定差距。這裡也並不是說om比easyui差，om也提供了一些更強大的功能，我僅是從自己的業務需要和功能規劃，對用到的功能點進行簡單對比，覺得easyui更勝一籌。