jQuery MiniUI

标题: mini-fit和mini-toolber之间div显示隐藏高度计算问题 [打印本页]

作者: Aisin丿Gioro 时间: 2017-8-29 09:24:19 标题: mini-fit和mini-toolber之间div显示隐藏高度计算问题

本帖最后由 Aisin丿Gioro 于 2017-8-29 09:25 编辑

在mini-fit和mini-toolbar之间新增了一个高级查询的div，默认是隐藏的。点击mini-toolbar的高级查询按钮的时候让这个div显示，在点击就隐藏，然后mini-fit高度计算有问题怎么解决？$("#search").click(function () {
$("#search-box").slideToggle();
mini.layout();
});

作者: felt 时间: 2017-8-29 09:33:34

应该来说调用一下mini.layout()就可以了，你这里没调整吗？
延时个100毫秒试一下。

作者: Aisin丿Gioro 时间: 2017-8-29 10:09:51

本帖最后由 Aisin丿Gioro 于 2017-8-29 10:19 编辑

felt 发表于 2017-8-29 09:33
应该来说调用一下mini.layout()就可以了，你这里没调整吗？
延时个100毫秒试一下。 ...

现在计算好像反的呢，点击第一次按钮的时候mini-fit的高度会增加，正常的情况来说div显示出来的时候mini-fit高度会减小，点击第二次的时候div隐藏mini-fit的高度会减小很多。应该是把div的高度也减去了[attach]9787[/attach]这是没有点击的[attach]9788[/attach]这是第一次点击的
[attach]9789[/attach]这是第二次点击的

作者: felt 时间: 2017-8-29 10:17:43

Aisin丿Gioro 发表于 2017-8-29 10:09
现在计算好像反的呢，点击第一次按钮的时候mini-fit的高度会增加，正常的情况来说div显示出来的时候mini-f ...

提供你页面，包括简单代码，重新你的问题。

作者: Aisin丿Gioro 时间: 2017-8-29 10:20:54

felt 发表于 2017-8-29 10:17
提供你页面，包括简单代码，重新你的问题。

<body>
<div class="wrapper bg-gray">
<div class="mini-toolbar">
      <div class="f-l">
         <div class="btn-group">
            <a class="btn radius" href="${pageContext.request.contextPath}/legal_lawyer/legal_lawyer_add.action" onclick="add()">
                  <i class="fa fa-plus"></i>新增
            </a>
            <a class="btn radius" href="javascript:void(0);">
                  <i class="fa fa-file"></i>查看
            </a>
            <a class="btn radius" href="${pageContext.request.contextPath}/legal_lawyer/legal_lawyer_edit.action">
                  <i class="fa fa-edit"></i>编辑
            </a>
            <a class="btn radius" href="javascript:void(0);">
                  <i class="fa fa-refresh"></i>刷新
            </a>
            <a class="btn radius" id="search" href="javascript:void(0);">
                  <i class="fa fa-refresh"></i>搜索
            </a>
         </div>
      </div>
      <div class="f-r">
         <div id="pager1" class="mini-pager" sizeList="[5,10,20,100]" showPageInfo="false"
               showReloadButton="false"></div>
      </div>
</div>
<div class="row cl mb-15" id="search-box" style="display: none;">
      <div class="col-12">
         <div class="panel panel-default">
            <div class="panel-header">查询条件</div>
            <div class="panel-body"></div>
         </div>
      </div>
</div>
<div class="mini-fit">
      <div id="tabs1" class="mini-tabs" tabAlign="top" tabPosition="left" activeIndex="0" style="width:100%;height:100%;" plain="false" buttons="#tabsButtons" buttonsAlign="right">

      <div title="未处理" >
         <div class="mini-datagrid" id="datagrid1" borderStyle="border:0;" showVGridLines="false" allowAlternating="true" showLoading="true" onrowdblclick="assoOrgView" style="width:100%;height:100%;"  idField="id" resultAsTree="false" allowResize="false" pageSize="50"
               url="${pageContext.request.contextPath}/" multiSelect="true" pager="#pager1" showPager="false">
            <div property="columns">
                  <div type="checkcolumn"></div>
                  <div type="indexcolumn" headerAlign="center" width="40" align="center">序号</div>
                  <div field="" width="100" headerAlign="left" align="left" allowSort="true">姓名</div>
                  <div field="" width="200" headerAlign="left" align="left" allowSort="true">执业机构</div>
                  <div field="" width="150" headerAlign="left" align="left" allowSort="true">执业类别</div>
                  <div field="" width="100" headerAlign="left" align="left" allowSort="true">执业证号</div>
                  <div field="" width="100" headerAlign="left" align="left" allowSort="true">执业状态</div>
                  <div field="" width="100" headerAlign="left" align="left" allowSort="true">派驻状态</div>
                  <div field="" width="100" headerAlign="left" align="left" allowSort="true">手机号码</div>
                  <div field="" width="100" headerAlign="left" align="left" allowSort="true">业务专长</div>
                  <div type="setting" width="100" headerAlign="left" align="left" renderer="reSetting">操作</div>
            </div>
         </div>
      </div>
      <div title="已处理" ></div>
</div>
</div>
</div>
<script type="text/javascript">

      $("#search").click(function () {
         $("#search-box").slideToggle(100);
         mini.layout();
      });

</script>
</body>

作者: felt 时间: 2017-8-29 11:05:58

Aisin丿Gioro 发表于 2017-8-29 10:20
新增

...

请延时调用mini.layout()
setTimeout(function(){
mini.layout();
},200)

作者: Aisin丿Gioro 时间: 2017-8-29 11:28:51

felt 发表于 2017-8-29 11:05
请延时调用mini.layout()
setTimeout(function(){
mini.layout();

可以的谢谢

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