4

優れたjQuery UI Layout pluginを使用して、フル ページ インターフェイスを作成しようとしています。

中央のペインに複数のダイアログを保持し、それらをそのペイン内に含めることができるようにしたいと考えています。ここまでは順調ですね。ただし、ダイアログを「邪魔にならないように」ドラッグして右または下に移動できるようにしたいので、中央のペインにスクロールバーが表示され、中央のペインがダイアログボックスのスクロール可能なデスクトップとして機能できるようになります。他の UI の目的で、他のペインを常に表示したい。

HTML:

<div class="ui-layout-center">
    <div id="dialog1">dialog 1</div>
    <div id="dialog2">dialog 2</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-west">West</div>

jQuery:

$('body').layout(
{ 
    applyDemoStyles: true,
    livePaneResizing : true
});

var dialog1 = $("#dialog1")
    .dialog({})
    .parent().appendTo( $(".ui-layout-center") );

dialog1.draggable( "option", "containment", $(".ui-layout-center") );

$("#dialog2")
    .dialog({})
    .parent().appendTo( $(".ui-layout-center") );

ご覧のとおり、ほとんど機能しますが、スクロールは水平方向には機能しません。dialog1 を含めて実験しましたが、これは事態を悪化させます! おそらく、それは単なる CSS の問題か、設定と組み合わされたものです。何か案は？

jsフィドル

4

2 に答える 2

0

ドキュメントを調べたところ、CSS を使用してオーバーフロー値を変更することでこれを達成できるようです。

http://jsfiddle.net/vnVhE/1/embedded/result/

ご覧のとおり、適用される CSS は次のとおりです。

// disable scrolling in the other panes
.ui-layout-pane-north ,
.ui-layout-pane-west,
.ui-layout-pane-south {
    overflow: hidden !important;
}

.ui-layout-layout-center {
    overflow: auto
}

注：これにより水平スクロールが可能になりますが、私の意見では、少しトリッキーでハック的であることに注意してください。Chrome では、垂直スクロール バーの端近くにマウスを置いて適切に移動すると、問題なくスクロールできました。

于 2014-04-25T04:29:15.013 に答える
0

解決策は、ダイアログ ボックスの基礎となるドラッグ可能なものを操作するケースであることがわかりました。

$("#dialog2").dialog("widget").draggable(
{
    containment : [ 0, 0, 10000, 10000 ], 
    scroll: true, 
    scrollSensitivity : 100
});

明らかに、これらの値を操作してさまざまな結果を得ることができます。これが同じ立場の誰かに役立つことを願っています！

jsフィドル

于 2014-04-25T14:29:28.823 に答える