代码之家 › 专栏 › 技术社区 › user254610

css/jquery:当容器重新调整大小时,如何使可滚动区域重新调整大小?

scroll jquery-ui css jquery

user254610 · 技术社区 · 16 年前

我使用jquery来显示一个选项卡区域,并且在选项卡下面有一个表。所有的东西,标签和桌子,都是可以重新调整大小的。

我想让桌子有一个滚动条,这样当你调整容器的大小时,滚动条就会调整大小。

现在,我有两个问题。

1)我希望滚动条从选项卡的正下方延伸到选项卡容器对象的底部。我希望在用户重新调整窗口大小时保持动态。但我不能把滚动条的底部完全放在容器的底部

2)整个容器(标签和表格)是可拖动的。但这似乎禁用了滚动条的拖动(因此您不能拖动滚动条-“电梯”)。你必须点击箭头或滚动条的“电梯轴”来移动它。我在jquery中尝试了“handle”参数,但无法使其工作。

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

任何帮助的尝试都是非常感激的!

编辑-->我现在看到我显示可滚动区域的尝试已禁用“单击选项卡”功能。所以下面的代码实际上有三个问题-你不能点击标签并获得任何操作。(使用一个选项卡,如果单击它,内容应该隐藏。显然,我叠加的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>

1 回复 | 直到 16 年前

Brock Adams 15 年前

好吧,我在回答我自己的问题。

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

这是最后的密码。γ See it in action at JS Bin.

请注意这一行中包含的魔力:

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

同样的大小!这就是诀窍。将“ul”设为我的句柄(这意味着它可以被tab部分拖动),现在滚动条就可以工作了。

很完美!希望这能帮助某人…

    <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>