/branches/v3/impl/src/web/examples/angular/panels/baco.jsp |
---|
New file |
0,0 → 1,234 |
<%@ page contentType="text/html; charset=UTF-8" language="java"%> |
<html> |
<body ng-app="BacoAngularApp"> |
<!--Se colocares aqui o include do 1.3 isto trabalha mas com erros--> |
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> |
<!-- porque se sobrepõe ao angular 1.6 que está no scripts defult--> |
<!-- ESTES INCLUDES NAO SE COLOCAM EM DESENVOLVIMENTO O LAYOUT DO BACO JA OS INCLUI--> |
<jsp:include page="/layout/themes/scripts-default.jsp"/> |
<jsp:include page="/layout/headerTools.jsp"/> |
<link href="https://rawgit.com/eu81273/angular.panels/master/dist/angular.panels.min.css" rel="stylesheet" type="text/css"> |
<%-- |
Tirei este para nao colidir com o 1.6.3 que temos incluido no scripts-default |
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> |
--%> |
<script src="https://rawgit.com/eu81273/angular.panels/master/dist/angular.panels.min.js"></script> |
<div ng-app="angularApplication" ng-controller="defaultController"> |
<div class="container-fluid content-section"> |
<div class="container"> |
<div class="row"> |
<h2><i class="fa fa-play-circle"></i> Example</h2> |
<p>Type any message you want to show on the panel in the input box below, and press the button "LEFT OPEN".</p> |
<div class="form-group"> |
<input class="form-control input-lg" type="text" data-ng-model="message" placeholder="Message for panels.."> |
</div> |
<div class="btn-group btn-group-justified"> |
<a href="" data-ng-click="leftOpen()" class="btn btn-default">Left Open</a> |
<a href="" data-ng-click="rightOpen()" class="btn btn-default">Right Open</a> |
<a href="" data-ng-click="topOpen()" class="btn btn-default">Top Open</a> |
<a href="" data-ng-click="bottomOpen()" class="btn btn-default">Bottom Open</a> |
</div> |
</div> |
</div> |
</div> |
<div data-panels="true"></div> |
<script> |
var app = angular.module('angularApplication', ['angular.panels']); |
GLOBAL_BacoAngularAppDependencies.push('angularApplication'); |
//add panels |
app.config(['panelsProvider', function (panelsProvider) { |
panelsProvider |
.add({ |
id: 'test01', |
position: 'left', |
size: '700px', |
templateUrl: 'left.html', |
controller: 'leftCtrl' |
}) |
.add({ |
id: 'test02', |
position: 'right', |
size: '50%', |
templateUrl: 'right.html', |
controller: 'rightCtrl' |
}) |
.add({ |
id: 'test03', |
position: 'top', |
size: '20%', |
templateUrl: 'top.html', |
controller: 'topCtrl' |
}) |
.add({ |
id: 'test04', |
position: 'bottom', |
size: '80%', |
templateUrl: 'bottom.html', |
controller: 'bottomCtrl', |
closeCallbackFunction: 'bottomClose' |
}); |
}]); |
//default controller |
app.controller('defaultController', ['$scope', 'panels', function ($scope, panels) { |
$scope.leftOpen = function () { |
$scope.$broadcast('leftHello', {message : $scope.message}); |
}; |
$scope.rightOpen = function () { |
$scope.$broadcast('rightHello', {message : $scope.message}); |
}; |
$scope.topOpen = function () { |
$scope.$broadcast('topHello', {message : $scope.message}); |
}; |
$scope.bottomOpen = function () { |
$scope.$broadcast('bottomHello', {message : $scope.message}); |
}; |
}]); |
//left panel controller |
app.controller('leftCtrl', ['$scope', 'panels', function ($scope, panels) { |
$scope.$on('leftHello', function(event, args) { |
$scope.message = args.message; |
panels.open("test01"); |
}); |
}]); |
//right panel controller |
app.controller('rightCtrl', ['$scope', 'panels', function ($scope, panels) { |
$scope.$on('rightHello', function(event, args) { |
$scope.message = args.message; |
panels.open("test02"); |
}); |
}]); |
//top panel controller |
app.controller('topCtrl', ['$scope', 'panels', function ($scope, panels) { |
$scope.$on('topHello', function(event, args) { |
$scope.message = args.message; |
panels.open("test03"); |
}); |
}]); |
//bottom panel controller |
app.controller('bottomCtrl', ['$scope', 'panels', function ($scope, panels) { |
$scope.$on('bottomHello', function(event, args) { |
$scope.message = args.message; |
panels.open("test04"); |
}); |
//close callback |
$scope.bottomClose = function () { |
window.alert('Close Callback!!'); |
}; |
}]); |
</script> |
<script type="text/ng-template" id="left.html"> |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Left Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
</script> |
<script type="text/ng-template" id="right.html"> |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Left Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
</script> |
<script type="text/ng-template" id="top.html"> |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Left Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
</script> |
<script type="text/ng-template" id="bottom.html"> |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Left Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
</script> |
</div> |
</body> |
</html> |
/branches/v3/impl/src/web/examples/angular/panels/right.html |
---|
New file |
0,0 → 1,10 |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Right Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
/branches/v3/impl/src/web/examples/angular/panels/top.html |
---|
New file |
0,0 → 1,10 |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Top Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
/branches/v3/impl/src/web/examples/angular/panels/bottom.html |
---|
New file |
0,0 → 1,10 |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Bottom Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
/branches/v3/impl/src/web/examples/angular/panels/index.html |
---|
New file |
0,0 → 1,206 |
<!DOCTYPE html> |
<html ng-app="angularApplication"> |
<head lang="ko"> |
<meta charset="utf-8"> |
<link href="https://rawgit.com/eu81273/angular.panels/master/dist/angular.panels.min.css" rel="stylesheet" type="text/css"> |
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> |
<script src="https://rawgit.com/eu81273/angular.panels/master/dist/angular.panels.min.js"></script> |
</head> |
<body ng-controller="defaultController"> |
<div class="container-fluid content-section"> |
<div class="container"> |
<div class="row"> |
<h2><i class="fa fa-play-circle"></i> Example</h2> |
<p>Type any message you want to show on the panel in the input box below, and press the button "LEFT OPEN".</p> |
<div class="form-group"> |
<input class="form-control input-lg" type="text" data-ng-model="message" placeholder="Message for panels.."> |
</div> |
<div class="btn-group btn-group-justified"> |
<a href="" data-ng-click="leftOpen()" class="btn btn-default">Left Open</a> |
<a href="" data-ng-click="rightOpen()" class="btn btn-default">Right Open</a> |
<a href="" data-ng-click="topOpen()" class="btn btn-default">Top Open</a> |
<a href="" data-ng-click="bottomOpen()" class="btn btn-default">Bottom Open</a> |
</div> |
</div> |
</div> |
</div> |
<div data-panels="true"></div> |
<script> |
var app = angular.module('angularApplication', ['angular.panels']); |
//add panels |
app.config(['panelsProvider', function (panelsProvider) { |
panelsProvider |
.add({ |
id: 'test01', |
position: 'left', |
size: '700px', |
templateUrl: 'left.html', |
controller: 'leftCtrl' |
}) |
.add({ |
id: 'test02', |
position: 'right', |
size: '50%', |
templateUrl: 'right.html', |
controller: 'rightCtrl' |
}) |
.add({ |
id: 'test03', |
position: 'top', |
size: '20%', |
templateUrl: 'top.html', |
controller: 'topCtrl' |
}) |
.add({ |
id: 'test04', |
position: 'bottom', |
size: '80%', |
templateUrl: 'bottom.html', |
controller: 'bottomCtrl', |
closeCallbackFunction: 'bottomClose' |
}); |
}]); |
//default controller |
app.controller('defaultController', ['$scope', 'panels', function ($scope, panels) { |
$scope.leftOpen = function () { |
$scope.$broadcast('leftHello', {message : $scope.message}); |
}; |
$scope.rightOpen = function () { |
$scope.$broadcast('rightHello', {message : $scope.message}); |
}; |
$scope.topOpen = function () { |
$scope.$broadcast('topHello', {message : $scope.message}); |
}; |
$scope.bottomOpen = function () { |
$scope.$broadcast('bottomHello', {message : $scope.message}); |
}; |
}]); |
//left panel controller |
app.controller('leftCtrl', ['$scope', 'panels', function ($scope, panels) { |
$scope.$on('leftHello', function(event, args) { |
$scope.message = args.message; |
panels.open("test01"); |
}); |
}]); |
//right panel controller |
app.controller('rightCtrl', ['$scope', 'panels', function ($scope, panels) { |
$scope.$on('rightHello', function(event, args) { |
$scope.message = args.message; |
panels.open("test02"); |
}); |
}]); |
//top panel controller |
app.controller('topCtrl', ['$scope', 'panels', function ($scope, panels) { |
$scope.$on('topHello', function(event, args) { |
$scope.message = args.message; |
panels.open("test03"); |
}); |
}]); |
//bottom panel controller |
app.controller('bottomCtrl', ['$scope', 'panels', function ($scope, panels) { |
$scope.$on('bottomHello', function(event, args) { |
$scope.message = args.message; |
panels.open("test04"); |
}); |
//close callback |
$scope.bottomClose = function () { |
window.alert('Close Callback!!'); |
}; |
}]); |
</script> |
<script type="text/ng-template" id="left.html"> |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Left Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
</script> |
<script type="text/ng-template" id="right.html"> |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Left Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
</script> |
<script type="text/ng-template" id="top.html"> |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Left Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
</script> |
<script type="text/ng-template" id="bottom.html"> |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Left Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |
</script> |
</body> |
</html> |
/branches/v3/impl/src/web/examples/angular/panels/left.html |
---|
New file |
0,0 → 1,10 |
<div class="pane-head"> |
<button type="button" class="close" data-ng-click="panels.close();">×</button> |
</div> |
<div class="pane-body"> |
<div class="row"> |
<h3>Left Panel</h3> |
</div> |
<div class="row">{{message}}</div> |
</div> |