1

私のUIには、ブラウザの右下隅の固定された場所にあるウィジェットがあります。

ユーザーがウィジェットのヘッダー部分をクリックして上にドラッグし、ウィジェットの高さを効果的に上げられるようにしたいと考えています。ウィジェットの下、左、および右のプロパティは変更されませんが、CSS の max-height で定義されているように、ウィジェットの最大の高さまで許可するように上部を変更できる必要があります。

このような例はありますか？jQueryUI にはサイズ変更可能な動作があることは知っていますが、残念ながらこのプロジェクトでは jQueryUI を使用できません。ただし、jQuery を使用しています。

ヒントやアイデア、またはjsfiddleの例は大歓迎です。私を正しい方向に導くための何か。サイズ変更可能な CSS3 を見て、このテキストエリアのように、標準のサイズ変更アイコンを右下隅に配置しました。

4

2 に答える 2

0

jQueryだけでこれを行うことができます。私の頭のてっぺんから、あなたはおそらくこのようなことをすることができます：

<div id="widget">
    <h3 id="widget-header">Header</h3>
    some content
</div>

<script language="javascript" type="text/javascript">
    var clientY = 0;
    var offset = null;
    var changeSize = false;

    $(function () {
        $("#widget-header")
            .mousedown(function (event) {
                clientY = event.pageY;
                offset = $("#widget").offset();
                changeSize = true;
            })
            .mousemove(function (event) {
                if (changeSize) {

                    // get the changes
                    var difY = event.pageY - clientY;
                    offset.top += difY;

                    // animate the changes
                    $("#widget").offset({ top: offset.top, left: offset.left });
                    $("#widget").height($("#widget").height() - difY);

                    // update the new positions
                    clientY = event.pageY;
                }
            })
            .mouseup(function (event) { changeSize = false; })
            .mouseout(function(event) { changeSize = false; });
    });

</script>
于 2011-10-21T18:06:52.863 に答える
0

おそらく、このプラグインが役立つでしょうか？

http://dev.iceburg.net/jquery/jqDnR/

于 2011-10-21T17:44:03.250 に答える