如何在jQuery UI Layout Plug-in中创建嵌套的center和south？

Question

如何在jQuery UI Layout Plug-in中创建嵌套的center和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>

Run Code Online (Sandbox Code Playgroud)

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

^与此类似,但在"中心"区域有"内部中心"和"内部南部".

Answer 1

nem*_*esv 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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

演示JSFiddle.

另请参阅官方复杂演示

归档时间：	12 年，5 月前
查看次数：	4815 次
最近记录：	12 年，5 月前