jQuery MiniUI

标题: panel收缩后高度是否变化的问题 [打印本页]
作者: 1376651290    时间: 2016-9-29 11:56:52     标题: panel收缩后高度是否变化的问题

panel收缩后，我发现panel把body区域收缩在上半部，原来panel-body占用的高度没有变化，能否是panel往下收缩并且是panel占用的高度变成收缩后的高度。[attach]8063[/attach][attach]8062[/attach]
作者: 1376651290    时间: 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.       }
复制代码
作者: felt    时间: 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)
    }
作者: 1376651290    时间: 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>
复制代码
作者: 1376651290    时间: 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折叠后有空白区域
作者: felt    时间: 2016-9-29 16:21:58

1376651290 发表于 2016-9-29 15:32
版主，我的html这样写的，当前页面主要显示leftuppanel和remarkpanel，但按照你说的布局也还是没有变化， ...

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



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2