mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
247 lines
6.9 KiB
HTML
247 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="ionicApp">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<title>Click Tests</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.js"></script>
|
|
<script src="../../../../dist/js/angular/angular.min.js"></script>
|
|
<script src="../../../../dist/js/angular/angular-animate.min.js"></script>
|
|
<script src="../../../../dist/js/angular/angular-sanitize.min.js"></script>
|
|
<script src="../../../../dist/js/angular-ui/angular-ui-router.min.js"></script>
|
|
<script src="../../../../dist/js/ionic-angular.js"></script>
|
|
<style>
|
|
.item-content {
|
|
padding: 8px !important;
|
|
}
|
|
.list {
|
|
margin: 5px !important;
|
|
}
|
|
.button {
|
|
line-height: 18px !important;
|
|
min-height: 30px !important;
|
|
}
|
|
.dot {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background-color: red;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body ng-controller="MyCtrl">
|
|
<form id="form">
|
|
<button class="button" ng-click="buttonClick()">button</button>
|
|
<div class="div button" ng-click="divClick()">div</div>
|
|
{{ buttonValue }} -
|
|
{{ radioModel.data }}
|
|
|
|
<div class="list">
|
|
|
|
<item ng-repeat="item in menuItems" item="item" ng-click="item.actionItem()">ng-click="item.actionItem()"</item>
|
|
|
|
<toggle>Toggle with no ng-click</toggle>
|
|
|
|
<toggle ng-click="{{ stringClick }}">Toggle with ng-click="{{ stringClick }]"</toggle>
|
|
|
|
<radio ng-change="radioChange()"
|
|
ng-click="radioClick(radioModel.data)"
|
|
ng-model="radioModel.data"
|
|
ng-value="'Radio A'">Radio A</radio>
|
|
|
|
<radio ng-change="radioChange()"
|
|
ng-click="radioClick(radioModel.data)"
|
|
ng-model="radioModel.data"
|
|
ng-value="'Radio B'">Radio B</radio>
|
|
|
|
</div>
|
|
|
|
<label class="label1">
|
|
<input type="radio" name="radio" id="radio1" class="radio1">
|
|
</label>
|
|
<input type="radio" name="radio" id="radio2" class="radio2">
|
|
|
|
<button id="clear">Clear</button>
|
|
<button id="stop">Stop</button>
|
|
|
|
<div id="logs"></div>
|
|
|
|
|
|
<script>
|
|
angular.module('ionicApp', ['ionic'])
|
|
|
|
.controller('MyCtrl', function($scope) {
|
|
|
|
$scope.stringClick = 'stringMethod()';
|
|
$scope.stringMethod = function() {
|
|
console.log('{{ stringClick }]', 'click')
|
|
};
|
|
|
|
$scope.itemClick = function() {
|
|
console.log('itemClick()', 'click')
|
|
};
|
|
|
|
$scope.menuItems = [
|
|
{
|
|
label: 'Item 1',
|
|
actionItem: function() {
|
|
console.log('item.actionItem()', 'click')
|
|
}
|
|
}
|
|
];
|
|
|
|
$scope.buttonClick = function() {
|
|
console.log('button ng-click', 'click')
|
|
$scope.buttonValue = Math.floor(Math.random() * 9999);
|
|
};
|
|
|
|
$scope.divClick = function() {
|
|
console.log('div ng-click', 'click')
|
|
$scope.buttonValue = Math.floor(Math.random() * 9999);
|
|
};
|
|
$scope.radioModel = {}
|
|
$scope.radioChange = function() {
|
|
console.log('radio ng-change', 'change', $scope.radioModel.data)
|
|
};
|
|
|
|
$scope.radioClick = function(val) {
|
|
console.log('radio ng-click', 'click', val)
|
|
};
|
|
|
|
});
|
|
|
|
function getTime() {
|
|
var d = new Date();
|
|
return d.getSeconds() + '.' + d.getMilliseconds();
|
|
}
|
|
|
|
document.getElementById('radio1').addEventListener('change', function(){
|
|
console.log('radio 1', 'change');
|
|
});
|
|
document.getElementById('radio1').addEventListener('click', function(){
|
|
console.log('radio 1', 'click');
|
|
});
|
|
document.getElementById('radio2').addEventListener('change', function(){
|
|
console.log('radio 2', 'change');
|
|
});
|
|
document.getElementById('radio2').addEventListener('click', function(){
|
|
console.log('radio 2', 'click');
|
|
});
|
|
|
|
document.addEventListener('touchstart', function(e){
|
|
console.log('touchstart');
|
|
});
|
|
document.addEventListener('touchend', function(e){
|
|
console.log('touchend');
|
|
if(!e.changedTouches || !e.changedTouches.length) return;
|
|
|
|
var dot = document.createElement('div');
|
|
dot.style.left = (e.changedTouches[0].clientX - 1) + 'px';
|
|
dot.style.top = (e.changedTouches[0].clientY - 1) + 'px';
|
|
dot.className = 'dot';
|
|
dot.id = 'dot' + Date.now();
|
|
document.body.appendChild(dot);
|
|
setTimeout(function(){
|
|
var oldDot = document.getElementById(dot.id);
|
|
oldDot.parentElement.removeChild(oldDot)
|
|
}, 3000);
|
|
});
|
|
document.addEventListener('mousedown', function(){
|
|
console.log('mousedown');
|
|
});
|
|
document.addEventListener('mouseup', function(){
|
|
console.log('mouseup');
|
|
});
|
|
document.addEventListener('click', function(event){
|
|
console.log('click', 'clientX: ' + event.clientX, 'clientY: ' + event.clientY);
|
|
});
|
|
document.getElementById('clear').addEventListener('click', function(){
|
|
setTimeout(clearMsgs, 200);
|
|
});
|
|
document.getElementById('stop').addEventListener('click', function(){
|
|
if(stopped) {
|
|
this.innerText = 'Stop';
|
|
window.stopped = false;
|
|
} else {
|
|
this.innerText = 'Start';
|
|
window.stopped = true;
|
|
}
|
|
});
|
|
|
|
var msgs = [];
|
|
var index = 0;
|
|
window.stopped = false;
|
|
var winConsoleError = console.error;
|
|
|
|
console.error = function() {
|
|
winConsoleError.apply(this, arguments);
|
|
var args = ['ERROR!'];
|
|
for (var i = 0, j = arguments.length; i < j; i++){
|
|
args.push(arguments[i]);
|
|
}
|
|
console.log.apply(this, args);
|
|
};
|
|
|
|
console.log = function() {
|
|
//return;
|
|
if(stopped) return;
|
|
|
|
index++;
|
|
var msg = [];
|
|
msg.push(index);
|
|
for (var i = 0, j = arguments.length; i < j; i++){
|
|
msg.push(arguments[i]);
|
|
}
|
|
msg.push(getTime());
|
|
|
|
msg = msg.join(', ');
|
|
|
|
if(arguments[0] === 'ERROR!') msg = '<span style="color:red;font-weight:bold">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'touchstart') msg = '<span style="color:blue">' + msg + '</span>';
|
|
if(arguments[0] === 'touchend') msg = '<span style="color:darkblue">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'mousedown') msg = '<span style="color:red">' + msg + '</span>';
|
|
if(arguments[0] === 'mouseup') msg = '<span style="color:maroon">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'click') msg = '<span style="color:purple">' + msg + '</span>';
|
|
|
|
if(arguments[1] === 'click') msg = '<span style="color:green;font-weight:bold">' + msg + '</span>';
|
|
if(arguments[1] === 'change') msg = '<span style="color:orange;font-weight:bold">' + msg + '</span>';
|
|
|
|
msgs.unshift( msg );
|
|
|
|
if(msgs.length > 30) {
|
|
msgs.splice(30);
|
|
}
|
|
|
|
// do this so we try not to interfere with the device performance
|
|
clearTimeout(timeId);
|
|
timeId = setTimeout(function(){
|
|
document.getElementById('logs').innerHTML = msgs.join('<br>');
|
|
}, 150);
|
|
|
|
}
|
|
|
|
var timeId;
|
|
|
|
function clearMsgs() {
|
|
msgs = [];
|
|
index = 0;
|
|
document.getElementById('logs').innerHTML = '';
|
|
document.getElementById('form').reset();
|
|
}
|
|
|
|
</script>
|
|
|
|
</form>
|
|
</body>
|
|
|
|
</html> |