mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
demos(): add demos for sideMenu and popup
This commit is contained in:
Andrew Joslin
154
js/angular/directive/sideMenus.js
vendored
154
js/angular/directive/sideMenus.js
vendored
@@ -94,6 +94,160 @@ app.controller('SideMenusSimpleCtrl', function($scope, $ionicSideMenuDelegate) {
|
||||
</ion-side-menus>
|
||||
</ion-view>
|
||||
*/
|
||||
/**
|
||||
* @ngdoc demo
|
||||
* @name ionSideMenus#navWithMenu
|
||||
* @module sideMenuWithNav
|
||||
* @javascript
|
||||
angular.module('sideMenuWithNav', ['ionic'])
|
||||
.config(function($stateProvider, $urlRouterProvider) {
|
||||
$stateProvider
|
||||
|
||||
.state('app', {
|
||||
url: "/app",
|
||||
abstract: true,
|
||||
templateUrl: "templates/menu.html",
|
||||
controller: 'AppCtrl'
|
||||
})
|
||||
|
||||
.state('app.search', {
|
||||
url: "/search",
|
||||
views: {
|
||||
'menuContent' :{
|
||||
templateUrl: "templates/search.html"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.state('app.browse', {
|
||||
url: "/browse",
|
||||
views: {
|
||||
'menuContent' :{
|
||||
templateUrl: "templates/browse.html"
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('app.playlists', {
|
||||
url: "/playlists",
|
||||
views: {
|
||||
'menuContent' :{
|
||||
templateUrl: "templates/playlists.html",
|
||||
controller: 'PlaylistsCtrl'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.state('app.single', {
|
||||
url: "/playlists/:playlistId",
|
||||
views: {
|
||||
'menuContent' :{
|
||||
templateUrl: "templates/playlist.html",
|
||||
controller: 'PlaylistCtrl'
|
||||
}
|
||||
}
|
||||
});
|
||||
// if none of the above states are matched, use this as the fallback
|
||||
$urlRouterProvider.otherwise('/app/playlists');
|
||||
})
|
||||
|
||||
.controller('AppCtrl', function($scope) {
|
||||
})
|
||||
|
||||
.controller('PlaylistsCtrl', function($scope) {
|
||||
$scope.playlists = [
|
||||
{ title: 'Reggae', id: 1 },
|
||||
{ title: 'Chill', id: 2 },
|
||||
{ title: 'Dubstep', id: 3 },
|
||||
{ title: 'Indie', id: 4 },
|
||||
{ title: 'Rap', id: 5 },
|
||||
{ title: 'Cowbell', id: 6 }
|
||||
];
|
||||
})
|
||||
|
||||
.controller('PlaylistCtrl', function($scope, $stateParams) {
|
||||
})
|
||||
*
|
||||
* @html
|
||||
<ion-nav-view>
|
||||
</ion-nav-view>
|
||||
|
||||
<script type="text/ng-template" id="templates/menu.html">
|
||||
<ion-side-menus>
|
||||
|
||||
<ion-pane ion-side-menu-content>
|
||||
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
|
||||
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
|
||||
</ion-nav-bar>
|
||||
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
|
||||
</ion-pane>
|
||||
|
||||
<ion-side-menu side="left">
|
||||
<header class="bar bar-header bar-stable">
|
||||
<h1 class="title">Left</h1>
|
||||
</header>
|
||||
<ion-content class="has-header">
|
||||
<ion-list>
|
||||
<ion-item nav-clear menu-close href="#/app/search">
|
||||
Search
|
||||
</ion-item>
|
||||
<ion-item nav-clear menu-close href="#/app/browse">
|
||||
Browse
|
||||
</ion-item>
|
||||
<ion-item nav-clear menu-close href="#/app/playlists">
|
||||
Playlists
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-side-menu>
|
||||
|
||||
</ion-side-menus>
|
||||
</script>
|
||||
|
||||
<script type="text/ng-template" id="templates/browse.html">
|
||||
<ion-view title="Browse">
|
||||
<ion-nav-buttons side="left">
|
||||
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
|
||||
</ion-nav-buttons>
|
||||
<ion-content class="has-header">
|
||||
<h1>Browse</h1>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
|
||||
<script type="text/ng-template" id="templates/playlist.html">
|
||||
<ion-view title="Playlist">
|
||||
<ion-content class="has-header">
|
||||
<h1>Playlist</h1>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
|
||||
<script type="text/ng-template" id="templates/playlists.html">
|
||||
<ion-view title="Playlists">
|
||||
<ion-nav-buttons side="left">
|
||||
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
|
||||
</ion-nav-buttons>
|
||||
<ion-content class="has-header">
|
||||
<ion-list>
|
||||
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
|
||||
{{playlist.title}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
|
||||
<script type="text/ng-template" id="templates/search.html">
|
||||
<ion-view title="Search">
|
||||
<ion-nav-buttons side="left">
|
||||
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
|
||||
</ion-nav-buttons>
|
||||
<ion-content class="has-header">
|
||||
<h1>Search</h1>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
*/
|
||||
|
||||
.directive('ionSideMenus', [function() {
|
||||
return {
|
||||
|
||||
110
js/angular/service/popup.js
vendored
110
js/angular/service/popup.js
vendored
@@ -96,6 +96,116 @@ var POPUP_TPL =
|
||||
*});
|
||||
*```
|
||||
*/
|
||||
|
||||
/**
|
||||
* @ngdoc demo
|
||||
* @name $ionicPopup#simple
|
||||
* @module popupSimple
|
||||
* @javascript
|
||||
angular.module('popupSimple', ['ionic'])
|
||||
.controller('PopupCtrl', function($scope, $timeout, $q, $ionicPopup) {
|
||||
$scope.showPopup = function() {
|
||||
$scope.data = {}
|
||||
|
||||
$ionicPopup.show({
|
||||
templateUrl: 'popup-template.html',
|
||||
title: 'Enter Wi-Fi Password',
|
||||
subTitle: 'Please use normal things',
|
||||
scope: $scope,
|
||||
buttons: [
|
||||
{ text: 'Cancel', onTap: function(e) { return true; } },
|
||||
{
|
||||
text: '<b>Save</b>',
|
||||
type: 'button-positive',
|
||||
onTap: function(e) {
|
||||
return $scope.data.wifi;
|
||||
}
|
||||
},
|
||||
]
|
||||
}).then(function(res) {
|
||||
console.log('Tapped!', res);
|
||||
}, function(err) {
|
||||
console.log('Err:', err);
|
||||
}, function(msg) {
|
||||
console.log('message:', msg);
|
||||
});
|
||||
|
||||
$timeout(function() {
|
||||
$ionicPopup.confirm({
|
||||
title: 'Do you like ice cream?',
|
||||
cancelText: 'No',
|
||||
okText: 'Yes, of course'
|
||||
}).then(function(res) {
|
||||
console.log('Your love for ice cream:', res);
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
$scope.showConfirm = function() {
|
||||
$ionicPopup.confirm({
|
||||
title: 'Consume Ice Cream',
|
||||
content: 'Are you sure you want to eat this ice cream?'
|
||||
}).then(function(res) {
|
||||
if(res) {
|
||||
console.log('You are sure');
|
||||
} else {
|
||||
console.log('You are not sure');
|
||||
}
|
||||
});
|
||||
};
|
||||
$scope.showPrompt = function() {
|
||||
$ionicPopup.prompt({
|
||||
title: 'ID Check',
|
||||
subTitle: 'What is your name?'
|
||||
}).then(function(res) {
|
||||
console.log('Your name is', res);
|
||||
});
|
||||
};
|
||||
$scope.showPasswordPrompt = function() {
|
||||
$ionicPopup.prompt({
|
||||
title: 'Password Check',
|
||||
subTitle: 'Enter your secret password',
|
||||
inputType: 'password',
|
||||
inputPlaceholder: 'Your password'
|
||||
}).then(function(res) {
|
||||
console.log('Your name is', res);
|
||||
});
|
||||
};
|
||||
$scope.showAlert = function() {
|
||||
$ionicPopup.alert({
|
||||
title: 'Draft Saved',
|
||||
content: 'Your Data has been saved!'
|
||||
}).then(function(res) {
|
||||
console.log('Your Data has been saved!');
|
||||
}, function(err) {},
|
||||
function(popup) {
|
||||
console.log('Got popup', popup);
|
||||
$timeout(function() {
|
||||
popup.close();
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
});
|
||||
* @html
|
||||
<ion-content ng-controller="PopupCtrl">
|
||||
<button class="button button-dark" ng-click="showPopup()">Generic</button>
|
||||
<button class="button button-primary" ng-click="showConfirm()">Confirm</button>
|
||||
<button class="button button-balanced" ng-click="showPrompt()">Prompt</button>
|
||||
<button class="button button-balanced" ng-click="showPasswordPrompt()">Password Prompt</button>
|
||||
<button class="button button-positive" ng-click="showAlert()">Alert</button>
|
||||
<div class="list">
|
||||
<a class="item" href="#"
|
||||
ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
|
||||
Item {{item}}
|
||||
</a>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
<script id="popup-template.html" type="text/ng-template">
|
||||
<input ng-model="data.wifi" type="text" placeholder="Password">
|
||||
</script>
|
||||
*
|
||||
*/
|
||||
IonicModule
|
||||
.factory('$ionicPopup', [
|
||||
'$ionicTemplateLoader',
|
||||
|
||||
Reference in New Issue
Block a user