0

我已经为使用 JQuery UI 布局(从这里下载)获得一个非常基本的布局而苦苦挣扎了几天。

以下是ng-includeed页面:

<div id="Main_Working_Page" ng-controller="Main_Working_Page_Controller" style="height:100%;">

    <div id="Muti_Panel" style="height:100%">

        <div class="ui-layout-north">
            This is the north pane
        </div>

        <div class="ui-layout-west">
            This is the north west
        </div>

        <div id="tabs-center" class="ui-layout-center no-scrollbar add-padding grey">

            This is the central panel

        </div>

    </div>

</div>

这是此页面的控制器:

MyApp.controller('Main_Working_Page_Controller' , ['$rootScope' , '$scope' ,  'DB_Services' , function( $rootScope , $scope , DB_Services) {

    console.log(">>> Started Main_Working_Page_Controller") ;

    var Main_Page_Layout = $("#Muti_Panel").layout(
        {
            defaults: {
                fxName              :   "slide"     ,
                fxSpeed             :   "slow"      ,
                spacing_closed      :   14          ,
                initClosed          :   false       ,
                size                :   "200"       ,
                spacing_open        :   6           ,
                spacing_closed      :   6 
            }    ,

            applyDefaultStyles      :   true        ,

            north: {
                fxName              :   "slide"     ,
                spacing_closed      :   8           ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   100         ,
                autoResize          :   false

            }    ,
            south: {
                fxName              :   "slide"     ,
                spacing_closed      :   8           ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   100         ,
                autoResize          :   false 
            }    ,
            east: {
                fxName              :   "slide"     ,
                spacing_closed      :   15          ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   300         ,
                autoResize          :   false
            }    ,
            center: {
                fxName              :   "slide"     ,
                closable            :   false       ,
                size                :   300
            }
        }
    ) ;

    Main_Page_Layout.resizeAll() ;

}]) ;

该页面显示为空白(什么都没有!!!),查看某些内容的唯一方法是在 Chrome 中进入调试模式并将其中的一些更改...location:absolute......location:relative.... 这样做时,布局仍然远离我想要的,但至少是可见的。

要么我在需要使用 UI 布局的方式上遗漏了一些真正基础的东西,要么与 AngularJS 存在冲突。

4

0 回答 0