| croyalattendee.firstname<html ng-app="ionicApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
| <title>Side Menus</title> | |
| <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet"> | |
| <link href="http://code.ionicframework.com/contrib/ionic-contrib-frosted-glass/ionic.contrib.frostedGlass.css" rel="stylesheet"> | |
| <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script> | |
| <script src="http://code.ionicframework.com/contrib/ionic-contrib-frosted-glass/ionic.contrib.frostedGlass.js"></script> | |
| </head> | |
| <body> | |
| <div ng-controller="MainCtrl"> | |
| <ion-nav-view></ion-nav-view> | |
| </div> | |
| <script id="event-menu.html" type="text/ng-template"> | |
| <ion-side-menus> | |
| <ion-side-menu-content> | |
| <ion-nav-bar class="bar-positive"> | |
| <ion-nav-back-button class="button-icon ion-arrow-left-c"> | |
| </ion-nav-back-button> | |
| </ion-nav-bar> | |
| <ion-nav-buttons side="left"> | |
| <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> | |
| </button> | |
| </ion-nav-buttons> | |
| <ion-nav-view name="menuContent"></ion-nav-view> | |
| </ion-side-menu-content> | |
| <ion-side-menu side="left"> | |
| <ion-header-bar class="bar-frosted"> | |
| <h1 class="title">Left Menu</h1> | |
| </ion-header-bar> | |
| <ion-content> | |
| <ul class="list"> | |
| <a href="#/event/list" class="item">List 1</a> | |
| <a href="#/event/note" class="item">Teacher 2</a> | |
| <a href="#/event/note" class="item">Old UI 3</a> | |
| <a href="#/event/new" class="item">New UI 4</a> | |
| </ul> | |
| </ion-content> | |
| </ion-side-menu> | |
| </ion-side-menus> | |
| </script> | |
| <script id="home.html" type="text/ng-template"> | |
| <ion-view title="Welcome"> | |
| <ion-content padding="true"> | |
| <p>Swipe to the right to reveal the left menu.</p> | |
| <p>(On desktop click and drag from left to right)</p> | |
| </ion-content> | |
| </ion-view> | |
| </script> | |
| <script id="new.html" type="text/ng-template"> | |
| <ion-pane ng-controller="PageCtrl"> | |
| <header frosted-bar class="bar bar-header bar-frosted"> | |
| <h1 class="title">Blurred!</h1> | |
| </header> | |
| <ion-content padding="true" class="has-header" start-y="120"> | |
| <ol class="messages"> | |
| <li ng-repeat="message in messages"> | |
| <p> | |
| <span class="royal bold" ng-show="$even">Parent: </span> | |
| <span class="positive bold" ng-show="$odd">Teacher: </span> | |
| {{message.content}} | |
| </p> | |
| <span class="calm">{{myDate | date}}</span> | |
| </li> | |
| </ol> | |
| </ion-content> | |
| <ion-footer-bar class="bar-frosted"> | |
| <button class="button button-clear button-positive" ng-click="add()">Add Message</button> | |
| </ion-footer-bar> | |
| </ion-pane> | |
| </script> | |
| <script id="list.html" type="text/ng-template"> | |
| <ion-view title="Notes" left-buttons="leftButtons"> | |
| <ion-content> | |
| <div class="list"> | |
| <a href="#/event/new" class="item item-avatar"> | |
| <img src="http://www.fillmurray.com/100/100"> | |
| <h2> | |
| <span style="float: left"> Teacher 1 </span> | |
| <span class="positive" style="float: right"> (English) </span> | |
| </h2> | |
| <p> Some chat text... </p> | |
| </a> | |
| <a href="#/event/new" class="item item-avatar"> | |
| <img src="http://nicenicejpg.com/100/100"> | |
| <h2> | |
| <span style="float: left"> Teacher 2 </span> | |
| <span class="positive" style="float: right"> (Maths) </span> | |
| <label class="toggle toggle-royal"> | |
| <input type="checkbox" checked="true"> | |
| <div class="handle"></div> | |
| <div class="track"> | |
| (Maths) | |
| </div> | |
| </label> | |
| </h2> | |
| <p> Some chat text... </p> | |
| </a> | |
| <a href="#/event/new" class="item item-avatar"> | |
| <img src="http://www.PLACECAGE.com/100/100"> | |
| <h2> | |
| <span style="float: left"> Teacher 3 </span> | |
| <span class="positive" style="float: right"> (Hindi) </span> | |
| </h2> | |
| <p> Some chat text... </p> | |
| </a> | |
| <a href="#/event/new" class="item item-avatar"> | |
| <img src="http://placehold.it/100x100"> | |
| <h2> | |
| <span style="float: left"> | |
| Teacher 4 | |
| <i class="icon ion-person"></i> | |
| <span class="balanced"> Class Teacher </span> | |
| </span> | |
| <span class="positive" style="float: right"> (Science) </span> | |
| </h2> | |
| <p> Some chat text... </p> | |
| </a> | |
| <a href="#/event/new" class="item item-avatar"> | |
| <img src="http://www.fillmurray.com/100/100"> | |
| <h2> | |
| <span style="float: left"> Teacher 5 </span> | |
| <span class="positive" style="float: right"> (Computer) </span> | |
| </h2> | |
| <p> Some chat text... </p> | |
| </a> | |
| </div> | |
| </ion-content> | |
| </script> | |
| <script id="note.html" type="text/ng-template"> | |
| <ion-view title="Teacher 1" left-buttons="leftButtons"> | |
| <ion-content padding="true"> | |
| <div class="list"> | |
| <div class="card"> | |
| <div ng-repeat-start="attendee in attendees" class="item item-divider"> | |
| <span ng-show="$odd" style="display:block;text-align:right"> Teacher 1 </span> | |
| <span ng-show="$even" style="display:block;text-align:left"> Parent </span> | |
| </div> | |
| <div class="item item-text-wrap" style="margin-bottom: 0px;"> | |
| Message {{attendee.firstname}} {{$index + $even + $odd}} | |
| </div> | |
| <div class="item item-divider bar-frosted" style="font-size: 10px; text-align: center" ng-repeat-end> | |
| <span class="positive"> Delivered on </span> | |
| </div> | |
| </div> | |
| <!--<label class="item item-input"> | |
| <textarea placeholder="Enter Your Message"></textarea> | |
| </label>--> | |
| </div> | |
| </ion-content> | |
| <ion-footer-bar align-title="left" class="bar-positive"> | |
| <label class="item item-input" style="width:80%"> | |
| <input type="text" placeholder="Type your message!"> | |
| </label> | |
| <button id="sendMessage" class="button button-small" style="margin-left:10px;width:18%"> | |
| <i class="ion-android-send"></i> Send | |
| </button> | |
| <button id="attachment" class="button button-small" style="margin-left:10px;width:2%"> | |
| <i class="ion-android-add"></i> | |
| </button> | |
| </ion-footer-bar> | |
| </ion-view> | |
| </script> | |
| </body> | |
| </html> |
| angular.module('ionicApp', ['ionic', 'ionic.contrib.frostedGlass']) | |
| .config(function($stateProvider, $urlRouterProvider) { | |
| $stateProvider | |
| .state('eventmenu', { | |
| url: "/event", | |
| templateUrl: "event-menu.html" | |
| }) | |
| .state('eventmenu.home', { | |
| url: "/home", | |
| views: { | |
| 'menuContent' :{ | |
| templateUrl: "home.html" | |
| } | |
| } | |
| }) | |
| .state('eventmenu.list', { | |
| url: "/list", | |
| views: { | |
| 'menuContent' :{ | |
| templateUrl: "list.html" | |
| } | |
| } | |
| }) | |
| .state('eventmenu.note', { | |
| url: "/note", | |
| views: { | |
| 'menuContent' :{ | |
| templateUrl: "note.html" | |
| } | |
| } | |
| }) | |
| .state('eventmenu.new', { | |
| url: "/new", | |
| views: { | |
| 'menuContent' :{ | |
| templateUrl: "new.html" | |
| } | |
| } | |
| }); | |
| $urlRouterProvider.otherwise("/event/list"); | |
| }) | |
| .controller('MainCtrl', function($scope, $ionicSideMenuDelegate) { | |
| $scope.attendees = [ | |
| { firstname: 'Nicolas', lastname: 'Cage' }, | |
| { firstname: 'Jean-Claude', lastname: 'Van Damme' }, | |
| { firstname: 'Keanu', lastname: 'Reeves' }, | |
| { firstname: 'Steven', lastname: 'Seagal' } | |
| ]; | |
| }) | |
| .controller('PageCtrl', function($scope, $ionicFrostedDelegate, $ionicScrollDelegate, $rootScope) { | |
| $scope.myDate = new Date(); | |
| var messageOptions = [ | |
| { content: 'Hi.' }, | |
| { content: 'Hello' }, | |
| { content: 'Chat 1' }, | |
| { content: 'Chat 2' }, | |
| { content: 'Chat 3' }, | |
| { content: 'Chat 4' }, | |
| { content: 'Chat 5' }, | |
| { content: 'Chat 6' }, | |
| { content: 'Chat 7' }, | |
| ]; | |
| var messageIter = 0; | |
| $scope.messages = messageOptions.slice(0, 1); | |
| $scope.add = function() { | |
| var nextMessage = messageOptions[messageIter++ % messageOptions.length]; | |
| $scope.messages.push(angular.extend({}, nextMessage)); | |
| // Update the scroll area and tell the frosted glass to redraw itself | |
| $ionicFrostedDelegate.update(); | |
| $ionicScrollDelegate.scrollBottom(true); | |
| }; | |
| }); |
| body { | |
| cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
| } | |
| @media (min-width: 767px) { | |
| .menu-content { | |
| -webkit-transform: translate3d(270px, 0px, 0px) !important; | |
| width: calc(100% - 270px) !important; | |
| } | |
| .bar-header button.ion-navicon { | |
| display: none; | |
| } | |
| } | |
| .messages { | |
| margin:0; | |
| padding:0; | |
| list-style-type:none; | |
| } | |
| .messages li { | |
| display:block; | |
| float:left; | |
| clear:both; | |
| max-width:65%; | |
| margin:0 0 1rem 0; | |
| padding:0; | |
| } | |
| .messages li:nth-child(even) { | |
| float:right; | |
| } | |
| .messages li:nth-child(even) img { | |
| float:right; | |
| } | |
| .messages p { | |
| border-radius:.75rem; | |
| background:#e6e5eb; | |
| color:#383641; | |
| padding:.6875rem; | |
| margin:0; | |
| font-size:.875rem; | |
| } | |
| .messages li:nth-child(even) p { | |
| background:#158ffe; | |
| color:#fff; | |
| } | |
| .messages img { | |
| display:block; | |
| max-width:65%; | |
| border-radius:.75rem; | |
| } | |
| .bold { | |
| font-weight: bold; | |
| } |
Demo showing how to wire up side menus along with navigation within Ionic.
Forked from Steve Davis's Pen Side Menu and Navigation: 1.0.0-beta.1.
Forked from Mike Hartington's Pen Side Menu and Navigation: 1.0.0-beta.1.
Forked from Captain Anonymous's Pen Side Menu and Navigation: 1.0.0-beta.1.
A Pen by Vijay Soni on CodePen.
This is a test