mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
3ee5ea77a6
Previously I disabled the activation class immediately on a touchmove, where as the click will still work if you touchstart and touchend within a few pixels of each other. So visually it may have looked like the click shouldn't have worked. I just updated it so the use the same numbers. For example, if you hold down an item and move just 5 pixels, the item will stay active (before it wouldn't have), and the click will fire. But at the same time, if you hold down an item, and move a larger distance, once it realizes that it went farther than 6 pixels it'll not allow a click to happen, AND it'll not show the item as being active.
307 lines
11 KiB
HTML
307 lines
11 KiB
HTML
<html ng-app="navTest">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>List</title>
|
||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
||
<style>
|
||
#click-notify {
|
||
position: absolute;
|
||
top: 100px;
|
||
left: 40%;
|
||
z-index: 9997;
|
||
display: none;
|
||
padding: 8px;
|
||
background: red;
|
||
color: white;
|
||
}
|
||
#mousemove-notify {
|
||
position: absolute;
|
||
top: 140px;
|
||
left: 40%;
|
||
z-index: 9998;
|
||
display: none;
|
||
padding: 8px;
|
||
background: orange;
|
||
}
|
||
#touchmove-notify {
|
||
position: absolute;
|
||
top: 180px;
|
||
left: 40%;
|
||
z-index: 9999;
|
||
display: none;
|
||
padding: 8px;
|
||
background: yellow;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body ng-controller="TestCtrl">
|
||
<div id="click-notify">CLICK!</div>
|
||
<div id="mousemove-notify">Mouse Move!</div>
|
||
<div id="touchmove-notify">Touch Move!</div>
|
||
<!-- <ion-side-menus>
|
||
|
||
<ion-side-menu-content>
|
||
-->
|
||
<ion-header-bar class="bar-positive">
|
||
<div class="buttons">
|
||
<button ng-click="toggleDelete()" class="button button-clear">{{ editBtnText }}</button>
|
||
<button ng-click="toggleLeft()" class="button">Toggle Left Menu</button>
|
||
</div>
|
||
<h1 class="title">List Tests</h1>
|
||
<div class="buttons">
|
||
<button ng-click="toggleReorder()" class="button button-clear">{{ reorderBtnText }}</button>
|
||
</div>
|
||
</ion-header-bar>
|
||
|
||
<ion-content class="has-header">
|
||
|
||
<ion-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, index)"
|
||
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 -->
|
||
<ion-item item="item" ng-href="#" ng-click="itemClick(item)" class="item-thumbnail-left" ng-repeat="item in items" ng-class="{ active: item.isActive}">
|
||
<img ng-src="{{item.face}}">
|
||
<h2>{{item.from}}</h2>
|
||
<p>{{item.text}}</p>
|
||
</ion-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 -->
|
||
<ion-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>
|
||
</ion-item>
|
||
|
||
<!-- shows that the item directive can receive many attributes and overrides the list attributes -->
|
||
<ion-item on-delete="deleteItem(item, index)"
|
||
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
|
||
</ion-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">
|
||
<ion-slide-box show-pager="false">
|
||
<ion-slide>
|
||
<div class="box blue">
|
||
<h1>BLUE {{slideBox.slideIndex}}</h1>
|
||
</div>
|
||
</ion-slide>
|
||
<ion-slide>
|
||
<div class="box yellow">
|
||
<h1>YELLOW {{slideBox.slideIndex}}</h1>
|
||
</div>
|
||
</ion-slide>
|
||
<ion-slide>
|
||
<div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
|
||
</ion-slide>
|
||
</ion-slide-box>
|
||
</div>
|
||
|
||
</ion-list>
|
||
|
||
</ion-content>
|
||
<!--
|
||
</ion-side-menu-content>
|
||
|
||
<ion-side-menu side="left">
|
||
Left menu!
|
||
</ion-side-menu>
|
||
</ion-side-menus> -->
|
||
|
||
<script>
|
||
angular.module('navTest', ['ionic'])
|
||
|
||
.controller('TestCtrl', function($scope, $timeout, $ionicSideMenuDelegate) {
|
||
|
||
$scope.toggleLeft = function() {
|
||
$ionicSideMenuDelegate.toggleLeft();
|
||
};
|
||
|
||
// Build Mock Data
|
||
$scope.items = [
|
||
{
|
||
from: 'Ben',
|
||
face: 'https://pbs.twimg.com/profile_images/378800000571933189/278e8e1b7871a115b95fc550cd07af40.png',
|
||
text: 'Whoa, whoa, whoa. There’s still plenty of meat on that bone. Now you take this home, throw it in a pot, add some broth, a potato. Baby, you\'ve got a stew going.' },
|
||
{
|
||
from: 'Adam',
|
||
face: 'https://pbs.twimg.com/profile_images/2927292174/25b170ee2e3044fd936ad1319bc4b82d_bigger.jpeg',
|
||
text: 'It Ain\'t Easy Being Cheesy' },
|
||
{
|
||
from: 'Tim',
|
||
face: 'https://pbs.twimg.com/profile_images/378800000290028838/ee3303b02223f25cb0f9b082b55b2eeb.jpeg',
|
||
text: 'Baxter! You know I don\'t speak spanish!' },
|
||
{
|
||
from: 'Brody',
|
||
face: 'https://pbs.twimg.com/profile_images/378800000138067018/554c103ebf37c2ba3b923b8deea46b0d.jpeg',
|
||
text: 'Sounds like some sort of marmalade' },
|
||
{
|
||
from: 'Peter',
|
||
face: 'https://pbs.twimg.com/profile_images/378800000238071493/08f76337bdc91b1e1e73a9d55c57a451.jpeg',
|
||
text: 'A cooked goose for everyone!' },
|
||
{
|
||
from: 'Max',
|
||
face: 'https://pbs.twimg.com/profile_images/430001754747305984/qa5DFLgU.jpeg',
|
||
text: 'Yes my dear man, more beans. oooohh' },
|
||
{
|
||
from: 'Andy',
|
||
face: 'https://pbs.twimg.com/profile_images/423294834229522433/BSlEOBYt.jpeg',
|
||
text: 'I did it all for her' },
|
||
{
|
||
from: 'Melissa',
|
||
face: 'https://pbs.twimg.com/profile_images/412451928816111616/VZ3_md1N.jpeg',
|
||
text: 'I think I want my money back' }
|
||
];
|
||
|
||
|
||
// 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');
|
||
};
|
||
|
||
|
||
$scope.itemClick = function(item) {
|
||
var el = document.getElementById('click-notify');
|
||
el.style.display = 'block';
|
||
el.innerText = 'Click! ' + item.from;
|
||
|
||
setTimeout(function(){
|
||
document.getElementById('click-notify').style.display = 'none';
|
||
}, 300);
|
||
};
|
||
|
||
// Item Methods/Properties
|
||
$scope.deleteItem = function(item, index) {
|
||
console.log('onDelete from the "item" directive on-delete attribute. Lets not delete this item today ok!', item, index);
|
||
};
|
||
$scope.deleteListItem = function(item, index) {
|
||
console.log('onDelete from the "list" on-delete attribute', item, index);
|
||
$scope.items.splice(index, 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 }
|
||
];
|
||
|
||
});
|
||
|
||
var mouseTimerId;
|
||
var mouseMoveCount = 0;
|
||
function onMouseMove(e) {
|
||
clearTimeout(mouseTimerId);
|
||
mouseTimerId = setTimeout(function(){
|
||
var el = document.getElementById('mousemove-notify');
|
||
el.style.display = 'block';
|
||
mouseMoveCount++;
|
||
el.innerText = 'Mouse Move! ' + mouseMoveCount;
|
||
clearTimeout(mouseTimerId);
|
||
mouseTimerId = setTimeout(function(){
|
||
el.style.display = 'none';
|
||
}, 1000);
|
||
}, 0);
|
||
}
|
||
|
||
var touchTimerId;
|
||
var touchMoveCount = 0;
|
||
function onTouchMove(e) {
|
||
clearTimeout(touchTimerId);
|
||
touchTimerId = setTimeout(function(){
|
||
var el = document.getElementById('touchmove-notify');
|
||
el.style.display = 'block';
|
||
touchMoveCount++;
|
||
el.innerText = 'Touch Move! ' + touchMoveCount;
|
||
clearTimeout(touchTimerId);
|
||
touchTimerId = setTimeout(function(){
|
||
el.style.display = 'none';
|
||
}, 1000);
|
||
}, 0);
|
||
}
|
||
|
||
document.addEventListener('touchmove', onTouchMove, false);
|
||
document.addEventListener('mousemove', onMouseMove, false);
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|