본문 바로가기

Development/Javascript

jquery layout

반응형

jquery layout에는 많은 기능을 지원 한다.

이번에 테스트 한 것은 layout에 panel의 split 기능 이다.

   

결과를 우선 확인 하면,

소스는 아래와 같이 단순하다.

 
<html>
<head>
    <link href="~/Content/plugin/layout/layout-default.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
    <script src="~/Scripts/plugin/layout/jquery.layout.min.js"></script>
    <script>
        $(document).ready(function () {
            // container 의 layout 을 설정
            $('#container').layout({
                south: {
                    size : .5  // 높이 50%
                }
            });
        });
    </script>
</head>
<body>
    <div id="container" style="height:100%; width:100%">
        <div class="ui-layout-center">Center</div>
        <div class="ui-layout-south">South</div>
    </div>
</body>
</html>


참조 : jquery.layout URL : http://layout.jquery-dev.com/

반응형