jQuery MiniUI

 找回密码
 立即注册
查看: 4344|回复: 5
打印 上一主题 下一主题

panel收缩后高度是否变化的问题 [复制链接]

Rank: 2

跳转到指定楼层
楼主
发表于 2016-9-29 11:56:52 |只看该作者 |倒序浏览
panel收缩后,我发现panel把body区域收缩在上半部,原来panel-body占用的高度没有变化,能否是panel往下收缩并且是panel占用的高度变成收缩后的高度。
附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 2

沙发
发表于 2016-9-29 12:02:28 |只看该作者
如图,有A、B区域,高度分别占比65%,35%,点击b区域Panel收缩后,使b区域panel高占比10%,显示收缩后样式,A占比90%
代码是这样的
  1. function RemarkOnclick(e){
  2.              
  3.             var panel=e.sender;
  4.                 var isExpanded =panel.getExpanded();
  5.                
  6.               if(isExpanded){                     
  7.                       $("#leftuppanel").css("height","90%");   
  8.              
  9.                       $("#remarkArea").css("height","10%");
  10.                      
  11.                       $("#remarkpanel").css("position","absolute");
  12.                       $("#remarkpanel").css("bottom","20px");
  13.               }else{
  14.             
  15.                       document.getElementById("leftuppanel").style.height="65%";
  16.                       tree.load("${path}/MaterialObject/queryCatalog");
  17.                       document.getElementById("remarkArea").style.height="35%";
  18.               }
  19.       }
复制代码

Rank: 8Rank: 8

板凳
发表于 2016-9-29 14:40:19 |只看该作者
1376651290 发表于 2016-9-29 12:02
如图,有A、B区域,高度分别占比65%,35%,点击b区域Panel收缩后,使b区域panel高占比10%,显示收缩后样式 ...
  1. <div style="width:400px;height:500px;border:1px solid red" >
  2.                <div class="mini-fit">
  3.                       <div class="mini-tree" style="width:100%;height:100%" url="../data/listTree.txt"                resultAsTree="false"></div>
  4.                </div>
  5.                <div class="mini-panel" style="width:100%;height:35%" showCollapseButton="true"               onbuttonclick="onButtonClick">
  6.                      
  7.                </div>
  8.    
  9. </div>
复制代码
function onButtonClick(e) {
        setTimeout(function () {
            mini.layout();
        }, 100)
    }

Rank: 2

地板
发表于 2016-9-29 15:30:30 |只看该作者
@felt
版主
  1. <div size="25%" showCollapseButton="true" >
  2.             <div id="leftuppanel" style="width:100%;height:100%;">
  3.                 <div id="lefttoptoolbar" class="mini-toolbar" style="width:100%;float:left;">
  4.                                                         <input id="txtTreeSearch" class="mini-textbox" emptyText="请输入分类名称..."
  5.                                                                 onenter="onTreeSearchKeyEnter" width="60%"/>
  6.                                                         <a class="mini-button" iconCls="icon-query" plain="true" width="30%"
  7.                                                                 onclick="treesearch()">查询</a>
  8.                         </div>
  9.                         <!-- 左侧实物目录树 -->
  10.                         <div id="treediv" class="mini-fit" >
  11.                                 <ul id="xmTree" class="mini-tree" url="${path}/MaterialObject/queryCatalog"
  12.                                         style="width: 100%; height: 100%;" showTreeIcon="true"
  13.                                         allowDrag="false" allowDrop="false" showExpandButtons="true"
  14.                                         resultAsTree="false" expandOnLoad="true" onload="treeOnload"
  15.                                         onnodeselect="onNodeSelect">
  16.                                 </ul>
  17.                         </div>
  18.                         <!-- 左侧datagrid:被退回实物分类datagrid -->
  19.                          <div id="thdatagrid" class="mini-datagrid" style="width:100%;height:100%;"
  20.                             url="${path}/MaterialObject/queryBackCatalog" idField="id"
  21.                             allowResize="true" pageSize="20" onselectionchanged="onSelectionChanged2"
  22.                             allowCellSelect="true"  allowAlternating="true" showPager="false" >
  23.                             <div property="columns">            
  24.                     <div type="indexcolumn">序号</div>
  25.                     <div field="CATALOGCOUNT" width="120" headerAlign="center" allowSort="false">实物目录名称</div>               
  26.                                </div>
  27.                         </div>
  28.                         </div>
  29.                                 <!--左下高级查询区域 -->
  30.                                 <div id="leftdownpanel" class="mini-panel" title="自定义分组高级查询" style="width:100%;height:35%;"showToolbar="true" expanded="true" collapseOnTitleClick="true">
  31.                         <div property="toolbar" style="width: 100%;">
  32.                                                                 <input id="txtTreeSearch1" class="mini-textbox" emptyText="请输入查询关键字..."
  33.                                                                         onenter="onTreeSearchKeyEnter" width="65%"/>
  34.                                                                 <a id="customfind" class="mini-button"  plain="true" iconCls="icon-query" tooltip="查询" width="10%" onclick="onCustomTreeSearch()"></a>
  35.                                                                 <a id="customset" class="mini-button" plain="true" iconCls="icon-set" tooltip="设置" width="10%" onclick="SetCondition()"></a>
  36.                                 </div>
  37.                                 <div class="mini-fit" >
  38.                                         <ul id="gjcxTree" class="mini-tree" url="${path}/CustomCondition/queryCondition"
  39.                                                 style="width: 100%; height: 100%;" showTreeIcon="true"
  40.                                                 allowDrag="true" allowDrop="true" showExpandButtons="true"
  41.                                                 resultAsTree="false" expandOnLoad="true"  onnodeselect="onCustomNodeSelect(e)">
  42.                                         </ul>
  43.                                 </div>
  44.                         </div>
  45.                         <!--左下目录注释区域 -->
  46.                         <div id="remarkpanel" class="mini-panel" title="目录注释"  style="width:100%;height:35%;"
  47.                             showCollapseButton="true" bodyStyle="padding:0;word-break:break-all;font-size:13px;"
  48.                                    showCloseButton="false" expanded="true" visible="true" onbuttonclick="onButtonClick" >
  49.                         </div>
  50.                 </div>
复制代码

Rank: 2

5#
发表于 2016-9-29 15:32:37 |只看该作者
1376651290 发表于 2016-9-29 15:30
@felt
版主
  1. function onButtonClick(e){
  2.               debugger;
  3.                setTimeout(function () {
  4.             mini.layout();
  5.         }, 0)
  6.       }
复制代码
版主,我的html这样写的,当前页面主要显示leftuppanel和remarkpanel,但按照你说的布局也还是没有变化,panel折叠后有空白区域

Rank: 8Rank: 8

6#
发表于 2016-9-29 16:21:58 |只看该作者
1376651290 发表于 2016-9-29 15:32
版主,我的html这样写的,当前页面主要显示leftuppanel和remarkpanel,但按照你说的布局也还是没有变化, ...

按我的例子去调整你的页面,如果不会调整,请直接打包你的页面上来

Archiver|普加软件

GMT+8, 2025-7-11 05:40 , Processed in 1.036437 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部