- 注册时间
- 2014-6-25
- 最后登录
- 2016-5-5
- 阅读权限
- 10
- 积分
- 602
- 精华
- 0
- 帖子
- 102
|
参考这个示例：
http://www.miniui.com/demo/tree/navtree.html
我想实现当点击这个tab页面，当撑满这个右面页面的时候，把前、后收缩的那个按钮给显示出来，可以前后收缩 但是我现在按文档来弄，好像那个前后按钮出不来
----------------------------------------------------------------------
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@include file="/common/mini/common.jsp"%>
<script type="text/javascript" src="<%=contextPath%>/common/common.js"></script>
<html>
<head>
<title>我的申请</title>
</head>
<style type="text/css">
body{
margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
}
.header
{
background:url(../header.gif) repeat-x 0 -1px;
}
</style>
<body>
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
<div title="center" region="center" bodyStyle="overflow:hidden;" style="border:0;">
<!--Splitter-->
<div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
<div size="180" maxSize="250" minSize="100" showCollapseButton="true" style="border-width:1px;">
<ul id="leftTree" class="mini-tree" style="width:100%;height:100%;" showTreeIcon="true" textField="text" idField="id" resultAsTree="false" expandOnLoad="true" showExpandButtons="true">
</ul>
</div>
<div showCollapseButton="true" style="border:0px;" >
<!--Tabs-->
<div id="mainTabs" class="mini-tabs bg-toolbar" contextMenu="#tabsMenu" activeIndex="0" style="width:100%;height:100%;" onactivechanged="onTabsActiveChanged">
<div title="申请列表首页" >
</div>
</div>
</div>
</div>
</div>
</div>
<ul id="tabsMenu" class="mini-contextmenu">
<li>关闭标签页</li>
<li>关闭其他标签页</li>
<li>关闭所有标签页</li>
<li>关闭其他[首页除外]</li>
</ul>
</body>
<script type="text/javascript">
mini.parse();
var tree = mini.get("leftTree");
var tabs=mini.get("mainTabs");
var currentTab = null;
function onBeforeOpen(e) {
currentTab = tabs.getTabByEvent(e.htmlEvent);
if (!currentTab) {
e.cancel = true;
}
}
function closeTab() {
tabs.removeTab(currentTab);
}
function closeAllBut() {
tabs.removeAll(currentTab);
}
function closeAll() {
tabs.removeAll();
}
function closeAllButFirst() {
var but = [currentTab];
but.push(tabs.getTab("first"));
tabs.removeAll(but);
}
var data=[
{id: "base", text: "申请列表",
children: [
{id: "layerTab", text: "",url:""},
{id: "groupTab", text: "",url:""},
{id: "appTab", text: "",url:""},
{id: "childAppTab", text: "",url:""},
{id: "nodePzTab", text: "",url:""},
{id: "serviceFlowTab", text: "",url:""},
{id: "appAttrTab", text: "",url:""},
{id: "appFunTab", text: "",url:""},
{id: "appFunTab2", text: "",url:""},
{id: "appFunTab3", text: "",url:""},
{id: "appFunTab4", text: "",url:""},
{id: "appFunTab5", text: "",url:""},
{id: "appFunTab6", text: "",url:""},
{id: "appFunTab7", text: "",url:""}
]
}
];
tree.loadData(data);
function showTab(node) {
var tabs = mini.get("mainTabs");
var id = "tab$" + node.id;
var tab = tabs.getTab(id);
if (!tab) {
tab = {};
tab._nodeid = node.id;
tab.name = id;
tab.title = node.text;
tab.showCloseButton = true;
//这里拼接了url，实际项目，应该从后台直接获得完整的url地址
tab.url = node.url;
tabs.addTab(tab);
}
tabs.activeTab(tab);
mini.layout();
}
function onNodeSelect(e) {
var node = e.node;
var isLeaf = e.isLeaf;
if (isLeaf) {
showTab(node);
}
}
function onClick(e) {
var text = this.getText();
alert(text);
}
function onQuickClick(e) {
tree.expandPath("datagrid");
tree.selectNode("datagrid");
}
function onTabsActiveChanged(e) {
var tabs = e.sender;
var tab = tabs.getActiveTab();
if (tab && tab._nodeid) {
var node = tree.getNode(tab._nodeid);
if (node && !tree.isSelectedNode(node)) {
tree.selectNode(node);
}
}
}
</script>
</html>
|
|
发表于 2014-11-19 19:44:49
收藏
发表于 2014-11-20 09:22:59
