我正在使用jQuery UI Layout Plug-in作为angularjs应用程序。我使用典型的中心,北,南,东,西布局。
我要做的就是更改调整器栏切换单击的方向。
具体来说,我有一个中心窗格,左侧和右侧都有一个调整大小栏。单击右侧调整大小栏时,它会一直向右移动,使中心窗格全屏显示。相反,我希望此窗格一直向左移动,关闭中心窗格并使东窗格全屏显示。
我几乎没有找到有关如何完成此操作的文档。任何帮助不胜感激!
x.directive('uiLayoutContainer', function (cmcUserSettings, $timeout) {
return {
priority:0,
restrict: 'EA',
link: function(scope, elm, attrs) {
console.log("Applying layout");
var layout = angular.element(elm).layout(
{
applyDefaultStyles: true,
north: {
applyDefaultStyles:false,
resizable: false
},
south: {
initClosed:cmcUserSettings.userSettings.statusPanelClosed,
onopen:function(){
cmcUserSettings.userSettings.statusPanelClosed = false;
scope.$apply();
},
onclose:function(){
cmcUserSettings.userSettings.statusPanelClosed = true;
scope.$apply();
}
},
west: {
initClosed:cmcUserSettings.userSettings.objectTreePanelClosed,
onopen:function(){
if(layout && layout.west && layout.west.pane && layout.west.pane.length && layout.west.pane[0].className.indexOf(' cmc-layout-west-open') === -1)
layout.west.pane[0].className += ' cmc-layout-west-open';
cmcUserSettings.userSettings.objectTreePanelClosed = false;
scope.$apply();
},
onclose:function(){
if(layout && layout.west && layout.west.pane && layout.west.pane.length && layout.west.pane[0].className.indexOf(' cmc-layout-west-open') > -1)
layout.west.pane[0].className = layout.west.pane[0].className.substring(0, layout.west.pane[0].className.indexOf(' cmc-layout-west-open')) + layout.west.pane[0].className.substring(layout.west.pane[0].className.indexOf(' cmc-layout-west-open') + 21, layout.west.pane[0].className.length);
cmcUserSettings.userSettings.objectTreePanelClosed = true;
scope.$apply();
}
}
});
scope.layout = layout;
$timeout(function(){
if(layout && layout.west && layout.west.pane && layout.west.pane.length && layout.west.pane[0].className.indexOf(' cmc-layout-west-open') === -1 && !cmcUserSettings.userSettings.objectTreePanelClosed)
layout.west.pane[0].className += ' cmc-layout-west-open';
});
}
};
});
x.directive('uiLayoutCenter', ['ui.config', function (uiConfig) {
return {
priority:1,
restrict: 'EA',
transclude:true,
replace:true,
template:'<div class="ui-layout-center"><div ng-transclude></div></div>'
};
}]);
x.directive('uiLayoutNorth', ['ui.config', function (uiConfig) {
return {
priority:1,
restrict: 'EA',
transclude:true,
replace:true,
template:'<div class="ui-layout-north"><div ng-transclude></div></div>'
};
}]);
x.directive('uiLayoutSouth', ['ui.config', function (uiConfig) {
return {
priority:1,
restrict: 'EA',
transclude:true,
replace:true,
template:'<div class="ui-layout-south" ><div ng-transclude style="height:105px;" ></div></div>'
};
}]);
x.directive('uiLayoutEast', ['ui.config', function (uiConfig) {
return {
priority:1,
restrict: 'EA',
transclude:true,
replace:true,
template:'<div class="ui-layout-east"><div ng-transclude></div></div>'
};
}]);
x.directive('uiLayoutWest', ['ui.config', function (uiConfig) {
return {
priority:1,
restrict: 'EA',
transclude:true,
replace:true,
template:'<div class="ui-layout-west"><div ng-transclude></div></div>',
};
}]);
x.controller('LayoutCtrl', function($scope) {
});```
My solution:
var close = 0;
east: {
onclose:function(){
if (close == 0){
layout.open('east');
layout.sizePane('east', (window.outerWidth - 20));
scope.$apply();
close = 1;
}
else {
layout.open('east');
layout.sizePane('east', window.outerWidth - 350);
scope.$apply();
close = 0;
}
}
},