最近在做ITOO的主页面,对于EasyUI也更加熟悉了。这几天就沉淀一下,将前台主页面中用到的div+css知识总结一下,开始下一步的学习。
前台主页面是一个Tabs选项卡,主页面是固定的,因此在右键关闭的时候是不能将主页面关闭的。实现起来也很简单:
1.建立html标签,固定右键弹出的内容。
<span style="font-family:KaiTi_GB2312;font-size:18px;"> <!-- 这里是tabs页面的右键 -->
<div id="rcmenu" class="easyui-menu" style="">
<div id="closeall">关闭全部</div>
<div id="closeother">关闭其他</div>
</div></span>
2.页面加载完毕,JS绑定鼠标右键事件。
<span style="font-family:KaiTi_GB2312;font-size:18px;"> $(function(){
$(".easyui-tabs").bind('contextmenu',function(e){
e.preventDefault();
$('#rcmenu').menu('show', {
left: e.pageX,
top: e.pageY
});
});
//关闭所有标签页
$("#closeall").bind("click",function(){
var tablist = $('#tt').tabs('tabs');
for(var i=tablist.length-1;i>=1;i--){
$('#tt').tabs('close',i);
}
});
//关闭其他页面(先关闭右侧,再关闭左侧)
$("#closeother").bind("click",function(){
var tablist = $('#tt').tabs('tabs');
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
for(var i=tablist.length-1;i>index;i--){
$('#tt').tabs('close',i);
}
var num = index-1;
if(num < 1){
return;
}else{
for(var i=num;i>=1;i--){
$('#tt').tabs('close',i);
}
$("#tt").tabs("select", 1);
}
});
});</span>
鼠标的右键事件在EasyUI中通过绑定contextmenu来实现,可以显示右键的选项显示的位置。
关闭选项卡这里分为:关闭全部和关闭其他按钮。
关闭全部是获取tabs的length,然后循环关闭页面。由于这里有主页的存在,所以循环的时候需要排除主页的索引号。
关闭其他是通过获取该项的索引号,然后先关闭右侧再关闭左侧。同时关闭完毕后,让其选中该tab页面,也就是第一页
EasyUI实现了很多基础性性的东西,其实好好的研究一下,都能实现大部分的功能。每一次使用EasyUI,都让我对前台,对EasyUI的认识更加清晰,深刻。正如我一直说:权限,深似海。同样:学习,无止境。