jQuery MiniUI

标题: outlookmenu的例子使用后<div>center不能出现自动出现滚动条 [打印本页]

作者: changwei_zhang 时间: 2015-3-27 15:02:27 标题: outlookmenu的例子使用后<div>center不能出现自动出现滚动条

outlookmenu的例子使用后<div>center不能出现自动出现滚动条，按http://miniui.com/bbs/forum.php? ... =showCollapseButton 方法试了不行，按版主的 borderStyle="border:0;overflow:auto;" autoCollapse="false" 方式不能解决，请大神再看看，谢谢！
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DEMO测试系统</title>
<link rel="shortcut icon" type="image/ico" href="${pageContext.request.contextPath}/images/favicon.ico">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="${pageContext.request.contextPath}/scripts/boot.js"
type="text/javascript">
</script>

<style type="text/css">
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.header {
background: url(${pageContext.request.contextPath}/images/header.gif)
repeat-x 0 -1px;
}
</style>
</head>
<body>

<div id="layout1" class="mini-layout"
style="width: 100%; height: 100%;">
<div class="header" region="north" height="70" showSplit="false"
showHeader="false">
<img src="${pageContext.request.contextPath}/images/logo.png" width="450px" height="67" border="0"/>
<div style="position: absolute; top: 18px; right: 10px;">
<a class="mini-button mini-button-iconTop" iconCls="icon-add"
onclick="onQuickClick" plain="true">快捷</a>
<a class="mini-button mini-button-iconTop" iconCls="icon-date"
onclick="onClick" plain="true">消息</a>
<a class="mini-button mini-button-iconTop" iconCls="icon-edit"
onclick="onClick" plain="true">设置</a>
<a class="mini-button mini-button-iconTop" iconCls="icon-close"
onclick="onClick" plain="true">关闭</a>
</div>

</div>
<div title="south" region="south" showSplit="false"
showHeader="false" height="30">
<div style="line-height: 28px; text-align: center; cursor: default">
Copyright 开发单位
</div>
</div>
<div title="center" region="center" style="border: 0;"
bodyStyle="overflow:hidden;">

<div class="mini-splitter" style="width: 100%; height: 100%;"
borderStyle="border:0;">
<div size="180" maxSize="250" minSize="100"
showCollapseButton="true" style="border: 0;">

<div id="leftTree" class="mini-outlooktree"
url="${pageContext.request.contextPath}/jsondata/json_GetTaskInfo.action"
onnodeclick="onNodeSelect" textField="text" idField="id"
parentField="pid">
</div>

</div>
<div showCollapseButton="false" style="border: 0;">

<div id="mainTabs" class="mini-tabs" activeIndex="0"
style="width: 100%; height: 100%;" plain="false"
onactivechanged="onTabsActiveChanged">
<div title="首页消息" name="main_msg"
url="${pageContext.request.contextPath}/login/CheckPass.action">
</div>
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript">
mini.parse();

var tree = mini.get("leftTree");

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.url = node.url;

tab.showCloseButton = true;

//这里拼接了url，实际项目，应该从后台直接获得完整的url地址
//tab.url = mini_JSPath + "${pageContext.request.contextPath}/docs/api/" + node.id + ".html";

tabs.addTab(tab);
}
tabs.activeTab(tab);
}

function onNodeSelect(e) {

var node = e.node;
var isLeaf = e.isLeaf;
if (isLeaf) {
showTab(node);
}
}

function onClick(e) {
var text = this.getText();
if (text == "关闭")
window.location.href = "${pageContext.request.contextPath}/login/logout.action";

if (text == "设置"){
showTab({id:'userconfig',text:'用户设置',url:'../usermanage/userInfo.jsp'});
}

if (text == "消息"){
var tabs = mini.get("mainTabs");
var tab = tabs.getTab("main_msg");
tabs.reloadTab(tab);
tabs.activeTab(tab);
}

}

function onQuickClick(e) {
for (i = 10; i >= 0; i--) {
tree.expandPath(i.toString());
tree.selectNode(i.toString());
}
}

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>
</body>
</html>

作者: dforce 时间: 2015-3-27 15:12:58

是哪部分的滚动条
】[attach]5963[/attach][attach]5962[/attach]
outlooktree.outlookmenu都可以

作者: changwei_zhang 时间: 2015-3-27 15:58:16

本帖最后由 changwei_zhang 于 2015-3-27 15:59 编辑

dforce 发表于 2015-3-27 15:12
是哪部分的滚动条
】
outlooktree.outlookmenu都可以

不好意思是outlooktree的例子，是tabs下的页面内容页面没有滚动条

作者: dforce 时间: 2015-3-27 16:00:36

changwei_zhang 发表于 2015-3-27 15:58
不好意思是outlooktree的例子，是tabs下的页面内容页面没有滚动条

请检查tabs内部页面的overflow

作者: changwei_zhang 时间: 2015-3-27 16:17:31

dforce 发表于 2015-3-27 16:00
请检查tabs内部页面的overflow

OK，果然是我在头部加了
html,body {
font-size: 12px;
padding: 0;
margin: 0;
border: 0;
height: 100%;
overflow: hidden;
background-color: #F3F5F9;
}
去掉overflow: hidden;就好了，谢谢了！

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)