Thursday, June 1, 2017

115 Ionic1 Popups

.

115 Ionic1 Popups

Source Codes

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
<title></title>



<script src="//code.ionicframework.com/1.3.2/js/ionic.bundle.js"></script>







<link href="//code.ionicframework.com/1.3.2/css/ionic.css" rel="stylesheet">

<style>
.platform-ios .manual-ios-statusbar-padding{padding-top:20px}.manual-remove-top-padding{padding-top:0}.manual-remove-top-padding .scroll{padding-top:0!important}.list.card.manual-card-fullwidth,ion-list.manual-list-fullwidth div.list{margin-left:-10px;margin-right:-10px}.list.card.manual-card-fullwidth>.item,ion-list.manual-list-fullwidth div.list>.item{border-radius:0;border-left:0;border-right:0}.show-list-numbers-and-dots ul{list-style-type:disc;padding-left:40px}.show-list-numbers-and-dots ol{list-style-type:decimal;padding-left:40px}
</style>
</head>
<body ng-app="app" animation="slide-left-right-ios7" >
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
<script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">
<ion-content padding="true" class="has-header">
<button class="button button-positive button-block" ng-click="showPopup()">Popup</button>
<button class="button button-balanced button-block" ng-click="showConfirm()">Confirm</button>
<button class="button button-assertive button-block" ng-click="showAlert()">Alert</button>
<button class="button button-energized button-block" ng-click="showPrompt()">Prompt</button>
</ion-content>
</ion-view>
</script>

<script>
/*create js object app, bind to html app, use ionic framework*/
var app=angular.module('app',['ionic']);
/******************************/
/*define CONTROLLERS & CONFIGS*/
/******************************/
/*define app.controller methods*/
app.controller('homeCtrl',function($scope,$ionicPopup){

/*showPromptPopup*/
// When button is clicked, the popup will be shown...
$scope.showPopup = function() {
$scope.data = {}

// Custom popup
var myPopup = $ionicPopup.show({
template: '<input type = "text" ng-model = "data.model">',
title: 'Title',
subTitle: 'Subtitle',
scope: $scope,

buttons: [
{ text: 'Cancel' }, {
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {

if (!$scope.data.model) {
//don't allow the user to close unless he enters model...
e.preventDefault();
} else {
return $scope.data.model;
}
}
}
]
});

myPopup.then(function(res) {
console.log('Tapped!', res);
});
};

/*show confirm */

// When button is clicked, the popup will be shown...
$scope.showConfirm = function() {

var confirmPopup = $ionicPopup.confirm({
title: 'Title',
template: 'Are you sure?'
});

confirmPopup.then(function(res) {
if(res) {
console.log('Sure!');
} else {
console.log('Not sure!');
}
});

};

/*show alert*/
$scope.showAlert = function() {

var alertPopup = $ionicPopup.alert({
title: 'Title',
template: 'Alert message'
});

alertPopup.then(function(res) {
// Custom functionality....
});
};
/*show prompt*/
$scope.showPrompt = function() {

var promptPopup = $ionicPopup.prompt({
title: 'Title',
template: 'Template text',
inputType: 'text',
inputPlaceholder: 'Placeholder'
});

promptPopup.then(function(res) {
console.log(res);
});

};
});
/*define app.config method*/
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('home',{url:'/page1',templateUrl:'home.html',controller:'homeCtrl'});
$urlRouterProvider.otherwise('/page1')
});
/************************/
/*define SYSTEM SETTINGS*/
/************************/
app.config(function($ionicConfigProvider, $sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist([ 'self','*://www.youtube.com/**', '*://player.vimeo.com/video/**']);
})
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
});

/*
This directive is used to disable the "drag to open" functionality of the Side-Menu
when you are dragging a Slider component.
*/
app.directive('disableSideMenuDrag', ['$ionicSideMenuDelegate', '$rootScope', function($ionicSideMenuDelegate, $rootScope) {
return {
restrict: "A",
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {

function stopDrag(){
$ionicSideMenuDelegate.canDragContent(false);
}

function allowDrag(){
$ionicSideMenuDelegate.canDragContent(true);
}

$rootScope.$on('$ionicSlides.slideChangeEnd', allowDrag);
$element.on('touchstart', stopDrag);
$element.on('touchend', allowDrag);
$element.on('mousedown', stopDrag);
$element.on('mouseup', allowDrag);

}]
};
}]);

/*
This directive is used to open regular and dynamic href links inside of inappbrowser.
*/
app.directive('hrefInappbrowser', function() {
return {
restrict: 'A',
replace: false,
transclude: false,
link: function(scope, element, attrs) {
var href = attrs['hrefInappbrowser'];

attrs.$observe('hrefInappbrowser', function(val){
href = val;
});

element.bind('click', function (event) {

window.open(href, '_system', 'location=yes');

event.preventDefault();
event.stopPropagation();

});
}
};
});
</script>
</body>
</html>

Reference

https://www.tutorialspoint.com/ionic/ionic_js_popup.htm

Preview

Live Demo

.

Related Posts Widget

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)