mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
9327ac71c7
This requires us to set fullscreen="false" in our cordova apps. Uses the resize event to determine when the keyboard has been shown, then broadcasts an event from the activeElement: 'scrollChildIntoView', which is caught by the nearest parent scrollView. The scrollView will then see if that element is within the new device's height (since the keyboard resizes the screen), and if not scroll it into view. Additionally, when the keyboard resizes the screen we add a `.hide-footer` class to the body, which will hide tabbars and footer bars while the keyboard is opened. For now, this is android only. Closes #314.
258 lines
8.5 KiB
HTML
258 lines
8.5 KiB
HTML
<html ng-app="navTest">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>List</title>
|
|
|
|
<!-- Sets initial viewport load and disables zooming -->
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
|
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
|
<style>
|
|
.box {
|
|
width: 100%;
|
|
height: 50px;
|
|
color: #fff;
|
|
}
|
|
.box h1 {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100%;
|
|
margin-top: -50px;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 60px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
.blue {
|
|
background-color: rgb(71, 138, 238);
|
|
}
|
|
.yellow {
|
|
background-color: rgb(233, 233, 109);
|
|
}
|
|
.pink {
|
|
background-color: rgb(233, 109, 233);
|
|
}
|
|
.my-repeat-animation > .ng-enter,
|
|
.my-repeat-animation > .ng-leave,
|
|
.my-repeat-animation > .ng-move {
|
|
-webkit-transition: 0.2s linear all;
|
|
transition: 0.2s linear all;
|
|
position: relative;
|
|
}
|
|
|
|
.my-repeat-animation > .ng-enter {
|
|
left:-10px;
|
|
opacity:0;
|
|
z-index: 10;
|
|
}
|
|
.my-repeat-animation > .ng-enter.ng-enter-active {
|
|
left:0;
|
|
opacity:1;
|
|
}
|
|
|
|
.my-repeat-animation > .ng-leave {
|
|
left:0;
|
|
opacity:1;
|
|
}
|
|
.my-repeat-animation > .ng-leave.ng-leave-active {
|
|
left:-10px;
|
|
opacity:0;
|
|
}
|
|
|
|
.my-repeat-animation > .ng-move {
|
|
opacity:0.5;
|
|
}
|
|
.my-repeat-animation > .ng-move.ng-move-active {
|
|
opacity:1;
|
|
}
|
|
.item-message img {
|
|
float: left;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-right: 10px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body ng-controller="TestCtrl">
|
|
|
|
<pane>
|
|
|
|
<header class="bar bar-header bar-positive">
|
|
<div class="buttons">
|
|
<button ng-click="toggleDelete()" class="button button-clear">{{ editBtnText }}</button>
|
|
</div>
|
|
<h1 class="title">List Tests</h1>
|
|
<div class="buttons">
|
|
<button ng-click="toggleReorder()" class="button button-clear">{{ reorderBtnText }}</button>
|
|
</div>
|
|
</header>
|
|
|
|
<content has-header="true">
|
|
|
|
<list show-delete="isDeletingItems"
|
|
show-reorder="isReorderingItems"
|
|
on-refresh-holding="refreshHolding()"
|
|
on-refresh-opening="refreshOpening(ratio)"
|
|
on-refresh="refreshItems()"
|
|
on-reorder="onReorder(el, start, end)"
|
|
refresh-complete="refreshComplete"
|
|
on-delete="deleteListItem(item)"
|
|
delete-icon="ion-minus-circled"
|
|
reorder-icon="ion-navicon"
|
|
animation="my-repeat-animation"
|
|
can-delete="true"
|
|
can-reorder="true"
|
|
can-swipe="true"
|
|
option-buttons="optionButtons1">
|
|
|
|
<!-- shows that the item directive does not need attributes and can get values from the list attributes -->
|
|
<item item="item" class="item-message" ng-repeat="item in items" ng-class="{ active: item.isActive}">
|
|
<img ng-src="{{item.face}}">
|
|
<h2>{{item.from}}</h2>
|
|
<p>{{item.text}}</p>
|
|
</item>
|
|
|
|
<!-- shows how a divider could be included-->
|
|
<div class="item item-divider">
|
|
Me Divider, just plain ol' HTML nested in the list directive.
|
|
</div>
|
|
|
|
<!-- shows it can override the attributes set by the list -->
|
|
<item can-delete="false"
|
|
can-reorder="false"
|
|
can-swipe="false"
|
|
item-type="item-icon-left item-icon-right">
|
|
<i class="icon ion-stats-bars"></i>
|
|
Individual item directive, but can't do much. Overrides list attributes with its own left and right icons.
|
|
<i class="icon ion-arrow-graph-up-right"></i>
|
|
</item>
|
|
|
|
<!-- shows that the item directive can receive many attributes and overrides the list attributes -->
|
|
<item on-delete="deleteItem(item)"
|
|
delete-icon="ion-trash-a"
|
|
reorder-icon="ion-navicon-round"
|
|
can-delete="true"
|
|
can-reorder="true"
|
|
option-buttons="optionButtons2">
|
|
<i class="icon ion-person-stalker"></i>
|
|
Individual item directive and overrides list attrs with item attributes
|
|
</item>
|
|
|
|
<!-- shows how a divider could be included-->
|
|
<div class="item item-divider">
|
|
Below is NOT using the item directive, but just nested HTML
|
|
</div>
|
|
|
|
<!-- shows how very simple lists don't need the item directive at all -->
|
|
<div class="item item-thumbnail-left">
|
|
<img src="http://pbs.twimg.com/profile_images/2913427048/ed94193baa04ace85aa8a8bf4bf6c5a9.jpeg">
|
|
<h2>Nic Cage</h2>
|
|
<p>I am not a demon. I am a lizard, a shark, a heat-seeking panther. I want to be Bob Denver on acid playing the accordion.</p>
|
|
</div>
|
|
|
|
<a class="item item-icon-left" href="{{ item.url }}" ng-repeat="item in urlItems" ng-class="{ active: item.isActive}">
|
|
<i class="icon {{ item.icon }}"></i>
|
|
{{ item.text }}
|
|
</a>
|
|
<input type="text" placeholder="text input">
|
|
<div class="item">
|
|
<slide-box show-pager="false">
|
|
<slide>
|
|
<div class="box blue">
|
|
<h1>BLUE {{slideBox.slideIndex}}</h1>
|
|
</div>
|
|
</slide>
|
|
<slide>
|
|
<div class="box yellow">
|
|
<h1>YELLOW {{slideBox.slideIndex}}</h1>
|
|
</div>
|
|
</slide>
|
|
<slide>
|
|
<div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
|
|
</slide>
|
|
</slide-box>
|
|
</div>
|
|
|
|
</list>
|
|
|
|
</content>
|
|
|
|
</pane>
|
|
|
|
<script>
|
|
angular.module('navTest', ['ionic'])
|
|
|
|
.controller('TestCtrl', function($scope, $timeout) {
|
|
|
|
// Build Mock Data
|
|
$scope.items = [
|
|
{ from: 'Ben', face: 'https://pbs.twimg.com/profile_images/378800000571933189/278e8e1b7871a115b95fc550cd07af40.png', text: 'Did you prepare?' },
|
|
{ from: 'Adam', face: 'https://pbs.twimg.com/profile_images/2927292174/25b170ee2e3044fd936ad1319bc4b82d_bigger.jpeg', text: 'Don\'t forget to smile!' },
|
|
{ from: 'Tim', face: 'https://pbs.twimg.com/profile_images/378800000290028838/ee3303b02223f25cb0f9b082b55b2eeb.jpeg', text: 'Bring some shirts!', isActive: true }
|
|
];
|
|
|
|
|
|
// List Toggles
|
|
$scope.editBtnText = 'Edit';
|
|
$scope.toggleDelete = function() {
|
|
$scope.isDeletingItems = !$scope.isDeletingItems;
|
|
$scope.isReorderingItems = false;
|
|
$scope.editBtnText = ($scope.isDeletingItems ? 'Done' : 'Edit');
|
|
};
|
|
$scope.reorderBtnText = 'Reorder';
|
|
$scope.toggleReorder = function() {
|
|
$scope.isReorderingItems = !$scope.isReorderingItems;
|
|
$scope.isDeletingItems = false;
|
|
$scope.reorderBtnText = ($scope.isReorderingItems ? 'Done' : 'Reorder');
|
|
};
|
|
|
|
|
|
// Item Methods/Properties
|
|
$scope.deleteItem = function(item) {
|
|
alert('onDelete from the "item" directive on-delete attribute. Lets not delete this item today ok!');
|
|
};
|
|
$scope.deleteListItem = function(item) {
|
|
alert('onDelete from the "list" on-delete attribute');
|
|
$scope.items.splice($scope.items.indexOf(item), 1);
|
|
};
|
|
$scope.onReorder = function(el, start, end) {
|
|
console.log('On reorder', el, start, end);
|
|
};
|
|
|
|
$scope.optionButtons1 = [
|
|
{
|
|
text: 'Edit',
|
|
onTap: function(item, button) { alert(button.text + ' Button: ' + item.text) }
|
|
},
|
|
{
|
|
text: 'Share',
|
|
type: 'button-balanced',
|
|
onTap: function(item, button) { alert(button.text + ' Button: ' + item.text) }
|
|
}
|
|
];
|
|
|
|
$scope.optionButtons2 = [
|
|
{
|
|
text: 'Cancel',
|
|
onTap: function() { alert('CANCEL!') }
|
|
},
|
|
{
|
|
text: 'Submit',
|
|
onTap: function() { alert('SUBMIT!') }
|
|
}
|
|
];
|
|
|
|
$scope.urlItems = [
|
|
{ text: 'Biography', icon: 'ion-person', url: 'http://en.wikipedia.org/wiki/Nicolas_Cage' },
|
|
{ text: 'Fan Club', icon: 'ion-star', url: 'http://cagealot.com/', isActive: true }
|
|
];
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|