Question

我正在使用jQuery来显示选项卡区域，并且我在选项卡下方有一个表格。整个事情，标签和表格都是可重复的。

我希望桌子有一个滚动条，这样当您重新调整容器大小时，滚动条会重新调整大小。

现在，我有两个问题。

1）我希望滚动条从标签下方延伸到标签容器对象的底部。当用户重新调整窗口大小时，我希望它是动态的。但我无法将滚动条的底部保持在容器底部正上方

2）整个容器（标签和表格）都是可拖动的。但这似乎禁用了滚动条的拖动（所以你不能拖动滚动 - “电梯”..你必须点击滚动条的箭头或“电梯井”，移动它。我试过

为了彻底，我已经包含了所有代码，以便您可以重现问题。打开这个.htm文件，尝试拉伸窗口并尝试使用滚动条，你会看到我的问题。拉伸窗口使得卷轴拉远远离容器底部。

非常感谢任何帮助尝试！

编辑 - ＆GT;我现在看到我尝试显示可滚动区域已禁用“单击选项卡”功能。所以下面的代码实际上有三个问题 - 你不能点击选项卡并采取任何行动。（有一个标签，如果你点击它，内容应该隐藏。显然我的div的重叠已经打破了这个功能！）

<html><head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</script>


<style type="text/css">
#grid-tabs {
    width: 720px;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 185px;
}
.outer-container{
    height:         100%;
    position:       relative;
    top:            -45px;
}
.filler{
    height:         60px;
    position:       relative;
    top:            -60px;
}
.inner-container{
    height:         auto;
    overflow-y:     scroll;
    position:       relative;
    top:            -15px;
}
.scroll-area{
    height:         70%;
    position:       relative;
    top:            0px;
}
table{
    border:1px solid #62bbe8;
}
td {
    width: 50px;
}

</style>
</head><body>

<div id='grid-tabs'>
    <ul>
    </ul>

    <div class='outer-container'>
        <div class='filler'>
        </div>
        <div class='inner-container'>
            <div class='scroll-area'>
            <table class='content'>
                <tbody>
                    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
                    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
                    <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
                    <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
                    <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
                    <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
                    <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
                    <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
                    <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr>
                    <tr><td>A.1</td><td>A.2</td><td>A.3</td></tr>
                    <tr><td>B.1</td><td>B.2</td><td>B.3</td></tr>
                    <tr><td>C.1</td><td>C.2</td><td>C.3</td></tr>
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery('#grid-tabs').tabs({collapsible:true}).draggable().resizable();
    jQuery('#grid-tabs').tabs('add','#grid-tabs-1',"Tab 1");

</script>
</body>

Answer 1

好的，我正在回答我自己的问题。

我能够解决这三个问题，并提出了一个可拖动的标签区域，其中滚动条可以正确调整大小。

这是最终的代码。 See it in action at JS Bin.

请注意此行中包含的魔法：

        jQuery('#grid-tabs').tabs({collapsible:true})
            .draggable({handle:'ul'})
            .resizable({alsoResize:'.container'});

alsoResize！这就是诀窍。并且使“ul”成为我的句柄（这意味着它可以被标签部分拖动），现在滚动条功能正常。

完美！希望这有助于某人...

    <html><head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
    </script>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
    </script>


    <style type="text/css">
    #grid-tabs {
        width: 720px;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 185px;
    }
    .container{
        height:         auto;
        overflow-y:     scroll;
        position:       relative;
        top:            0px; /* changed */
    }
    .scroll-area{
        height:         70%;
        position:       relative;
        top:            0px;
    }
    table{
        border:1px solid #62bbe8;
    }
    td {
        width: 50px;
    }

    </style>
    </head><body>

    <div id='grid-tabs'>
        <ul>
        </ul>

            <div class='container'>
                <div class='scroll-area'>
                <table class='content'>
                    <tbody>
                        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
                        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
                        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
                        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
                        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
                        <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
                        <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
                        <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
                        <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr>
                        <tr><td>A.1</td><td>A.2</td><td>A.3</td></tr>
                        <tr><td>B.1</td><td>B.2</td><td>B.3</td></tr>
                        <tr><td>C.1</td><td>C.2</td><td>C.3</td></tr>
                    </tbody>
                </table>
                </div>
            </div>

    </div>

    <script type="text/javascript">
        jQuery('#grid-tabs').tabs({collapsible:true}).draggable({handle:'ul'}).resizable({alsoResize:'.container'});
        jQuery('#grid-tabs').tabs('add','#grid-tabs-1',"Tab 1");

    </script>
    </body>

CSS / jQuery：当容器重新调整大小时，如何让可滚动区域正确地重新调整大小？

1 个答案: