<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="blog.anchen8.net" />
<script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.1/themes/icon.css">
<title>easyui测试</title>
<style>
.ico{300px;height:200px;float:left;}
.menu{150px;height:50px;margin-top:5px;}
ul{text-align:left;}
li{text-align:left;}
</style>
<script>
var url="<{:U('User/getUserList')}>";
$(function(){
//tabs绑定右键事件
$('#tabs').tabs({
//添加默认tab
onContextMenu:function(e,title){
e.preventDefault();//取消对象e的默认事件
$('#rightmenu').menu('show',{
left: e.pageX,
top: e.pageY
});
$('#tabs').tabs('select', title);
},
});
//tree绑定单击事件
$('#menu_tree').tree({
onClick:function(node){
//添加节点到panel中
//alert(JSON.stringify(node));
var title=node.text;
if($('#tabs').tabs('exists',title) || node.children){
$('#tabs').tabs('select',title);
}else{
$('#tabs').tabs('add',{
title:title,
closable:true,
//content: '<iframe src="' + url + '" frameborder=0 height=100% width=100% scrolling=no></iframe>',//frame加载所需要页面。href:只是加载页面，且不能跨域
<strong> </strong><span style="color:#000099;"><strong>href:'www.baidu.com'</strong>,</span>
msg :"正在加载数据，请稍候...",
tabWidth:100
});
}
}
});
// 全部关闭
$('#closeall').click(function() {
var taball = $('#tabs').tabs('tabs');
var title = [];
var j = 0;
for (var i = 0 in taball) {
<span style="color:#CC0000;">console.dir(taball[i].panel('options'));</span>
if (taball[i].panel('options').closable) {
title[j] = taball[i].panel('options').title;
j++;
title.length = j;
}
}
for (var v = 0 in title) {
$('#tabs').tabs('close', title[v]);
}
});
// 关闭当前
$('#closethis').click(function() {
var currTab = $('#tabs').tabs('getSelected');
if (currTab.panel('options').closable) {
$('#tabs').tabs('close', currTab.panel('options').title);
}
});
// 关闭除当前之外的TAB
$('#closeother').click(function() {
var taball = $('#tabs').tabs('tabs');
var currTab = $('#tabs').tabs('getSelected');
var currTitle = currTab.panel('options').title;
var title = [];
var j = 0;
for (var i = 0 in taball) {
if (taball[i].panel('options').title != currTitle) {
if (taball[i].panel('options').closable) {
title[j] = taball[i].panel('options').title;
j++;
title.length = j;
}
}
}
if (j == 0) {
showMsg('没有可关闭的选项卡了！');
} else {
for (var v = 0 in title) {
$('#tabs').tabs('close', title[v]);
}
}
return false;
});
// 关闭当前右侧的TAB
$('#closeright').click(function() {
var taball = $('#tabs').tabs('tabs');
var currTab = $('#tabs').tabs('getSelected');
var currTitle = currTab.panel('options').title;
var title = [];
var j = 0;
var st = false;
for (var i = 0 in taball) {
if (currTitle == taball[i].panel('options').title) {
st = true;
}
if (st) {
if (taball[i].panel('options').title != currTitle) {
if (taball[i].panel('options').closable) {
title[j] = taball[i].panel('options').title;
j++;
title.length = j;
}
}
}
}
if (j == 0) {
showMsg('右侧没有可关闭的选项卡了！');
} else {
for (var v = 0 in title) {
$('#tabs').tabs('close', title[v]);
}
}
return false;
});
// 关闭当前左侧的TAB
$('#closeleft').click(function() {
var taball = $('#tabs').tabs('tabs');
var currTab = $('#tabs').tabs('getSelected');
var currTitle = currTab.panel('options').title;
var title = [];
var j = 0;
var st = true;
for (var i = 0 in taball) {
if (currTitle == taball[i].panel('options').title) {
st = false;
}
if (st) {
if (taball[i].panel('options').closable) {
title[j] = taball[i].panel('options').title;
j++;
title.length = j;
}
}
}
if (j == 0) {
showMsg('左侧侧没有可关闭的选项卡了！');
} else {
for (var v = 0 in title) {
$('#tabs').tabs('close', title[v]);
}
}
});
// 退出
$("#mmexit").click(function() {
$('#tabmenus').menu('hide');
});
});
</script>
</head>
<body class="easyui-layout" id="body">
<div data-options="region:'north',split:true" style="height:100px;">
<div class="ico">按钮一</div>
<div class="ico">按钮二</div>
<div class="ico">按钮三</div>
<div class="ico">按钮四</div>
</div>
<div data-options=