0

My resizer bar that is between the West and Inner Center area turns green on resizing but my resizer bar that is between the Inner Center area and Inner South area does not. Why would this be and how can I make it turn green when resizing (including the orange highlighting for the drag handle)?

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
    });
});

You can see it in action here: http://jsfiddle.net/xUvJk/

4

1 回答 1

1

问题的原因很简单：

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

此行导致分隔符的默认颜色（灰色）在悬停时覆盖绿色和橙色。希望这可以帮助。

这是一个工作示例：http: //jsfiddle.net/xUvJk/1/。

亲切的问候，
迈克尔。

于 2013-07-28T17:18:33.700 回答