4

如何创建嵌套的内部中心和内部南部？除了显示“Inner Center”和“Inner South”之外，以下似乎没有做任何事情？如何让它显示 Inner Center 和 Inner South 的布局调整器？

<html>
    <head>
        <title>TEST</title>
        <script src="jquery-latest.js"></script>
        <script src="jquery.layout-latest.js"></script>
        <script>
            $(document).ready(function () {
                $('body').layout({ applyDefaultStyles: true });
            });
        </script>
    </head>

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

http://layout.jquery-dev.net/demos/example.html

^与此类似，但在“中心”区域有“内中心”和“内南”。

4

1 回答 1

8

如果您想要嵌套布局，您需要layout为每个想要嵌套的容器调用。因此，您需要标记当前ui-layout-center嵌套容器所在的位置，例如id：

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

并再次调用layouton#inner创建嵌套布局：

$('body').layout({
     applyDefaultStyles: true
});
$('#inner').layout({
     applyDefaultStyles: true
});

演示JSFiddle。

另请参阅官方综合演示

于 2013-07-19T05:12:39.333 回答