4

我正在尝试使用出色的jQuery UI 布局插件创建一个完整的页面界面。

我希望中央窗格包含多个对话框并允许它们包含在该窗格中。到目前为止，一切都很好。但是，我还希望能够将对话框“移开”，并将它们移动到右侧或底部，以便中央窗格形成滚动条并允许中央窗格充当对话框的可滚动桌面。我希望其他窗格始终存在以用于其他 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 问题或与设置相结合。有任何想法吗？

jsFiddle

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
}

注意：请记住，虽然这允许水平滚动，但在我看来，它充其量是有点棘手和hackish。在 Chrome 下，如果我将鼠标放在垂直滚动条的边缘附近并且它正确移动，我可以很好地滚动。

于 2014-04-25T04:29:15.013 回答
0

解决方案对我来说是一个操纵对话框底层可拖动的案例：

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

显然，可以使用这些值来获得不同的结果。我希望这对处于相同位置的其他人有所帮助！

jsFiddle

于 2014-04-25T14:29:28.823 回答