我已经为使用 JQuery UI 布局(从这里下载)获得一个非常基本的布局而苦苦挣扎了几天。
以下是ng-include
ed页面:
<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 存在冲突。