为什么我的缩放器栏变绿?

时间:2013-07-28 17:02:53

标签: javascript jquery css jquery-ui

在西部和内部中心区域之间的我的缩放器栏在调整大小时变为绿色但是我在内部中心区域和内南区域之间的缩放器栏没有。为什么会这样,如何在调整大小时将其变为绿色(包括拖动手柄的橙色高亮显示)?

HTML

<div class="ui-layout-center" id="inner">
    <div id="inner-center" class="ui-layout-center">Inner Center</div>
    <div id="inner-south" class="ui-layout-south">Inner South</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-west">West</div>

CSS

.ui-layout-north {
    border: none;
}
.ui-layout-center {
    border: none;
}
.ui-layout-pane-center {
    padding: 0px;
}
#inner-center {
    border: 0px;
}
#inner-south {
    border: 0px;
}

的Javascript

var myLayout;
var myLayoutInner;

$(document).ready(function () {
    myLayout = $('body').layout({ //    reference only - these options are NOT required because 'true' is the default
        closable: true, // pane can open & close
        resizable: true, // when open, pane can be resized 
        slidable: false, // when closed, pane can 'slide' open over other panes - closes on mouse-out
        livePaneResizing: true,

        north__size: '100',
        north__minSize: '100',
        north__maxSize: '100',
        north__closable: false,
        north__resizable: false,
        north__slidable: false,
        north__spacing_open: 0,
        north__spacing_closed: 0,

        west__togglerLength_closed: '100%', // toggle-button is full-width of resizer-bar
        west__spacing_closed: 20 // big resizer-bar when open (zero height)
    });

    myLayoutInner = $('#inner').layout({
        applyDefaultStyles: true,
        slidable: false, // when closed, pane can 'slide' open over other panes - closes on mouse-out
        livePaneResizing: true,
        stateManagement__enabled: true,
        //initClosed: true,
        //south__minSize: 100
    });
});

你可以在这里看到它: http://jsfiddle.net/xUvJk/

1 个答案:

答案 0 :(得分:1)

问题的原因很简单:

myLayoutInner = $('#inner').layout({
    applyDefaultStyles: true, // this line should be omitted
    ...
});

此行导致分隔符(灰色)的默认颜色覆盖悬停时的绿色和橙色。希望这会有所帮助。

以下是一个工作示例:http://jsfiddle.net/xUvJk/1/


亲切的问候,
迈克尔。