本文主要是介绍ionic学习笔记1,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
$ionicActionSheet
ionic 上拉菜单(ActionSheet)
上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项。
非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title>Action Sheet</title><link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet"><script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script><script type="text/javascript">angular.module('starter', ['ionic']).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.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if(window.StatusBar) {StatusBar.styleDefault();}});}).controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){$scope.show = function() {var hideSheet = $ionicActionSheet.show({buttons: [{ text: '<b>分享</b>' },{ text: 'Move' }],destructiveText: '删除',titleText: '您确定要分享这份代码?',cancelText: '取消',cancel: function() {// alert('cancel!');//点击取消时候触发},buttonClicked: function(index) {//alert('index is:'+index);return true;//返回true:点击关闭,false:不关闭},destructiveButtonClicked:function(){return true;//返回true:点击关闭,false:不关闭},cancelOnStateChange : true//是否取消actionsheet当导航到一个新的视图状态时候,默认为true。});};}])</script>
</head>
<body ng-app="starter" ng-controller="actionsheetCtl" style="text-align: center;"><ion-pane><ion-content ><button ng-click="show()" style="text-align: center;background-color: aliceblue;">Action Sheet</button></ion-content>
</ion-pane>
</body>
</html>
这篇关于ionic学习笔记1的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!