<!DOCTYPE html>
<html>
<head>
<link data-require="ionic@*" data-semver="1.0.0-beta11" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" />
<script data-require="ionic@*" data-semver="1.0.0-beta6" src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="drop-down.css">
<script src="drop-down.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="MyApp" ng-controller="AppCtrl">
<ion-nav-bar class="slide-left-right bar-positive">
<ion-nav-back-button class="button-icon ion-chevron-left">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
</body>
</html>
// Code goes here
var app = angular.module('MyApp', ['ionic', 'directives.dropdown']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.tpl.html',
controller: 'AppCtrl'
})
.state('home.notification', {
url: '/notification',
templateUrl: 'notification.tpl.html',
controller: 'NotificationCtrl'
})
.state('details', {
url: '/details',
templateUrl: 'detail.tpl.html',
controller: 'DetailsCtrl'
});
$urlRouterProvider.otherwise("/home/notification");
});
app.controller('AppCtrl', function($scope, $location,$ionicPopover) {
$scope.dummyShow = function(num) {
console.log("BUTTON CLICKED:" + num);
}
$ionicPopover.fromTemplateUrl('menu.tpl.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
$scope.showMenu = function($event) {
$scope.popover.show($event);
}
});
app.controller('NotificationCtrl', function($scope, $location) {
$scope.showDetail = function() {
$location.path('/details');
}
});
app.controller('DetailsCtrl', function($scope,$ionicPopover) {
//document.body.classList.add('platform-android');
$scope.dummyShow = function(num) {
console.log("BUTTON CLICKED:" + num);
}
$ionicPopover.fromTemplateUrl('popover.tpl.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
}
});
/* Styles go here */
/**
* Created by Saurabh on 22/1/14.
* Directive for a drop down menu.
*/
angular.module('directives.dropdown',[])
.directive('buttonMenu',function($document) {
return {
restrict:'E',
replace:true,
transclude:true,
scope: {
iconCls:'@'
},
link:function($scope,$element) {
var wrapper = $element.find("button-menu-wrapper");
var body = $document.find("body");
$element.bind("click",function() {
event.stopPropagation();
wrapper.find("div").toggleClass("active");
});
body.bind("click",function() {
wrapper.find("div").removeClass("active");
});
},
template: '<div class="button button-icon">' +
'<i ng-class="iconCls" ng-if="iconCls"></i>'+
'<span ng-transclude></span>'+
'</div>'
}
}).directive('buttonMenuWrapper',function($document) {
return {
restrict:'E',
require:'^buttonMenu',
transclude:true,
scope: {
leftPosition:'@',
rightPosition:'@'
},
template:'<div class="list dropdown" ng-transclude></div>'
}
}).directive('menuItem',function($document) {
return {
restrict: 'E',
require:'^buttonMenuWrapper',
transclude:true,
replace:true,
template:'<div class="dropdown-item" ng-transclude></div>'
}
});
.dropdown {
position: absolute;
z-index: 999;
min-width: 200px;
margin-top: 5px;
background-color: #ffffff;
border-radius:3px;
border: 1px solid rgb(221,221,221);
box-shadow: 0 0 4px 2px rgba(0,0,0,0.15);
display: none;
cursor: default;
padding: 5px;
right:0;
}
.dropdown.active {
display: block;
}
/*.dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 5px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
transition: all ease 0.2s;
}*/
.dropdown-item:last-of-type {
border-bottom: none;
}
.dropdown-item {
padding: 10px;
color: rgba(69, 69, 69, 0.90);
text-align: left;
border-bottom: 1px solid rgb(221,221,221);
cursor: pointer;
}
/*.dropdown-item:hover {
font-size: 2.5em;
color: #5d909f;
transition: all 0.2s ease-out;
}*/
.dropdown-item > i {
float: left;
margin-right: 15px;
}
.dropdown-item > span {
display: inline-block;
line-height: 32px;
font-size: medium;
}
<ion-view title="Home">
<ion-nav-buttons side="right">
<!--<button-menu class="whiteText" icon-cls="icon ion-plus-round">
<button-menu-wrapper>
<menu-item ng-click="dummyShow(1)">
<i class="icon ion-bluetooth"></i> Menu 1
</menu-item>
<menu-item ng-click="dummyShow(2)">
<i class="icon ion-bluetooth"></i> Menu 2
</menu-item>
</button-menu-wrapper>
</button-menu>-->
<button class="button button-icon" ng-click="showMenu($event)">
<i class="icon ion-plus-round"></i>
</button>
</ion-nav-buttons>
<div ui-view class="has-header">
</div>
</ion-view>
<ion-content class="light-bg">
<div class="item" ng-click="showDetail()">
Item 1
</div>
</ion-content>
<ion-view title="Details Page">
<ion-nav-buttons side="right">
<!--<button-menu class="whiteText" icon-cls="icon ion-plus-round">
<button-menu-wrapper>
<menu-item ng-click="dummyShow(3)">
<i class="icon ion-bluetooth"></i> Menu 3
</menu-item>
<menu-item ng-click="dummyShow(4)">
<i class="icon ion-bluetooth"></i> Menu 4
</menu-item>
</button-menu-wrapper>
</button-menu>-->
<button class="button button-icon" ng-click="openPopover($event)">
<i class="icon ion-android-hand"></i>
</button>
</ion-nav-buttons>
<ion-content class="has-header">
<div class="item">
Item 1
</div>
</ion-content>
</ion-view>
<ion-popover-view>
<ion-content>
<div class="list">
<div class="item">
User 1
</div>
</div>
</ion-content>
</ion-popover-view>
<ion-popover-view>
<ion-content>
<div class="list">
<div class="item item-icon-left">
<i class="icon ion-speakerphone"></i>
Announcement
</div>
<div class="item item-icon-left">
<i class="icon ion-compose"></i>
Assignment
</div>
<div class="item item-icon-left">
<i class="icon ion-document-text"></i>
Note
</div>
<div class="item item-icon-left">
<i class="icon ion-calendar"></i>
Event
</div>
</div>
</ion-content>
</ion-popover-view>