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