jQuery MiniUI

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

miniui可以实现下面图片显示的功能吗? [复制链接]

Rank: 4

跳转到指定楼层
楼主
发表于 2014-2-21 08:36:16 |只看该作者 |倒序浏览

附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 8Rank: 8

沙发
发表于 2014-2-21 09:20:47 |只看该作者
http://www.miniui.com/demo/#src=outlookbar/outlookbar.html  里面自己放查询输入框等

Rank: 4

板凳
发表于 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 就不显示了。

Rank: 8Rank: 8

地板
发表于 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布局来处理宽度自适应的问题

Rank: 8Rank: 8

5#
发表于 2014-2-21 11:23:26 |只看该作者
linda931 发表于 2014-2-21 10:00
功能管理:
                    
        ...


我用table布局按你的意思做了下,你看下效果

附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 4

6#
发表于 2014-2-21 13:05:23 |只看该作者
felt 发表于 2014-2-21 11:23
我用table布局按你的意思做了下,你看下效果

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

   谢谢了!!

Rank: 4

7#
发表于 2014-2-21 13:58:33 |只看该作者
felt 发表于 2014-2-21 11:23
我用table布局按你的意思做了下,你看下效果

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

Rank: 8Rank: 8

8#
发表于 2014-2-21 14:36:11 |只看该作者
linda931 发表于 2014-2-21 13:58
你好!
我想问一下你做这个例子中如何让ID为p1的div高度涨满td?


不如用我们的splitter来布局好了,更方便点,看这个

附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 4

9#
发表于 2014-2-21 15:10:26 |只看该作者
felt 发表于 2014-2-21 14:36
不如用我们的splitter来布局好了,更方便点,看这个

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

Archiver|普加软件

GMT+8, 2024-11-5 11:03 , Processed in 1.037554 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部