發布時間： 2017-11-08 09:32:03
?1.ComponentsIonic封裝了一系列components(組件)，component可以讓你快速的為APP創建一個用戶界面。Ionic提供了很多組件，如modal，popup，card等。雖然組件主要是HTML+CSS組成，但部分組件也包含了JavaScript函數
2.Action sheetsAction Sheets從設備底部屏幕滑出，可以顯示一些選項如確定或取消。Action Sheets有時候被用來作為菜單，但不應該被用來導航
Action Sheets經常顯示在頁面其他組件的上面，并且必須在出沒其他內容的時候消失。當Action Sheets被觸發的時候，頁面其他內容會變暗，使用戶聚焦于Action Sheets
3.用例<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>ionic組件之上拉菜單</title>
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/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>Share</b> This'},
{text: 'Move'}
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function () {
// add cancel code..
},
buttonClicked: function (index) {
return true;
}
});
$timeout(function () {
hideSheet();
}, 2000);
};
}])
</script>
</head>
<body ng-app="starter" ng-controller="actionsheetCtl">
<ion-pane>
<ion-content>
<h2 ng-click="show()">Action Sheet</h2>
</ion-content>
</ion-pane>
</body>
</html>
4.運行效果：
當點擊action sheets文字之后彈出窗口
?
上一篇： {華為HCNA-RS}VLAN間路由
下一篇： {UI}設計-無序列表7個設計事項 引言
18922156670
