ionic 对话框组件综合案例

2018-04-16 23:15:00
admin
原创
401
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title> </title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
        <script type="text/javascript">
        angular.module('myApp', ['ionic'])
        .controller('MyCtrl',function($scope, $ionicModal,$ionicPopup,$ionicPopover,$ionicActionSheet) {
			$ionicModal.fromTemplateUrl('my-modal.html',{
				scope:$scope,
				animation:'slide-in-up'
			}).then(function(modal){
				$scope.modal = modal;
			});
			$scope.showModal = function(){
				$scope.modal.show();					 
			};
			$scope.hideModal = function(){
				$scope.modal.hide();					 
			};
			
			//Popover
			$ionicPopover.fromTemplateUrl('my-popover.html',{
				scope:$scope
			}).then(function($event){
				$scope.popover = $event;
			});
			$scope.showPopover = function($event){
				$scope.popover.show($event);					 
			};
			$scope.hidePopover = function(){
				$scope.popover.hide();					 
			};
			
			//Action Sheet
			$scope.showActionSheet = function(){
				$ionicActionSheet.show(
					{
					  buttons:[
						  {text:'共享'},
						  {text:'移动'}
					  ],
					  titleText:'修改相册',
					  cancelText:'Cancel',
					  cancel:function(){
						  console.log('click cancel text');
					  },
					  buttonClicked:function(index){
						console.log('click button:'+index);
					  }
					}
				);
			};
			
			$scope.showAlert = function(){
				var alertPopup = $ionicPopup.alert(
					{title:'Alert Title',template:'This is Alert!'}
					);
				alertPopup.then(function(res){
					console.log("you click!")
				});
			};
			$scope.showConfirm = function(){
				var confirmPopup = $ionicPopup.confirm(
					{title:'Alert Title',template:'This is Alert!'}
					);
				confirmPopup.then(function(res){
					if(res){
					   console.log("you click ok");
					}else{
						console.log("you click cancel");
					}
				});
			};
			$scope.showPopup = function(){
				$scope.data = {};
				var myPopup = $ionicPopup.show(
					{
						title:'请输入你的账号',
					    template:'<input type=text ng-model=data.account>',
						scope:$scope,
						buttons:[
							{text:'取消'},
							{
								text:'登录',
								type:'button-positive',
								onTap:function(e){
									if(!$scope.data.account){
										e.preventDefault();
									}else{
										return $scope.data.account;
									}
								}
							}
						]
					}
					);
				  myPopup.then(function(res){
					  console.log('Tapped:',res);
				  });
			};
        });
      </script>
    </head>
    <body ng-controller="MyCtrl">
		<button ng-click="showModal()" class="button button-positive">模态窗口</button>
		<button ng-click="showAlert()" class="button button-positive">警告框</button>
		<button ng-click="showConfirm()" class="button button-positive">确认对话框</button>
		<button ng-click="showPopup()" class="button button-positive">自定义对话框</button>
		<button ng-click="showPopover($event)" class="button button-positive">浮动窗口</button>
		<button ng-click="showActionSheet()" class="button button-positive">上拉菜单</button>
		<script id="my-modal.html" type="text/ng-template">
		  <ion-modal-view>
		    <ion-header-bar class="bar-positive">
			  <h1 class=title>Modal Title</h1>
			  <button ng-click="hideModal()" class="button button-positive">关闭</button>
			</ion-header-bar>
			<ion-content>
			  Hello World!
			</ion-content>
		  </ion-modal-view>
		</script>
		
		<script id="my-popover.html" type="text/ng-template">
		  <ion-popover-view>
		    <ion-header-bar class="bar-positive">
			  <h1 class=title>Popover Title</h1>
			  <button ng-click="hidePopover()" class="button button-positive">关闭</button>
			</ion-header-bar>
			<ion-content>
			  Hello World!
			</ion-content>
		  </ion-popover-view>
		</script>		
		
    </body>
</html>
				
				
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227