jQuery MiniUI

标题: splitter垂直，在tabs中套了一个tabs,内层的tabs无法自适应 [打印本页]
作者: cuiyuanyuan    时间: 2015-7-15 13:19:50     标题: splitter垂直，在tabs中套了一个tabs,内层的tabs无法自适应

splitter垂直，在tabs中套了一个tabs,内层的tabs无法自适应
作者: dforce    时间: 2015-7-15 13:39:39

请提供相关代码
作者: cuiyuanyuan    时间: 2015-7-15 14:07:05

dforce 发表于 2015-7-15 13:39
请提供相关代码

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Splitter</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

   
    <script src="../../scripts/boot.js" type="text/javascript"></script>
   
      

</head>
<body>
    <div class="mini-splitter" style="width: 1200px; height: 700px;" borderstyle="border:0">
                <div size="40%" showcollapsebutton="true">
                    <div class="mini-splitter" style="width: 100%; height: 100%;" vertical="true" borderstyle="border:0">
                        <div size="60%" showcollapsebutton="true">
                            <div class="mini-fit">
        <div class="mini-tabs" activeindex="0" id="str_STsystemNoticeMNDGTab" style="width: 100%; height: 100%;" borderstyle="border:0" showheader="false">
            <div name="str_STsystemNoticeMNDGView" style="width: 100%; height: 100%">
                <div class="mini-panel" title="公告列表" style="width: 100%; height: 92%">
                    <div class="mini-datagrid" showheader="false" showpager="false" style="width: 100%; height: 100%" >
                        <div property="columns">
                            <div field="NoticeTheme" width="286" headeralign="center" >标题</div>
                            <div field="NoticePublishDate" width="117" headeralign="center" align="center" >发布日期</div>
                            <div field="NoticeState" width="60" headeralign="center" align="center">是否发布</div>
                        </div>
                    </div>
                </div>
                <div style="width: 65%; text-align: right; float: left;">
                    <div class="mini-pager" style="width: 100%; background: #EFF2F4; border: 1px solid gray; margin-right: 5px; margin-top: 5px; margin-bottom: 5px;"
                        totalcount="123" pagesize="30" onpagechanged="sn_SNOnPageChanged" sizelist="[5,10,20,30,50,100]">
                    </div>
                </div>
                <div style="width: 30%; text-align: right; float: right">
                    <a class="mini-button"  title="新增" data-placement="bottomright" onclick="var tabs = mini.get('str_STsystemNoticeMNDGTab'); var tab = tabs.getTab('str_STsystemNoticeMNDGNew');tabs.activeTab(tab);" style="width: 60px; height: 23px; padding-top: 3px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px;">新公告</a>
                </div>
            </div>
            <div name="str_STsystemNoticeMNDGNew" style="width: 100%; height: 100%">
                <div class="mini-fit">
                    <table style="width: 100%; height: 100%">
                        <tr>
                            <td style="font-weight: bold; text-align: left; height: 5%">
                                标题不超过100个字)
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 100%; height: 5%">
                                <input class="mini-textbox" vtype="maxLength:100" required="true"  style="width: 100%" />
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold; text-align: left">
                                正文
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 100%; height: 80%">
                                <textarea class="mini-textarea"  style="width: 100%; height: 100%"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 100%; vertical-align: middle; height: 5%">
                                <div style="width: 60%; float: left; text-align: left; vertical-align: middle; padding-top: 5px">
                                    状态:
                                <input checked name="sn_SNState" style="vertical-align: middle" type="radio" />
                                    立即发布
                                <input style="vertical-align: middle" name="sn_SNState" type="radio" />
                                    暂不发布
                            级别:
                                <input checked name="sn_SNLevel" style="vertical-align: middle" type="radio" />
                                    一般
                                <input style="vertical-align: middle" name="sn_SNLevel" type="radio" />
                                    紧急
                                </div>
                                <div style="width: 40%; float: right; text-align: right">
                                    <a class="mini-button"  title="保存" data-placement="bottomright" style="width: 60px; height: 20px;">保存</a>
                                    <a class="mini-button"  title="返回" data-placement="bottomright" style="width: 60px; height: 20px;">返回</a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
                        </div>
                        <div showcollapsebutton="true">
                            <div ></div>
                        </div>
                    </div>
                </div>
                <div showcollapsebutton="true">
                    <div class="mini-splitter" style="width: 100%; height: 100%;" vertical="true" borderstyle="border:0">
                        <div size="60%" showcollapsebutton="true">
                            <div ></div>
                        </div>
                        <div showcollapsebutton="true">
                            <div ></div>
                        </div>
                    </div>
                </div>
            </div>

</body>
</html>
作者: cuiyuanyuan    时间: 2015-7-15 14:15:22     标题: 操作步骤如下

cuiyuanyuan 发表于 2015-7-15 14:07
Splitter
   

[attach]6356[/attach][attach]6355[/attach]
作者: dforce    时间: 2015-7-15 14:25:26

cuiyuanyuan 发表于 2015-7-15 14:07
Splitter
   

你这页面结构真复杂
tabs内部页面默认有padding和margin,撑开了
<div class="mini-tabs" activeindex="0" id="str_STsystemNoticeMNDGTab" style="width: 100%;
                            height: 100%;" borderstyle="border:0" showheader="false" bodyStyle="padding:0;margin:0">
作者: cuiyuanyuan    时间: 2015-7-15 15:39:19

dforce 发表于 2015-7-15 14:25
你这页面结构真复杂
tabs内部页面默认有padding和margin,撑开了

还是不行呀，你那边可以了吗?!
作者: cuiyuanyuan    时间: 2015-7-15 15:43:44

dforce 发表于 2015-7-15 14:25
你这页面结构真复杂
tabs内部页面默认有padding和margin,撑开了

[attach]6358[/attach][attach]6358[/attach]
作者: cuiyuanyuan    时间: 2015-7-15 16:37:44

dforce 发表于 2015-7-15 13:39
请提供相关代码

where are you ? 问题没解决呀
作者: dforce    时间: 2015-7-15 16:50:36

cuiyuanyuan 发表于 2015-7-15 16:37
where are you ? 问题没解决呀

在处理
作者: felt    时间: 2015-7-16 10:03:13

cuiyuanyuan 发表于 2015-7-15 16:37
where are you ? 问题没解决呀

检查发现是由于你内部用于布局的table引起的
我们控件内部的高度都由js计算，table布局会有很大的不稳定性，请用div布局
作者: cuiyuanyuan    时间: 2015-7-16 10:05:15

dforce 发表于 2015-7-15 16:50
在处理

版主，有没有什么方法，可以刷新一下，从而让他适应高度。搞了一天了，还是没有解决办法呀！！！
作者: felt    时间: 2015-7-16 10:26:08

cuiyuanyuan 发表于 2015-7-16 10:05
版主，有没有什么方法，可以刷新一下，从而让他适应高度。搞了一天了，还是没有解决办法呀！！！ ...

10楼已回复，请用div布局代替table布局
作者: cuiyuanyuan    时间: 2015-7-16 11:05:17

felt 发表于 2015-7-16 10:03
检查发现是由于你内部用于布局的table引起的
我们控件内部的高度都由js计算，table布局会有很大的不稳定 ...

换成div之后，仍然有问题
<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Splitter</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />


    <script src="../../scripts/boot.js" type="text/javascript"></script>



</head>
<body>
    <div class="mini-splitter" style="width: 1200px; height: 700px;" borderstyle="border:0">
                <div size="40%" showcollapsebutton="true">
                    <div class="mini-splitter" style="width: 100%; height: 100%;" vertical="true" borderstyle="border:0">
                        <div size="60%" showcollapsebutton="true">
                            <div class="mini-fit">
        <div class="mini-tabs" activeindex="0" id="str_STsystemNoticeMNDGTab" style="width: 100%; height: 100%;" borderstyle="border:0" showheader="false">
            <div name="str_STsystemNoticeMNDGView" style="width: 100%; height: 100%">
                <div class="mini-panel" title="公告列表" style="width: 100%; height: 92%">
                    <div class="mini-datagrid" showheader="false" showpager="false" style="width: 100%; height: 100%" >
                        <div property="columns">
                            <div field="NoticeTheme" width="286" headeralign="center" >标题</div>
                            <div field="NoticePublishDate" width="117" headeralign="center" align="center" >发布日期</div>
                            <div field="NoticeState" width="60" headeralign="center" align="center">是否发布</div>
                        </div>
                    </div>
                </div>
                <div style="width: 65%; text-align: right; float: left;">
                    <div class="mini-pager" style="width: 100%; background: #EFF2F4; border: 1px solid gray; margin-right: 5px; margin-top: 5px; margin-bottom: 5px;"
                        totalcount="123" pagesize="30" sizelist="[5,10,20,30,50,100]">
                    </div>
                </div>
                <div style="width: 30%; text-align: right; float: right">
                    <a class="mini-button"  title="新增" data-placement="bottomright" style="width: 60px; height: 23px; padding-top: 3px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px;">新公告</a>
                </div>
            </div>
            <div name="str_STsystemNoticeMNDGNew" style="width: 100%; height: 100%">
                <div class="mini-fit">
                    <div style="width: 100%; height: 100%">

                            <div style="font-weight: bold; text-align: left; height: 5%">
                                标题不超过100个字)
                            </div>

                            <div style="width: 100%; height: 5%">
                                <input class="mini-textbox" vtype="maxLength:100" required="true"  style="width: 100%" />
                            </div>

                            <div style="font-weight: bold; text-align: left">
                                正文
                            </div>

                            <div style="width: 100%; height: 80%">
                                <textarea class="mini-textarea"  style="width: 100%; height: 100%"></textarea>
                            </div>

                            <div style="width: 100%; vertical-align: middle; height: 5%">
                                <div style="width: 60%; float: left; text-align: left; vertical-align: middle; padding-top: 5px">
                                    状态:
                                <input checked name="sn_SNState" style="vertical-align: middle" type="radio" />
                                    立即发布
                                <input style="vertical-align: middle" name="sn_SNState" type="radio" />
                                    暂不发布
                            级别:
                                <input checked name="sn_SNLevel" style="vertical-align: middle" type="radio" />
                                    一般
                                <input style="vertical-align: middle" name="sn_SNLevel" type="radio" />
                                    紧急
                                </div>
                                <div style="width: 40%; float: right; text-align: right">
                                    <a class="mini-button"  title="保存" data-placement="bottomright" style="width: 60px; height: 20px;">保存</a>
                                    <a class="mini-button"  title="返回" data-placement="bottomright" style="width: 60px; height: 20px;">返回</a>
                                </div>
                            </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
                        </div>
                        <div showcollapsebutton="true">
                            <div ></div>
                        </div>
                    </div>
                </div>
                <div showcollapsebutton="true">
                    <div class="mini-splitter" style="width: 100%; height: 100%;" vertical="true" borderstyle="border:0">
                        <div size="60%" showcollapsebutton="true">
                            <div ></div>
                        </div>
                        <div showcollapsebutton="true">
                            <div ></div>
                        </div>
                    </div>
                </div>
            </div>

</body>
</html>

作者: cuiyuanyuan    时间: 2015-7-16 11:08:23

felt 发表于 2015-7-16 10:26
10楼已回复，请用div布局代替table布局

点"新公告"----->点"splitter那个按钮返回"，你就能看到效果
作者: cuiyuanyuan    时间: 2015-7-16 11:17:19

felt 发表于 2015-7-16 10:26
10楼已回复，请用div布局代替table布局

[attach]6363[/attach][attach]6364[/attach][attach]6365[/attach][attach]6366[/attach]
作者: cuiyuanyuan    时间: 2015-7-16 11:19:12

felt 发表于 2015-7-16 10:26
10楼已回复，请用div布局代替table布局

多点几次，再点击"返回"或者"新公告"，你就能看到效果
作者: felt    时间: 2015-7-16 11:32:32

cuiyuanyuan 发表于 2015-7-16 11:28
不知，您有没有更便捷的联系方式，比如说QQ，截图或者发文字也方便，能够及时，向您反映问题！！！ ...

监听tabs的onactivechanged事件，切换的时候主动mini.layout()重新调整一下
作者: cuiyuanyuan    时间: 2015-7-16 11:41:36

felt 发表于 2015-7-16 11:32
监听tabs的onactivechanged事件，切换的时候主动mini.layout()重新调整一下

就要这效果，太赞了，谢谢，多谢，感谢!!!
作者: cuiyuanyuan    时间: 2015-7-16 12:21:06

felt 发表于 2015-7-16 11:32
监听tabs的onactivechanged事件，切换的时候主动mini.layout()重新调整一下

没关系，只要能解决问题，这个最重要，我还有好多问题，需要解决呢！！！



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