javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Action Sheet test page

Browse Source
This commit is contained in:
Max Lynch
2013-10-06 15:31:47 -05:00
parent 5cc7070c03
commit 81d75e072c
1 changed files with 79 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
test/actionsheet.html Normal file
View File

@ -0,0 +1,79 @@
<html>
<head>
<meta charset="utf-8">
<title>Action Sheets</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/ionicons.css" rel="stylesheet">
<link href="../dist/ionic.css" rel="stylesheet">
</head>
<body>
<section>
<header class="bar bar-header bar-dark">
<h1 class="title">Action Sheets</h1>
</header>
<main class="content has-header">
<div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padded">
<a href="#" class="button button-warning" id="modal-opener">Open Sheet</a>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</div>
</main>
</section>
<div id="sheet" class="action-sheet slide-in-up">
<div class="action-sheet-group">
<div class="action-sheet-title" ng-if="titleText">Do you like ice cream?</div>
<button class="button">Tweet</button>
<button class="button">Email</button>
</div>
<div class="action-sheet-group" ng-if="destructiveText">
<button class="button destructive">Delete photos</button>
</div>
<div class="action-sheet-group" ng-if="cancelText">
<button class="button" ng-click="cancel()">Cancel</button>
</div>
</div>
<script src="../dist/ionic.js"></script>
<script>
var open = document.getElementById('modal-opener');
var sDiv = document.getElementById('sheet');
var sheet = new ionic.views.ActionSheet({el: sDiv});
ionic.on('tap', function(e) {
sheet.show();
/*
ActionSheet.show({
buttons: [
{ text: 'Option 1' },
{ text: 'Option 2' },
{ text: 'Option 3' },
],
destructiveText: 'Delete life',
titleText: 'Are you sure about life?',
cancelText: 'Cancel',
cancel: function() {
console.log('CANCELLED');
},
buttonClicked: function(index) {
console.log('BUTTON CLICKED', index);
return true;
},
destructiveButtonClicked: function() {
return true;
}
});
*/
return false;
}, open);
</script>
</body>
</html>