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更勝一籌。