<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Menu - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<style type="text/css">
.tabs-header, .tabs-tool {
background-color: #fff;
}
.tabs-header {
border-width: 0px;
}
</style>
</head>
<body>
<script type='text/javascript'>
$(function(){
var body = 'body';
var layout = 'ui_layout';
var layout_center_id = 'center_layout';
body = $(body);
body.append('<div id="' + layout + '"></div>');
// layout
layout = $('#' + layout);
layout.layout({fit:true});
layout.layout('add', {region:'north',height:100,cache:false});
layout.layout('add', {region:'west',width:140,height:'auto',split:false,cache:false,title:' 菜单',onCollapse:test,onExpand:test});
layout.layout('add', {region:'center',split:false,id:layout_center_id,cache:false});
layout.layout('add', {region:'south',height:10,split:false,cache:false});
// layout center tabs
var center = $('#' + layout_center_id);
var tabs_menu_id = 'tabs_menu';
body.append('<div id="' + tabs_menu_id + '"></div>');
var tabs_menubutton = 'tabs_menubutton';
var ui_tabs_tools = [{text:'操作',iconCls:'icon-help',id:tabs_menubutton}];
center.tabs({fit:true,tools:ui_tabs_tools,onContextMenu:onContextMenu});
tabs_menubutton = $('#' + tabs_menubutton);
var tabs_menu = $('#' + tabs_menu_id);
tabs_menu.menu({onClick:menuClick});
tabs_menu.menu('appendItem', {id:'m_save',text:'save',iconCls:'icon-save'});
tabs_menubutton.menubutton({menu:'#tabs_menu'});
center.tabs('add', {title:'index',iconCls:'icon-tip',selected:true});
$('div.tabs-tool').css('height','28px');
// menu
var tabs_panel_menu_id = 'tabs_panel_menu';
body.append('<div id="' + tabs_panel_menu_id + '"></div>');
var tabs_panel_menu = $('#' + tabs_panel_menu_id);
tabs_panel_menu.menu({onClick:menuClick});
tabs_panel_menu.menu('appendItem', {id:'m_add',text:'新增',iconCls:'icon-add'});
tabs_panel_menu.menu('appendItem', {id:'m_refresh',text:'刷新',iconCls:'icon-reload'});
tabs_panel_menu.menu('appendItem', {id:'m_close',text:'关闭',iconCls:'icon-redo'});
tabs_panel_menu.menu('appendItem', {id:'m_close_all',text:'关闭全部',iconCls:'icon-undo'});
function test() {
center.tabs('resize', {width:'auto'});
}
function onContextMenu(e) {
e.preventDefault();
tabs_panel_menu.menu('show', {
left: e.pageX,
top: e.pageY
});
}
function menuClick(item) {
var id = item.id;
if ('m_add' == id) {
center.tabs('add', {title:'新选项卡',iconCls:null,selected:true,closable:true,content:
'<iframe width="100%" height="100%" frameborder="0" marginheight="0px" marginwidth="0px" src="1.html"></iframe>'});
}
if ('m_close_all' == id) {
removeTabs();
}
}
function removeTabs() {
var tabs = center.tabs('tabs');
for (var i = 1; i < tabs.length; i++) {
center.tabs('close', i);
}
tabs = center.tabs('tabs');
if (tabs.length > 1) {
removeTabs();
}
}
});
</script>
</body>
</html>