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更胜一筹。
