jQuery MiniUI

标题: 新增tbas的url在div容器中打开显示的问题 [打印本页]

作者: xieguolun 时间: 2017-9-8 12:55:28 标题: 新增tbas的url在div容器中打开显示的问题

在左右布局中，点击左边的菜单在右边添加一个tbas，下的内容不会有滚动条，如能添加在一个如div的容器中就会有滚动条了，不知怎么处理。

作者: felt 时间: 2017-9-8 14:34:29

请检查你的左右布局容器的样式，是不是overflow是hidden的。

作者: xieguolun 时间: 2017-9-8 15:14:51

<div id="layout1" class="mini-layout" style="width:100%;height:100%;"  borderStyle="border:solid 1px #aaa;">
<div title="管理系统" region="north" height="60" showSplitIcon="true" >
      <input type="button" value="隐藏" onclick="hideHeader()"/>
      <input type="button" value="显示" onclick="showHeader()"/>
      <input type="button" value="折叠" onclick="collapsePanel()"/>
      <input type="button" value="展开" onclick="expandPanel()"/>
</div>
<div title="south" region="south" showSplit="false" showHeader="true" height="60" showSplitIcon="true" >
      south
</div>
<div title="工作菜单" showProxyText="true" region="west" width="200" expanded="false" showSplitIcon="true">
      
      <ul id="leftTree" class="mini-tree" url="<{url c='main' a='menu'}>" style="width:300px;padding:5px;"
showTreeIcon="true" textField="name" idField="id"  onnodeselect="onNodeSelect" >
   </ul>
</div>
<div title="提示" region="east"  showCloseButton="true" showSplitIcon="true">
      提示窗口
</div>
<div title="center" region="center"  showProxyText="false" bodyStyle="overflow:hidden;">
      
            <div id="mainTabs" class="mini-tabs" activeIndex="2" style="width:100%;height:100%;"
                  plain="false" onactivechanged="onTabsActiveChanged"
            >
                  <div title="首页" url="http://www.baidu.com" >
                  </div>

            </div>


</div>
</div>


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

      var layout = mini.get("layout1");

      function hideHeader() {
         layout.updateRegion("west", { visible: false });
      }
      function showHeader() {
         layout.updateRegion("west", { visible: true });
      }
      function collapsePanel() {
         layout.updateRegion("east", { expanded: false });
      }
      function expandPanel() {
         layout.updateRegion("east", { expanded: true });
      }

      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.name;
            tab.showCloseButton = true;

            //这里拼接了url，实际项目，应该从后台直接获得完整的url地址
            tab.url = node.url;

            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();
         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>

看看加哪里，怎么加呢

作者: felt 时间: 2017-9-8 15:47:55

xieguolun 发表于 2017-9-8 15:14
south

你说的没有滚动条的页面到底是哪个页面？
是tab里面的页面吗？
请截个图表现一下。

作者: xieguolun 时间: 2017-9-8 21:39:42

本帖最后由 xieguolun 于 2017-9-9 07:33 编辑

对的，是Tab里面的页面，右边和下边都没有，
[attach]9845[/attach]
自身的是有的，是因其在div的容器中：
<div title="center" region="center"  showProxyText="false" bodyStyle="overflow:hidden;">
      
            <div id="mainTabs" class="mini-tabs" activeIndex="2" style="width:100%;height:100%;"
                  plain="false"
            >
                  <div title="首页" url="http://www.baidu.com" >
                  </div>

            </div>


</div>
而程序添加的可能不在div的容器中就没有滚动条了，下边的内容就看不到了，但奇怪的是如果连接地址是一个网站就没问题
我用的是speedphp，连接地址为：index.php?m=gzqd&c=main&a=newqd，是否为此东东对php的mvc方式的连接解析出了问题呢？
[attach]9848[/attach][attach]9847[/attach][attach]9846[/attach]

作者: felt 时间: 2017-9-11 12:36:43

xieguolun 发表于 2017-9-8 21:39
对的，是Tab里面的页面，右边和下边都没有，

自身的是有的，是因其在div的容器中：

你发的附件如何组织起来。。。
看你这截图应该是
splitter面板默认的样式影响到了
style="overflow:auto"来修改面板的样式
<div class="mini-splitter" style="width:350px;height:200px;">
<div  size="30%" showCollapseButton="true" style="overflow:auto“>

</div>
<div showCollapseButton="true">
      2
</div>
</div>

作者: xieguolun 时间: 2017-9-11 14:05:08

3个文件放在一个目录中，解压第一个文件就行了，把解压的目录放在PHP环境中运行就可看情况了。

作者: felt 时间: 2017-9-11 17:24:19

xieguolun 发表于 2017-9-11 14:05
3个文件放在一个目录中，解压第一个文件就行了，把解压的目录放在PHP环境中运行就可看情况了。 ...

本地没有php环境，你就用tabs打开这个表单页面也是没有滚动条的吗？还是放在splitter里面才没有滚动条？
请单独把html页面提出来，这样我们本地好测试。

作者: xieguolun 时间: 2017-9-11 21:13:04

如果连接网站是有滚动条的，我是把http://www.miniui.com/demo/outlooktree/outlooktree.html这个例子中的outlooktree.txt中的连接改一下而已，
[
{id: "user", text: "用户管理"},

{id: "lists", text: "Lists", pid: "user" },

{id: "datagrid", text: "点我看结果", pid: "lists",url:"index.php?c=main&a=ls"},
{id: "tree", text: "这是连接百度" , pid: "lists",url:"http://www.baidu.com"},
{id: "treegrid", text: "TreeGrid " , pid: "lists"},

{id: "layouts", text: "Layouts", pid: "user"},

{id: "panel", text: "Panel", pid: "layouts"},
{id: "splitter", text: "Splitter", pid: "layouts"},
{id: "layout", text: "Layout ", pid: "layouts"},

{ id: "right", text: "权限管理"},

{id: "base", text: "Base", pid: "right" },

{id: "ajax", text: "Ajax", pid: "base"},
{id: "json", text: "JSON", pid: "base"},
{id: "date", text: "Date", pid: "base"},

{id: "forms", text: "Forms", pid: "right"},

{id: "button", text: "Button", pid: "forms"},
{id: "listbox", text: "ListBox", pid: "forms"},
{id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
{id: "radiolist", text: "RadioList", pid: "forms"},
{id: "calendar", text: "Calendar", pid: "forms"}
]
而“点我看看”就没滚动条，而“连接百度”就有滚动条，我怀疑是本东东对index.php?c=main&a=ls这种php的这种普遍这种框架方式不支持。

作者: felt 时间: 2017-9-12 09:50:44

xieguolun 发表于 2017-9-11 21:13
如果连接网站是有滚动条的，我是把http://www.miniui.com/demo/outlooktree/outlooktree.html这个例子中的o ...

百度有，其他没有，说明你没有的页面上有你处理的样式，obverflow肯定是hidden才我们这变本地都不用php的，只有。net和java的后台。

作者: xieguolun 时间: 2017-9-12 14:07:03


      <div class="mini-splitter" style="width:100%;height:100%;overflow:auto" borderStyle="border:0;">
         <div size="180" maxSize="250" minSize="100" showCollapseButton="true" style="overflow:auto">
            
            <div id="leftTree" class="mini-outlooktree" url="i/outlooktree.txt" onnodeclick="onNodeSelect"
                  textField="text" idField="id" parentField="pid"
            >
            </div>

         </div>

设了也没用呀

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