jQuery MiniUI

标题: 页面布局的问题 [打印本页]
作者: sd_tz_123    时间: 2012-11-6 15:20:03     标题: 页面布局的问题

这个页面设这样布局的
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">  
  <div title="center" region="center" bodyStyle="overflow:hidden;">
      <div title="center" region="center" bodyStyle="overflow:hidden;">      
        <div class="mini-toolbar" style="padding:2px;border:0;">
           <table style="width:100%;">
               <tr>
               <td style="width:100%;">
               <!--
                    <span style="margin-left:5px;">
        <a class="mini-button" iconCls="icon-search" plain="true">查看</a>
               <span class="separator"></span>            
           <a class="mini-button" iconCls="icon-edit" plain="true" >回访</a>
             </span>
                   <span class="separator"></span>
                    -->
                   <a class="mini-button" iconCls="icon-reload" plain="true">刷新</a>
                      <span class="separator"></span>
               <a class="mini-button" iconCls="icon-search" plain="true" >维修单</a>
               </td>
               <td style="white-space:nowrap;"><label style="font-family:Verdana;">报修日期</label>
                   <input id="tellservdate_start" name="tellservdate_start" class="mini-datepicker" format="yyyy-MM-dd " required="true"/>至
                   <input id="tellservdate_end" name="tellservdate_end" class="mini-datepicker" format="yyyy-MM-dd " required="true"/>                  
              </td>
              <td style="white-space:nowrap;"><label style="font-family:Verdana;">项目</label>
                   <input id="pk_project" name="pk_project" class="mini-buttonedit" />                 
              </td>
                <td style="white-space:nowrap;"><label style="font-family:Verdana;">单据编号</label>
                   <input id="maintaincode" name="maintaincode"  class="mini-textbox" />                 
              </td>
           </tr>
         </table>
       </div>
   
       <!--撑满页面style="overflow-y:auto;height:400px;width:100%;white-space:nowrap"-->
       <div class="mini-fit" style="overflow-y:auto;height:600px;width:100%;white-space:nowrap">
        <fieldset style="border:solid 1px #aaa;padding:3px;">
              <legend>未回访单据</legend>
        <div id="datagrid1" class="mini-datagrid"  allowResize="true" style="overflow-y:auto;height:250px;width:100%;"
            url="/miniservice/service/mn.bs.framework.servlet.maintenance.QueryAction?finishstatus=isvisit-N&pk_prepared=<%=pk_prepared %> " idField="id">
            <div property="columns">
                <div name="action"  headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>     
                 <div field="requestcategory"  headerAlign="center">报修类别</div>
                <div field="maintaincode"  headerAlign="center">维修单编号</div>   
                <div field="project_name"   headerAlign="center" >项目名称</div>
                <div field="housename"  headerAlign="center">报修地址</div>   
                <div field="tellservdate"  headerAlign="center" dateFormat="yyyy-MM-dd H:mm">报修日期</div>
                <div field="reportpeople"  headerAlign="center">报修人</div>                 
                <div field="servcontent"  headerAlign="center" >维修内容</div>
                <div field="finishstatus"  headerAlign="center">完成状态</div>
                <div name="maintainid" field="maintainid" >主键</div>              
            </div>
        </div>
       </fieldset>
       <fieldset style="border:solid 1px #aaa;padding:3px;">
              <legend>最新未分配单据</legend>
        <div id="datagrid2" class="mini-datagrid"  allowResize="true" style="overflow-y:auto;height:249px;width:100%;"
            url="/miniservice/service/mn.bs.framework.servlet.maintenance.QueryAction?finishstatus=isvisit-init"  idField="id">
            <div property="columns">
                <!--<div type="indexcolumn"></div>        -->
                <div name="action"  headerAlign="center" align="center" renderer="onInitActionRenderer" cellStyle="padding:0;">#</div>   
               <div field="requestcategory"  headerAlign="center">报修类别</div>
               <div field="maintaincode"  headerAlign="center">维修单编号</div>  
                <div field="project_name"   headerAlign="center" >项目名称</div>   
                <div field="housename"  headerAlign="center">报修地址</div>   
                <div field="tellservdate"  headerAlign="center" dateFormat="yyyy-MM-dd H:mm">报修日期</div>
                <div field="reportpeople"  headerAlign="center">报修人</div>                 
                <div field="servcontent"  headerAlign="center" >维修内容</div>
                <div field="finishstatus"  headerAlign="center">完成状态</div>
                <div name="maintainid" field="maintainid" >主键</div>              
            </div>
        </div>
       </fieldset>
      </div>
      </div>
   </div>
   </div>
   我想让最新未分配单据根据屏幕大小撑满界面，现在的情况是最新未分配单据下面有一片空白
作者: factory    时间: 2012-11-6 16:19:00

直接在你想要撑满的那个控件外面增加一个<div class="mini-fit"></div>
mini-fit是可以让高度自适应,不过前提是fit控件的外层需要有一个高度
作者: sd_tz_123    时间: 2012-11-6 16:36:17

factory 发表于 2012-11-6 16:19
直接在你想要撑满的那个控件外面增加一个
mini-fit是可以让高度自适应,不过前提是fit控件的外层需要有一个 ...

<div class="mini-fit" style="overflow-y:auto;height:600px;width:100%;white-space:nowrap">
<fieldset style="border:solid 1px #aaa;padding:3px;">
</fieldset>
<fieldset style="border:solid 1px #aaa;padding:3px;">
</fieldset >
</div>
象这段代码，第二个fieldset 撑满界面，在它上面加可以吗
作者: factory    时间: 2012-11-6 16:40:33

sd_tz_123 发表于 2012-11-6 16:36
象这段代码，第二个fieldset 撑满界面，在它上面加可以吗

fit就是撑满剩余的高度,你可以参考示例:
http://miniui.com/demo/datagrid/fitsize.html
看下他的代码
作者: sd_tz_123    时间: 2012-11-6 16:54:17

factory 发表于 2012-11-6 16:40
fit就是撑满剩余的高度,你可以参考示例:
http://miniui.com/demo/datagrid/fitsize.html
看下他的代码 ...

我看了，可我不知道怎么放到我这里面，不会举一反三，求指点
作者: factory    时间: 2012-11-6 17:00:32

sd_tz_123 发表于 2012-11-6 16:54
我看了，可我不知道怎么放到我这里面，不会举一反三，求指点

比如你的页面有3块区域,上中下,上面高度50px,下面高度60px,中间的div需要自动撑满高度,那么就在这个div外面放一个<div class = "mini-fit">需要自动撑满的div</div>就可以了
作者: sd_tz_123    时间: 2012-11-6 17:12:12

factory 发表于 2012-11-6 17:00
比如你的页面有3块区域,上中下,上面高度50px,下面高度60px,中间的div需要自动撑满高度,那么就在这个div外 ...

这个意思我明白了，可是放到我的里面，不知道该怎么做
作者: factory    时间: 2012-11-6 17:43:49

sd_tz_123 发表于 2012-11-6 17:12
这个意思我明白了，可是放到我的里面，不知道该怎么做


你的代码里面外层的layout 还有 2个title=center是完全不需要的,把这3个div全部删除掉,你只是需要做上面一个toolbar,下面2个表格.
你的表格的高度不要设置固定值,设成100%,把表格的那固定高度值设置到fieldset上去,或者一个fieldsetd固定值,一个fieldset 100%.然后再把fit放到那个100%的fieldset外层上.
作者: sd_tz_123    时间: 2012-11-7 12:52:56

factory 发表于 2012-11-6 17:43
你的代码里面外层的layout 还有 2个title=center是完全不需要的,把这3个div全部删除掉,你只是需要做上面 ...

但是有一点想再请教下，我如果把第2个fieldset设置100% fit放在这上面，但是fit必须给个固定高度不是，我这个固定高度想根据屏幕大小分辨率大小动态变换，这段代码怎么写，我知道用屏幕大小-toolbar的高度-第一个fieldset的高度，可是我不知道怎么取toolbar的高度，和屏幕高度，还有什么好的解决方法吗？
作者: factory    时间: 2012-11-7 14:12:58

sd_tz_123 发表于 2012-11-7 12:52
但是有一点想再请教下，我如果把第2个fieldset设置100% fit放在这上面，但是fit必须给个固定高度不是，我 ...

fit是自动根据你所剩余的高度计算出高度的,所以你不需要给fit高度
作者: sd_tz_123    时间: 2012-11-7 14:29:13

factory 发表于 2012-11-7 14:12
fit是自动根据你所剩余的高度计算出高度的,所以你不需要给fit高度

如果界面是mini-tabs界面想让这个tabs界面撑满界面，需要给fit设置固定高度吗，如果tabs里面的界面是刚才那个界面的话
作者: factory    时间: 2012-11-7 15:27:26

sd_tz_123 发表于 2012-11-7 14:29
如果界面是mini-tabs界面想让这个tabs界面撑满界面，需要给fit设置固定高度吗，如果tabs里面的界面是刚才 ...

首先mini-fit需要使用的地方在于,自动撑满剩余高度.
如果页面只是一个控件,比如你的mini-tabs,那么直接设置tabs的styel="height:100%;"就可以了.不过前提是你的外层元素要有高度,例如body的高度要为100%;
body,html{
   height:100%;
   width:100%;
   padding:0;marging:0;
}
作者: sd_tz_123    时间: 2012-11-7 16:33:59

本帖最后由 sd_tz_123 于 2012-11-7 16:36 编辑
factory 发表于 2012-11-7 15:27
首先mini-fit需要使用的地方在于,自动撑满剩余高度.
如果页面只是一个控件,比如你的mini-tabs,那么直接设 ...


可是事实并非如此
  <style type="text/css">
    html, body
    {
        padding:0;border:0;margin:0;
        width:100%;height:100%;overflow:hidden;
        font-family:Verdana;
        font-size:12px;   
        line-height:22px;
    }  
    </style>
<div class="mini-fit">
<center>呼叫中心管理界面</center>
<div id="tabs1" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;" >      
     <div title="维修资料" url="./maintenancesrv/browmaintenancetable.jsp?pk_prepared=<%=pk_prepared %>" refreshOnClick="false">        
     </div>
     <div title="投诉资料" url="./complain/browcomplaintable.jsp?pk_prepared=<%=pk_prepared %>" refreshOnClick="false">        
     </div>
     <div title="维修事件" url="./res_client/clienteventbill.jsp" refreshOnClick="false">        
     </div>
      <div title="呼入呼出查询" url="./ref/gotophoneevent.jsp" refreshOnClick="false">        
     </div>
       <div title="未完成工单调查" url="./maintenancesrv/unvistmaintenance.jsp?"refreshOnClick="false">        
     </div>
</div>
</div>
可是界面却出现[attach]885[/attach]只有这点界面下面界面就是空白，你必须得给个固定高度才可以，不然的话界面并非撑满，而这个固定高度的设置也是死的，可是想动态控制不会
作者: factory    时间: 2012-11-7 17:07:30

sd_tz_123 发表于 2012-11-7 16:33
可是事实并非如此
  
    html, body
  1. <div class="mini-panel"  style="width:100%;height:100%;" showToolbar="true"  showFooter="true" showHeader="false" footerStyle="background-color:Transparent;" headerStyle="background-color:Transparent;">
  2.     <!--toolbar-->
  3.     <div property="toolbar" >
  4.            <table style="width:100%;">
  5.                <tr>
  6.                <td style="width:100%;">
  7.                <!--
  8.                     <span style="margin-left:5px;">
  9.         <a class="mini-button" iconCls="icon-search" plain="true">查看</a>
  10.                <span class="separator"></span>            
  11.            <a class="mini-button" iconCls="icon-edit" plain="true" >回访</a>
  12.              </span>
  13.                    <span class="separator"></span>
  14.                     -->
  15.                    <a class="mini-button" iconCls="icon-reload" plain="true">刷新</a>
  16.                       <span class="separator"></span>
  17.                <a class="mini-button" iconCls="icon-search" plain="true" >维修单</a>
  18.                </td>
  19.                <td style="white-space:nowrap;"><label style="font-family:Verdana;">报修日期</label>
  20.                    <input id="tellservdate_start" name="tellservdate_start" class="mini-datepicker" format="yyyy-MM-dd " required="true"/>至
  21.                    <input id="tellservdate_end" name="tellservdate_end" class="mini-datepicker" format="yyyy-MM-dd " required="true"/>                  
  22.               </td>
  23.               <td style="white-space:nowrap;"><label style="font-family:Verdana;">项目</label>
  24.                    <input id="pk_project" name="pk_project" class="mini-buttonedit" />                 
  25.               </td>
  26.                 <td style="white-space:nowrap;"><label style="font-family:Verdana;">单据编号</label>
  27.                    <input id="maintaincode" name="maintaincode"  class="mini-textbox" />                 
  28.               </td>
  29.            </tr>
  30.          </table>
  31.     </div>
  32.    
  33.     <fieldset style="border:solid 1px #aaa;padding:3px;">
  34.               <legend>未回访单据</legend>
  35.         <div id="datagrid1" class="mini-datagrid"  allowResize="true" style="overflow-y:auto;height:250px;width:100%;"
  36.             url="/miniservice/service/mn.bs.framework.servlet.maintenance.QueryAction?finishstatus=isvisit-N&pk_prepared=<%=pk_prepared %> " idField="id">
  37.             <div property="columns">
  38.                 <div name="action"  headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>     
  39.                  <div field="requestcategory"  headerAlign="center">报修类别</div>
  40.                 <div field="maintaincode"  headerAlign="center">维修单编号</div>   
  41.                 <div field="project_name"   headerAlign="center" >项目名称</div>
  42.                 <div field="housename"  headerAlign="center">报修地址</div>   
  43.                 <div field="tellservdate"  headerAlign="center" dateFormat="yyyy-MM-dd H:mm">报修日期</div>
  44.                 <div field="reportpeople"  headerAlign="center">报修人</div>                 
  45.                 <div field="servcontent"  headerAlign="center" >维修内容</div>
  46.                 <div field="finishstatus"  headerAlign="center">完成状态</div>
  47.                 <div name="maintainid" field="maintainid" >主键</div>              
  48.             </div>
  49.         </div>
  50.        </fieldset>
  51.       
  52.        <!--footer-->
  53.     <div property="footer" >
  54.         <fieldset style="border:solid 1px #aaa;padding:3px;">
  55.               <legend>最新未分配单据</legend>
  56.         <div id="datagrid2" class="mini-datagrid"  allowResize="true" style="overflow-y:auto;height:249px;width:100%;"
  57.             url="/miniservice/service/mn.bs.framework.servlet.maintenance.QueryAction?finishstatus=isvisit-init"  idField="id">
  58.             <div property="columns">
  59.                 <!--<div type="indexcolumn"></div>        -->
  60.                 <div name="action"  headerAlign="center" align="center" renderer="onInitActionRenderer" cellStyle="padding:0;">#</div>   
  61.                <div field="requestcategory"  headerAlign="center">报修类别</div>
  62.                <div field="maintaincode"  headerAlign="center">维修单编号</div>  
  63.                 <div field="project_name"   headerAlign="center" >项目名称</div>   
  64.                 <div field="housename"  headerAlign="center">报修地址</div>   
  65.                 <div field="tellservdate"  headerAlign="center" dateFormat="yyyy-MM-dd H:mm">报修日期</div>
  66.                 <div field="reportpeople"  headerAlign="center">报修人</div>                 
  67.                 <div field="servcontent"  headerAlign="center" >维修内容</div>
  68.                 <div field="finishstatus"  headerAlign="center">完成状态</div>
  69.                 <div name="maintainid" field="maintainid" >主键</div>              
  70.             </div>
  71.         </div>
  72.        </fieldset>
  73.     </div>

  75. </div>
复制代码
你的代码我给你修改了下,不要用fit,直接用panel布局.
panel分toolbar,body,和footer 上中下三部分,你把你的toolbar,未回访单据,最新未分配单据分别放到三块区域里面好了.
布局这样来跟你说:
1.上下结构的,可以用 panel,Splitter的上下布局
2.左右结构的,可以用Splitter的左右布局.
3.fit一般只是用于局部的想撑满剩余高度.
4.layout一般用于整体界面的布局,当然也可以处理上下左右的结构布局,隐藏掉多余的region=""就可以了
5.还有就是用html原生的一些方式布局,比如html的table.还有就是用CSS的样式来控制,比如float:left/right....等等
作者: sd_tz_123    时间: 2012-11-7 17:35:57

factory 发表于 2012-11-7 17:07
你的代码我给你修改了下,不要用fit,直接用panel布局.
panel分toolbar,body,和footer 上中下三部分,你把你 ...

factory太给力了，非常感谢，纠结我这么多天的问题总算解决了



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