Thursday, May 24, 2018

115 Ionic1 Popups

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) {
//dont 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

.

visit link download

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)