jQuery MiniUI

标题: miniui可以实现下面图片显示的功能吗？ [打印本页]

作者: linda931 时间: 2014-2-21 08:36:16 标题: miniui可以实现下面图片显示的功能吗？

[attach]3949[/attach][attach]3948[/attach]

作者: factory 时间: 2014-2-21 09:20:47

http://www.miniui.com/demo/#src=outlookbar/outlookbar.html 里面自己放查询输入框等

作者: linda931 时间: 2014-2-21 10:00:53

本帖最后由 linda931 于 2014-2-21 10:03 编辑

factory 发表于 2014-2-21 09:20
http://www.miniui.com/demo/#src=outlookbar/outlookbar.html 里面自己放查询输入框等

<div id="toolbar1" class="mini-toolbar" style="padding:2px;">
      <table style="width:100%;" cellpadding="0" cellspacing="0">
         <tr>
            <td style="width:100%;">
                  <a style="cursor:default;padding:2px;padding-left:5px;">功能管理：</a>
                  <span class="separator"></span>
                  <a class="mini-button" iconCls="icon-addfolder" plain="true" enabled="false">增加</a>
                  <a class="mini-button" iconCls="icon-edit" plain="true">修改</a>
                  <a class="mini-button" iconCls="icon-remove" plain="true">删除</a>
                  <a class="mini-button" iconCls="icon-download" plain="true">下载</a>
            </td>
            <td style="white-space:nowrap;">
                  <a class="mini-button" iconCls="panel-expand" plain="true">收缩</a>
            </td>
         </tr>
      </table>
</div>
<div>
<div id="p1" style="border:1px solid #909aa6;border-top:0;height:100%;padding:5px; width:200px; float:left;">
      body<br />
      body
</div>
<div id="layout1" class="mini-layout" style="width: 80%; height: 400px; float:left;" borderstyle="border:solid 1px #aaa;">
      <div title="north" region="north" height="80" expanded="false">
         north
      </div>
      <div title="south" region="south" showsplit="false" showheader="true" height="80"
         showspliticon="true">
         south
      </div>
      <div title="west" region="west" width="200" expanded="false" showspliticon="true">
         west
      </div>
      <div title="east" region="east" showclosebutton="true" showspliticon="true">
         east
      </div>
      <div title="center" region="center">
         <input type="button" value="隐藏" />
         <input type="button" value="显示" /><br />
         <br />
         <input type="button" value="折叠" />
         <input type="button" value="展开" />
      </div>
</div>
</div>
<script type="text/javascript">
      mini.parse();

      function expand(e) {
         var btn = e.sender;

         var display = $('#p1').css('display');
         if (display == "none") {
            btn.setIconCls("panel-collapse");
            btn.setText("收缩");
            $('#p1').css('display', "block");
         } else {
            btn.setIconCls("panel-expand");
            btn.setText("展开");
            $('#p1').css('display', "none");
         }

      }
</script>

这是我修改有的一个样式代码我想把div：layout1 的宽度设置为100% 但是div1 显示时 layout1 就不显示了。

作者: factory 时间: 2014-2-21 11:15:11

本帖最后由 factory 于 2014-2-21 11:16 编辑

linda931 发表于 2014-2-21 10:00
功能管理：

...

做这种效果,你就直接JS计算出来dom元素的宽度,然后赋给他.

要么就用table布局,用td做自适应撑满效果

你这里面的布局都是HTML的原生dom元素,所以要么JS计算,要么table布局来处理宽度自适应的问题

作者: felt 时间: 2014-2-21 11:23:26

linda931 发表于 2014-2-21 10:00
功能管理：

...

[attach]3951[/attach]
我用table布局按你的意思做了下，你看下效果

作者: linda931 时间: 2014-2-21 13:05:23

felt 发表于 2014-2-21 11:23
我用table布局按你的意思做了下，你看下效果

不错！基本上做出了我要的效果。

谢谢了！！

作者: linda931 时间: 2014-2-21 13:58:33

felt 发表于 2014-2-21 11:23
我用table布局按你的意思做了下，你看下效果

你好！
我想问一下你做这个例子中如何让ID为p1的div高度涨满td？

作者: felt 时间: 2014-2-21 14:36:11

linda931 发表于 2014-2-21 13:58
你好！
我想问一下你做这个例子中如何让ID为p1的div高度涨满td？

[attach]3955[/attach]
不如用我们的splitter来布局好了，更方便点，看这个

作者: linda931 时间: 2014-2-21 15:10:26

felt 发表于 2014-2-21 14:36
不如用我们的splitter来布局好了，更方便点，看这个

这个不错！可能就是部分功能不熟悉吧!

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