jquery - 在底部位置固定的 div 顶部添加一个可调整大小的 handle

Question

如何使固定位置底部的 div 从其顶部的 handle 展开？

如果您查看 StackOverflow 问题表单，它的底部有一个可展开的句柄，我如何将这样的句柄放在 div 的顶部？

jquery-ui 的可调整大小似乎不支持此功能:http://jsfiddle.net/Ka7P2/725/ .

没有 jquery 的解决方案就可以了。

Answer 1

HTML:

<div id="container" class="resizable">
    <div id="handle" class="ui-resizable-handle ui-resizable-n"></div>
</div>

jQuery:

$(document).ready(function () {
    $(".resizable").resizable({
        handles: {
            'n': '#handle'
        }
    });
});

CSS:

body {
    height: 1000px;
}
#container {
    width: 100%;
    background: lightgray;
    height: 100px;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
}
#handle {
    width: 100%;
    height: 5px;
    top: -6px;
    background-color: #000;
}

http://jsfiddle.net/Ka7P2/732/