mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
329 lines
9.1 KiB
HTML
329 lines
9.1 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.bundle.js"></script>
|
|
<style>
|
|
.item-content, .item {
|
|
padding: 6px !important;
|
|
}
|
|
.list {
|
|
margin: 1px !important;
|
|
}
|
|
.button {
|
|
line-height: 16px !important;
|
|
min-height: 28px !important;
|
|
}
|
|
.dot {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background-color: red;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
}
|
|
.touch-pointer {
|
|
background: #CCFFFF;
|
|
}
|
|
.mouse-pointer {
|
|
background: #FFFFCC;
|
|
}
|
|
</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 ng-show="testBtnText == 'HTML'">
|
|
|
|
<div class="list">
|
|
|
|
<item ng-repeat="item in menuItems" item="item" ng-click="item.actionItem()">ng-click="item.actionItem()"</item>
|
|
|
|
<checkbox>checkbox with no ng-click</checkbox>
|
|
|
|
<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">
|
|
|
|
</div>
|
|
|
|
<div ng-show="testBtnText == 'AngJS'">
|
|
<div class="list">
|
|
|
|
<div class="item item-toggle">
|
|
HTML5
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="item item-toggle">
|
|
JavaScript
|
|
<label class="toggle">
|
|
<input type="checkbox" ng-click="htmlToggleClick()">
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<label class="item item-radio">
|
|
<input type="radio" name="group">
|
|
<div class="item-content">
|
|
Go
|
|
</div>
|
|
<i class="radio-icon ion-checkmark"></i>
|
|
</label>
|
|
|
|
<label class="item item-radio">
|
|
<input type="radio" name="group">
|
|
<div class="item-content">
|
|
Python
|
|
</div>
|
|
<i class="radio-icon ion-checkmark"></i>
|
|
</label>
|
|
|
|
<div class="item item-checkbox" style="padding-left: 58px !important">
|
|
<label class="checkbox">
|
|
<input type="checkbox" ng-model="htmlCheckboxData.checkedValue">
|
|
</label>
|
|
Checkbox {{ htmlCheckboxData.checkedValue }}</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<button id="clear">Clear</button>
|
|
<button id="stop">Stop</button>
|
|
<button ng-click="otherTests()">{{ testBtnText }}</button>
|
|
<a href="tapInputs.html">TapInputs</a> -
|
|
<a href="/test/">CSSTests</a> -
|
|
<a href="./">All</a>
|
|
|
|
<div id="logs"></div>
|
|
|
|
|
|
<script>
|
|
angular.module('ionicApp', ['ionic'])
|
|
|
|
.controller('MyCtrl', function($scope) {
|
|
|
|
$scope.htmlCheckboxData = {};
|
|
|
|
$scope.otherTests = function() {
|
|
if($scope.testBtnText == 'HTML') {
|
|
$scope.testBtnText = 'AngJS';
|
|
} else {
|
|
$scope.testBtnText = 'HTML';
|
|
}
|
|
};
|
|
$scope.otherTests();
|
|
|
|
$scope.htmlToggleClick = function() {
|
|
console.debug('htmlToggleClick', 'click');
|
|
$scope.buttonValue = 'html' + Math.floor(Math.random() * 999);
|
|
};
|
|
|
|
$scope.stringClick = 'stringMethod()';
|
|
$scope.stringMethod = function() {
|
|
console.debug('toggle {{ stringClick }]', 'click');
|
|
$scope.buttonValue = 'tg' + Math.floor(Math.random() * 999);
|
|
};
|
|
|
|
$scope.itemClick = function() {
|
|
console.debug('itemClick()', 'click');
|
|
$scope.buttonValue = 'itm' + Math.floor(Math.random() * 999);
|
|
};
|
|
|
|
$scope.menuItems = [
|
|
{
|
|
label: 'Item 1',
|
|
actionItem: function() {
|
|
console.debug('item.actionItem()', 'click')
|
|
$scope.buttonValue = 'itm' + Math.floor(Math.random() * 999);
|
|
}
|
|
}
|
|
];
|
|
|
|
$scope.buttonClick = function() {
|
|
console.debug('button ng-click', 'click')
|
|
$scope.buttonValue = 'btn' + Math.floor(Math.random() * 999);
|
|
};
|
|
|
|
$scope.divClick = function() {
|
|
console.debug('div ng-click', 'click')
|
|
$scope.buttonValue = 'div' + Math.floor(Math.random() * 999);
|
|
};
|
|
$scope.radioModel = {}
|
|
$scope.radioChange = function() {
|
|
console.debug('radio ng-change', 'change', $scope.radioModel.data);
|
|
};
|
|
|
|
$scope.radioClick = function(val) {
|
|
console.debug('radio ng-click', 'click', val);
|
|
$scope.buttonValue = 'rd' + Math.floor(Math.random() * 999);
|
|
};
|
|
|
|
});
|
|
|
|
function getTime() {
|
|
var d = new Date();
|
|
return d.getSeconds() + '.' + d.getMilliseconds();
|
|
}
|
|
|
|
document.getElementById('radio1').addEventListener('change', function(){
|
|
console.debug('radio 1', 'change');
|
|
});
|
|
document.getElementById('radio1').addEventListener('click', function(){
|
|
console.debug('radio 1', 'click');
|
|
});
|
|
document.getElementById('radio2').addEventListener('change', function(){
|
|
console.debug('radio 2', 'change');
|
|
});
|
|
document.getElementById('radio2').addEventListener('click', function(){
|
|
console.debug('radio 2', 'click');
|
|
});
|
|
|
|
document.addEventListener('touchstart', function(e){
|
|
console.debug('touchstart');
|
|
});
|
|
document.addEventListener('touchend', function(e){
|
|
console.debug('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.debug('mousedown');
|
|
// });
|
|
document.addEventListener('mouseup', function(){
|
|
console.debug('mouseup');
|
|
});
|
|
// document.addEventListener('mousemove', function(event){
|
|
// console.debug('mousemove', 'clientX: ' + event.clientX, 'clientY: ' + event.clientY);
|
|
// });
|
|
document.addEventListener('click', function(event){
|
|
console.debug('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.debug.apply(this, args);
|
|
};
|
|
|
|
console.debug = 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>
|