您的位置：首页 > 其它

IONIC----01.ionicActionSheet

2016-07-08 11:35 330 查看

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

<script src="./lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/css/ionic.min.css">

<title>Ionic</title>
</head>

<body ng-app="myApp" ng-controller="fristController">
<ion-header-bar class="bar-positive">
<h1 class="title">$ionicActionSheet</h1>
<a class="button" ng-click="show();">操作</a>
</ion-header-bar>
<ion-content padding="true">
AAA<br>BBB<br>CCC
</ion-content>

</body>
</html>
<script>
angular.module("myApp", ["ionic"])
.controller("fristController",function($scope, $ionicActionSheet, $timeout) {

// Triggered on a button click, or some other target
$scope.show = function() {

// Show the action sheet
var hideSheet= $ionicActionSheet.show({
cancelOnStateChange:true,
cssClass:'action_s',
titleText: "操作当前文章",
buttons: [
{ text: "<b>分享</b>文章" },
{ text: "移动到..." }
],
buttonClicked: function(index) {
console.log('操作了第'+index+'个文章');
return true;
},
cancelText: "取消",
cancel: function() {
// add cancel code..

console.log('执行了取消操作');
return true;
},
destructiveText: "删除",
destructiveButtonClicked:function(){
console.log('执行了删除操作');
return true;

}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);

};
});
</script>

GitHub

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ionic sheet ActionShee

相关文章推荐

新的分享

章节导航