mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
Fixed side menu right/left issue, improved API
This commit is contained in:
Max Lynch
52
dist/js/ionic-angular.js
vendored
52
dist/js/ionic-angular.js
vendored
@ -975,27 +975,18 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
angular.extend(this, ionic.controllers.SideMenuController.prototype);
|
||||
|
||||
ionic.controllers.SideMenuController.call(this, {
|
||||
// Our quick implementation of the left side menu
|
||||
left: {
|
||||
width: 270,
|
||||
pushDown: function() {
|
||||
$scope.leftZIndex = -1;
|
||||
},
|
||||
bringUp: function() {
|
||||
$scope.leftZIndex = 0;
|
||||
}
|
||||
},
|
||||
|
||||
// Our quick implementation of the right side menu
|
||||
right: {
|
||||
width: 270,
|
||||
pushDown: function() {
|
||||
$scope.rightZIndex = -1;
|
||||
},
|
||||
bringUp: function() {
|
||||
$scope.rightZIndex = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$scope.contentTranslateX = 0;
|
||||
$scope.sideMenuContentTranslateX = 0;
|
||||
|
||||
$scope.sideMenuCtrl = this;
|
||||
})
|
||||
@ -1027,28 +1018,32 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
defaultPrevented = e.defaultPrevented;
|
||||
});
|
||||
|
||||
Gesture.on('drag', function(e) {
|
||||
var dragFn = function(e) {
|
||||
if(defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
sideMenuCtrl._handleDrag(e);
|
||||
}, $element[0]);
|
||||
};
|
||||
|
||||
Gesture.on('release', function(e) {
|
||||
Gesture.on('drag', dragFn, $element[0]);
|
||||
|
||||
var dragReleaseFn = function(e) {
|
||||
if(!defaultPrevented) {
|
||||
sideMenuCtrl._endDrag(e);
|
||||
}
|
||||
defaultPrevented = false;
|
||||
}, $element[0]);
|
||||
};
|
||||
|
||||
Gesture.on('release', dragReleaseFn, $element[0]);
|
||||
|
||||
sideMenuCtrl.setContent({
|
||||
onDrag: function(e) {},
|
||||
endDrag: function(e) {},
|
||||
getTranslateX: function() {
|
||||
return $scope.contentTranslateX || 0;
|
||||
return $scope.sideMenuContentTranslateX || 0;
|
||||
},
|
||||
setTranslateX: function(amount) {
|
||||
$scope.contentTranslateX = amount;
|
||||
$scope.sideMenuContentTranslateX = amount;
|
||||
$element[0].style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
|
||||
},
|
||||
enableAnimation: function() {
|
||||
@ -1062,6 +1057,12 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
$element[0].classList.remove('menu-animated');
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
$scope.$on('$destroy', function() {
|
||||
Gesture.off('drag', dragFn);
|
||||
Gesture.off('release', dragReleaseFn);
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -1080,10 +1081,23 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
return function($scope, $element, $attr, sideMenuCtrl) {
|
||||
$scope.side = $attr.side;
|
||||
|
||||
|
||||
if($scope.side == 'left') {
|
||||
sideMenuCtrl.left.isEnabled = true;
|
||||
sideMenuCtrl.left.pushDown = function() {
|
||||
$element[0].style.zIndex = -1;
|
||||
};
|
||||
sideMenuCtrl.left.bringUp = function() {
|
||||
$element[0].style.zIndex = 0;
|
||||
};
|
||||
} else if($scope.side == 'right') {
|
||||
sideMenuCtrl.right.isEnabled = true;
|
||||
sideMenuCtrl.right.pushDown = function() {
|
||||
$element[0].style.zIndex = -1;
|
||||
};
|
||||
sideMenuCtrl.right.bringUp = function() {
|
||||
$element[0].style.zIndex = 0;
|
||||
};
|
||||
}
|
||||
|
||||
$element.append(transclude($scope));
|
||||
|
||||
72
dist/js/ionic.js
vendored
72
dist/js/ionic.js
vendored
@ -1836,6 +1836,15 @@ window.ionic = {
|
||||
(function(ionic) {
|
||||
|
||||
ionic.Utils = {
|
||||
|
||||
// Return a function that will be called with the given context
|
||||
proxy: function(func, context) {
|
||||
var args = Array.prototype.slice.call(arguments, 2);
|
||||
return function() {
|
||||
return func.apply(context, args.concat(Array.prototype.slice.call(arguments)));
|
||||
};
|
||||
},
|
||||
|
||||
throttle: function(func, wait, options) {
|
||||
var context, args, result;
|
||||
var timeout = null;
|
||||
@ -1915,9 +1924,11 @@ window.ionic = {
|
||||
}
|
||||
};
|
||||
|
||||
// Bind a few of the most useful functions to the ionic scope
|
||||
ionic.inherit = ionic.Utils.inherit;
|
||||
ionic.extend = ionic.Utils.extend;
|
||||
ionic.throttle = ionic.Utils.throttle;
|
||||
ionic.proxy = ionic.Utils.proxy;
|
||||
|
||||
})(window.ionic);
|
||||
;
|
||||
@ -3467,6 +3478,39 @@ window.ionic = {
|
||||
}
|
||||
});
|
||||
|
||||
ionic.views.SideMenuContent = ionic.views.View.inherit({
|
||||
initialize: function(opts) {
|
||||
var _this = this;
|
||||
|
||||
ionic.extend(this, {
|
||||
animationClass: 'menu-animated',
|
||||
onDrag: function(e) {},
|
||||
onEndDrag: function(e) {},
|
||||
}, opts);
|
||||
|
||||
ionic.onGesture('drag', ionic.proxy(this._onDrag, this), this.el);
|
||||
ionic.onGesture('release', ionic.proxy(this._onEndDrag, this), this.el);
|
||||
},
|
||||
_onDrag: function(e) {
|
||||
this.onDrag && this.onDrag(e);
|
||||
},
|
||||
_onEndDrag: function(e) {
|
||||
this.onEndDrag && this.onEndDrag(e);
|
||||
},
|
||||
disableAnimation: function() {
|
||||
this.el.classList.remove(this.animationClass);
|
||||
},
|
||||
enableAnimation: function() {
|
||||
this.el.classList.add(this.animationClass);
|
||||
},
|
||||
getTranslateX: function() {
|
||||
return parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]);
|
||||
},
|
||||
setTranslateX: function(x) {
|
||||
this.el.style.webkitTransform = 'translate3d(' + x + 'px, 0, 0)';
|
||||
}
|
||||
});
|
||||
|
||||
})(ionic);
|
||||
;
|
||||
/**
|
||||
@ -4264,7 +4308,7 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
|
||||
self._handleDrag(e);
|
||||
};
|
||||
|
||||
this.content.endDrag = function(e) {
|
||||
this.content.onEndDrag =function(e) {
|
||||
self._endDrag(e);
|
||||
};
|
||||
}
|
||||
@ -4354,12 +4398,12 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
|
||||
*/
|
||||
openPercentage: function(percentage) {
|
||||
var p = percentage / 100;
|
||||
var maxLeft = this.left.width;
|
||||
var maxRight = this.right.width;
|
||||
if(percentage >= 0) {
|
||||
this.openAmount(maxLeft * p);
|
||||
} else {
|
||||
this.openAmount(maxRight * p);
|
||||
|
||||
if(this.left && percentage >= 0) {
|
||||
this.openAmount(this.left.width * p);
|
||||
} else if(this.right && percentage < 0) {
|
||||
var maxRight = this.right.width;
|
||||
this.openAmount(this.right.width * p);
|
||||
}
|
||||
},
|
||||
|
||||
@ -4369,11 +4413,11 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
|
||||
* negative value for right menu (only one menu will be visible at a time).
|
||||
*/
|
||||
openAmount: function(amount) {
|
||||
var maxLeft = this.left.width;
|
||||
var maxRight = this.right.width;
|
||||
var maxLeft = this.left && this.left.width || 0;
|
||||
var maxRight = this.right && this.right.width || 0;
|
||||
|
||||
// Check if we can move to that side, depending if the left/right panel is enabled
|
||||
if((!this.left.isEnabled && amount > 0) || (!this.right.isEnabled && amount < 0)) {
|
||||
if((!(this.left && this.left.isEnabled) && amount > 0) || (!(this.right && this.right.isEnabled) && amount < 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -4388,17 +4432,17 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
|
||||
this._rightShowing = false;
|
||||
|
||||
// Push the z-index of the right menu down
|
||||
this.right.pushDown();
|
||||
this.right && this.right.pushDown();
|
||||
// Bring the z-index of the left menu up
|
||||
this.left.bringUp();
|
||||
this.left && this.left.bringUp();
|
||||
} else {
|
||||
this._rightShowing = true;
|
||||
this._leftShowing = false;
|
||||
|
||||
// Bring the z-index of the right menu up
|
||||
this.right.bringUp();
|
||||
this.right && this.right.bringUp();
|
||||
// Push the z-index of the left menu down
|
||||
this.left.pushDown();
|
||||
this.left && this.left.pushDown();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
self._handleDrag(e);
|
||||
};
|
||||
|
||||
this.content.endDrag = function(e) {
|
||||
this.content.onEndDrag =function(e) {
|
||||
self._endDrag(e);
|
||||
};
|
||||
}
|
||||
@ -115,12 +115,12 @@
|
||||
*/
|
||||
openPercentage: function(percentage) {
|
||||
var p = percentage / 100;
|
||||
var maxLeft = this.left.width;
|
||||
var maxRight = this.right.width;
|
||||
if(percentage >= 0) {
|
||||
this.openAmount(maxLeft * p);
|
||||
} else {
|
||||
this.openAmount(maxRight * p);
|
||||
|
||||
if(this.left && percentage >= 0) {
|
||||
this.openAmount(this.left.width * p);
|
||||
} else if(this.right && percentage < 0) {
|
||||
var maxRight = this.right.width;
|
||||
this.openAmount(this.right.width * p);
|
||||
}
|
||||
},
|
||||
|
||||
@ -130,11 +130,11 @@
|
||||
* negative value for right menu (only one menu will be visible at a time).
|
||||
*/
|
||||
openAmount: function(amount) {
|
||||
var maxLeft = this.left.width;
|
||||
var maxRight = this.right.width;
|
||||
var maxLeft = this.left && this.left.width || 0;
|
||||
var maxRight = this.right && this.right.width || 0;
|
||||
|
||||
// Check if we can move to that side, depending if the left/right panel is enabled
|
||||
if((!this.left.isEnabled && amount > 0) || (!this.right.isEnabled && amount < 0)) {
|
||||
if((!(this.left && this.left.isEnabled) && amount > 0) || (!(this.right && this.right.isEnabled) && amount < 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -149,17 +149,17 @@
|
||||
this._rightShowing = false;
|
||||
|
||||
// Push the z-index of the right menu down
|
||||
this.right.pushDown();
|
||||
this.right && this.right.pushDown();
|
||||
// Bring the z-index of the left menu up
|
||||
this.left.bringUp();
|
||||
this.left && this.left.bringUp();
|
||||
} else {
|
||||
this._rightShowing = true;
|
||||
this._leftShowing = false;
|
||||
|
||||
// Bring the z-index of the right menu up
|
||||
this.right.bringUp();
|
||||
this.right && this.right.bringUp();
|
||||
// Push the z-index of the left menu down
|
||||
this.left.pushDown();
|
||||
this.left && this.left.pushDown();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
52
js/ext/angular/src/directive/ionicSideMenu.js
vendored
52
js/ext/angular/src/directive/ionicSideMenu.js
vendored
@ -20,27 +20,18 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
angular.extend(this, ionic.controllers.SideMenuController.prototype);
|
||||
|
||||
ionic.controllers.SideMenuController.call(this, {
|
||||
// Our quick implementation of the left side menu
|
||||
left: {
|
||||
width: 270,
|
||||
pushDown: function() {
|
||||
$scope.leftZIndex = -1;
|
||||
},
|
||||
bringUp: function() {
|
||||
$scope.leftZIndex = 0;
|
||||
}
|
||||
},
|
||||
|
||||
// Our quick implementation of the right side menu
|
||||
right: {
|
||||
width: 270,
|
||||
pushDown: function() {
|
||||
$scope.rightZIndex = -1;
|
||||
},
|
||||
bringUp: function() {
|
||||
$scope.rightZIndex = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$scope.contentTranslateX = 0;
|
||||
$scope.sideMenuContentTranslateX = 0;
|
||||
|
||||
$scope.sideMenuCtrl = this;
|
||||
})
|
||||
@ -72,28 +63,32 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
defaultPrevented = e.defaultPrevented;
|
||||
});
|
||||
|
||||
Gesture.on('drag', function(e) {
|
||||
var dragFn = function(e) {
|
||||
if(defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
sideMenuCtrl._handleDrag(e);
|
||||
}, $element[0]);
|
||||
};
|
||||
|
||||
Gesture.on('release', function(e) {
|
||||
Gesture.on('drag', dragFn, $element[0]);
|
||||
|
||||
var dragReleaseFn = function(e) {
|
||||
if(!defaultPrevented) {
|
||||
sideMenuCtrl._endDrag(e);
|
||||
}
|
||||
defaultPrevented = false;
|
||||
}, $element[0]);
|
||||
};
|
||||
|
||||
Gesture.on('release', dragReleaseFn, $element[0]);
|
||||
|
||||
sideMenuCtrl.setContent({
|
||||
onDrag: function(e) {},
|
||||
endDrag: function(e) {},
|
||||
getTranslateX: function() {
|
||||
return $scope.contentTranslateX || 0;
|
||||
return $scope.sideMenuContentTranslateX || 0;
|
||||
},
|
||||
setTranslateX: function(amount) {
|
||||
$scope.contentTranslateX = amount;
|
||||
$scope.sideMenuContentTranslateX = amount;
|
||||
$element[0].style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
|
||||
},
|
||||
enableAnimation: function() {
|
||||
@ -107,6 +102,12 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
$element[0].classList.remove('menu-animated');
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
$scope.$on('$destroy', function() {
|
||||
Gesture.off('drag', dragFn);
|
||||
Gesture.off('release', dragReleaseFn);
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -125,10 +126,23 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
return function($scope, $element, $attr, sideMenuCtrl) {
|
||||
$scope.side = $attr.side;
|
||||
|
||||
|
||||
if($scope.side == 'left') {
|
||||
sideMenuCtrl.left.isEnabled = true;
|
||||
sideMenuCtrl.left.pushDown = function() {
|
||||
$element[0].style.zIndex = -1;
|
||||
};
|
||||
sideMenuCtrl.left.bringUp = function() {
|
||||
$element[0].style.zIndex = 0;
|
||||
};
|
||||
} else if($scope.side == 'right') {
|
||||
sideMenuCtrl.right.isEnabled = true;
|
||||
sideMenuCtrl.right.pushDown = function() {
|
||||
$element[0].style.zIndex = -1;
|
||||
};
|
||||
sideMenuCtrl.right.bringUp = function() {
|
||||
$element[0].style.zIndex = 0;
|
||||
};
|
||||
}
|
||||
|
||||
$element.append(transclude($scope));
|
||||
|
||||
@ -16,24 +16,37 @@
|
||||
<div ng-controller="MenuCtrl">
|
||||
<side-menu>
|
||||
<pane side-menu-content>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<button class="button" ng-click="openLeft()"><i class="icon-reorder"></i></button>
|
||||
<header class="bar bar-header bar-primary">
|
||||
<button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
|
||||
<h1 class="title">Slide me</h1>
|
||||
</header>
|
||||
<div class="content has-header">
|
||||
<h1>Slide me side to side!</h1>
|
||||
<h1>Content</h1>
|
||||
</div>
|
||||
</pane>
|
||||
<menu side="left">
|
||||
<h2>Left</h2>
|
||||
<ul class="list">
|
||||
<a href="#" class="list-item" ng-repeat="item in list">
|
||||
{{item.text}}
|
||||
</a>
|
||||
</ul>
|
||||
<header class="bar bar-header bar-primary">
|
||||
<h1 class="title">Left</h1>
|
||||
</header>
|
||||
<content has-header="true">
|
||||
<ul class="list">
|
||||
<a href="#" class="item" ng-repeat="item in list">
|
||||
{{item.text}}
|
||||
</a>
|
||||
</ul>
|
||||
</content>
|
||||
</menu>
|
||||
<menu side="right">
|
||||
<h2>Items</h2>
|
||||
<header class="bar bar-header bar-primary">
|
||||
<h1 class="title">Right</h1>
|
||||
</header>
|
||||
<content has-header="true">
|
||||
<ul class="list">
|
||||
<a href="#" class="item" ng-repeat="item in list">
|
||||
{{item.text}}
|
||||
</a>
|
||||
</ul>
|
||||
</content>
|
||||
</menu>
|
||||
</side-menu>
|
||||
</div>
|
||||
@ -43,6 +56,12 @@
|
||||
angular.module('sideMenuTest', ['ionic'])
|
||||
|
||||
.controller('MenuCtrl', function($scope) {
|
||||
$scope.list = [];
|
||||
for(var i = 0; i < 20; i++) {
|
||||
$scope.list.push({
|
||||
text: 'Item ' + i
|
||||
});
|
||||
}
|
||||
$scope.openLeft = function() {
|
||||
$scope.sideMenuCtrl.toggleLeft();
|
||||
};
|
||||
|
||||
@ -1,6 +1,15 @@
|
||||
(function(ionic) {
|
||||
|
||||
ionic.Utils = {
|
||||
|
||||
// Return a function that will be called with the given context
|
||||
proxy: function(func, context) {
|
||||
var args = Array.prototype.slice.call(arguments, 2);
|
||||
return function() {
|
||||
return func.apply(context, args.concat(Array.prototype.slice.call(arguments)));
|
||||
};
|
||||
},
|
||||
|
||||
throttle: function(func, wait, options) {
|
||||
var context, args, result;
|
||||
var timeout = null;
|
||||
@ -80,8 +89,10 @@
|
||||
}
|
||||
};
|
||||
|
||||
// Bind a few of the most useful functions to the ionic scope
|
||||
ionic.inherit = ionic.Utils.inherit;
|
||||
ionic.extend = ionic.Utils.extend;
|
||||
ionic.throttle = ionic.Utils.throttle;
|
||||
ionic.proxy = ionic.Utils.proxy;
|
||||
|
||||
})(window.ionic);
|
||||
|
||||
@ -22,4 +22,37 @@
|
||||
}
|
||||
});
|
||||
|
||||
ionic.views.SideMenuContent = ionic.views.View.inherit({
|
||||
initialize: function(opts) {
|
||||
var _this = this;
|
||||
|
||||
ionic.extend(this, {
|
||||
animationClass: 'menu-animated',
|
||||
onDrag: function(e) {},
|
||||
onEndDrag: function(e) {},
|
||||
}, opts);
|
||||
|
||||
ionic.onGesture('drag', ionic.proxy(this._onDrag, this), this.el);
|
||||
ionic.onGesture('release', ionic.proxy(this._onEndDrag, this), this.el);
|
||||
},
|
||||
_onDrag: function(e) {
|
||||
this.onDrag && this.onDrag(e);
|
||||
},
|
||||
_onEndDrag: function(e) {
|
||||
this.onEndDrag && this.onEndDrag(e);
|
||||
},
|
||||
disableAnimation: function() {
|
||||
this.el.classList.remove(this.animationClass);
|
||||
},
|
||||
enableAnimation: function() {
|
||||
this.el.classList.add(this.animationClass);
|
||||
},
|
||||
getTranslateX: function() {
|
||||
return parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]);
|
||||
},
|
||||
setTranslateX: function(x) {
|
||||
this.el.style.webkitTransform = 'translate3d(' + x + 'px, 0, 0)';
|
||||
}
|
||||
});
|
||||
|
||||
})(ionic);
|
||||
|
||||
@ -4,77 +4,54 @@
|
||||
<title>Side Menus</title>
|
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section id="page" class="pane menu-animated">
|
||||
<div id="content" class="pane">
|
||||
<header class="bar bar-header bar-dark">
|
||||
<div class="buttons">
|
||||
<a id="left-button" class="button button-dark" href="#">
|
||||
<i class="icon ion-reorder"></i>
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="title">Chats</h1>
|
||||
<div class="buttons">
|
||||
<button id="right-button" class="button button-dark">
|
||||
<i class="icon ion-cog"></i>
|
||||
</button>
|
||||
</div>
|
||||
<h1 class="title">Center</h1>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main class="content padding has-header">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-left" class="menu menu-left">
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Left</h1>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-success">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-danger">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-warning">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div id="menu-right" class="menu menu-right">
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Right</h1>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<footer class="bar bar-footer bar-dark">
|
||||
<h3 class="title"></h3>
|
||||
</footer>
|
||||
</section>
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
<script>
|
||||
var contentEl = document.getElementById('content');
|
||||
var content = new ionic.views.SideMenuContent({
|
||||
el: contentEl
|
||||
});
|
||||
|
||||
var leftMenuEl = document.getElementById('menu-left');
|
||||
var leftMenu = new ionic.views.SideMenu({
|
||||
el: leftMenuEl,
|
||||
width: 270
|
||||
});
|
||||
|
||||
var rightMenuEl = document.getElementById('menu-right');
|
||||
var rightMenu = new ionic.views.SideMenu({
|
||||
el: rightMenuEl,
|
||||
width: 270
|
||||
});
|
||||
|
||||
var sm = new ionic.controllers.SideMenuController({
|
||||
content: content,
|
||||
left: leftMenu,
|
||||
right: rightMenu
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user