jquery 的排版布局，以及初始化树形菜单
上代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/include.jspf"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src='js/jquery.outlook.js'></script>
<script type="text/javascript">
$(function(){
$.ajax({
data:{
"id":'0'
},
url: Liyong.base+'/system/menu/initInfoMenu.so',
type:'post',
dataType:"json",
success:function(data){
if(data.success) {
if (data.json)
$(data.json).each(function (index, data) {
$('#west_accordion').accordion('add',{
title:data.text,
iconCls:'icon-menu',
content:'<div style="overflow:auto;width:100%;height:100%;">'+
'<ul id="'+data.id+'" class="jquery-tree"></ul>'+
'</div>'
});
$('#'+data.id).tree("loadData",data.children).tree({
onClick:function(node){
if (node.attributes.url)
addTab(Liyong.base+node.attributes.url, node.text);
}
});
});
} else {
$.messager.show({
icon:'error',
msg:data.err,
title:'错误信息'
});
}
}
});
function addTab(url,tabTitle){
if(!$('#center_panel').tabs('exists', tabTitle)) {
$('#center_panel').tabs('add',{
title:tabTitle,
content:createFrame(url),
iconCls:'icon-save',
closable:true
});
tabClose();
}else{
$('#center_panel').tabs('select', tabTitle);
}
};
function createFrame(url) {
var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
return s;
};
function tabClose()
{
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function(){
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close',subtitle);
});
$(".tabs-inner").bind('contextmenu',function(e){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
var subtitle =$(this).children("span").text();
$('#mm').data("currtab",subtitle);
return false;
});
}
//绑定右键菜单事件
//关闭当前
$('#mm-tabclose').click(function(){
var currtab_title = $('#mm').data("currtab");
$('#center_panel').tabs('close',currtab_title);
});
//全部关闭
$('#mm-tabcloseall').click(function(){
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
$('#center_panel').tabs('close',t);
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function(){
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
if(t!=currtab_title)
$('#center_panel').tabs('close',t);
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function(){
var nextall = $('.tabs-selected').nextAll();
if(nextall.length==0){
//msgShow('系统提示','后边没有啦~~','error');
alert('后边没有啦~~');
return false;
}
nextall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#center_panel').tabs('close',t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function(){
var prevall = $('.tabs-selected').prevAll();
if(prevall.length==0){
alert('到头了，前边没有啦~~');
return false;
}
prevall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#center_panel').tabs('close',t);
});
return false;
});
//退出
$("#mm-exit").click(function(){
$('#mm').menu('hide');
});
});
</script>
</head>
<body class="jquery-layout">
<noscript><div style=" position:absolute; z-index:100000; height:2046px;top:0px;left:0px; width:100%; background:white; text-align:center;">
<img src='<c:url value="/common/themes/icons/noscript.gif" />' />
</div></noscript>
<div region="north" style="height:60px;padding:10px;">north region</div>
<div region="west" title="<img src='<c:url value="/common/themes/icons/tree.gif" />' style='vertical-align:text-bottom;'>${session.bus_name}导航菜单" split="true" style="width:250px;">
<div id="west_accordion" class="jquery-accordion" fit="true" border="false"></div>
</div>
<div region="center">
<div id="center_panel" class="jquery-tabs" fit="true" border="false">
<!-- 显示内容页面 -->
</div>
</div>
<div id="mm" class="jquery-menu" style="width:150px;">
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">全部关闭</div>
<div id="mm-tabcloseother">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">当前页右侧全部关闭</div>
<div id="mm-tabcloseleft">当前页左侧全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-exit">退出</div>
</div>
</body>
</html>