mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
343 lines
10 KiB
HTML
343 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="navTest">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Inputs</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<link rel="stylesheet" href="../../dist/css/ionic.css">
|
|
<style>
|
|
input,
|
|
textarea {
|
|
background: #ddd !important;
|
|
}
|
|
|
|
input[type=text],
|
|
textarea {
|
|
background: orange !important;
|
|
}
|
|
|
|
input[type=text]:focus,
|
|
textarea:focus {
|
|
background: yellow !important;
|
|
}
|
|
|
|
input[type=text].cloned-text-input,
|
|
textarea.cloned-text-input {
|
|
background: red !important;
|
|
}
|
|
|
|
header .item {
|
|
background: lightblue !important;
|
|
}
|
|
body {
|
|
background: purple;
|
|
}
|
|
.pane {
|
|
background: black;
|
|
}
|
|
.scroll-content {
|
|
background: pink;
|
|
overflow: hidden !important;
|
|
}
|
|
.scroll {
|
|
background: lightgreen;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
border: 1px solid blue !important;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body ng-controller="AppCtrl">
|
|
|
|
<div id="logs" style="position:fixed; top:0; left:0; z-index:9999; background: #eee; font-size:8px; line-height:10px; display:block; "></div>
|
|
|
|
<ion-view id="view">
|
|
<ion-header-bar>
|
|
<label class="item item-input">
|
|
<span class="input-label">Header</span>
|
|
<input type="text" value="header input">
|
|
</label>
|
|
</ion-header-bar>
|
|
|
|
<ion-content class="padding">
|
|
|
|
<form ng-submit="formSubmit()">
|
|
|
|
<div class="list">
|
|
|
|
<label class="item item-input item-stacked-label">
|
|
<span class="input-label">Email</span>
|
|
<textarea>
|
|
Line 1
|
|
Line 2
|
|
Line 3
|
|
Line 4
|
|
Line 5
|
|
</textarea>
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">Your Name</span>
|
|
<input type="text" value="name input" id="name">
|
|
</label>
|
|
|
|
<div class="item item-checkbox">
|
|
<span class="input-label">Remember me</span>
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="remember-me">
|
|
</label>
|
|
</div>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">From 1</span>
|
|
<input type="text" value="from input" id="from1">
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">To 1</span>
|
|
<input type="text" value="to input" id="to1">
|
|
</label>
|
|
|
|
<label class="item item-input item-stacked-label">
|
|
<span class="input-label">Comment 1</span>
|
|
<textarea id="textarea" id="comment1">comment textarea</textarea>
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">From 2</span>
|
|
<input type="text" value="" id="from2">
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">To 2</span>
|
|
<input type="text" value="" id="to2">
|
|
</label>
|
|
|
|
<label class="item item-input item-stacked-label">
|
|
<span class="input-label">Comment 2</span>
|
|
<textarea id="textarea" id="comment2"></textarea>
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">From 3</span>
|
|
<input type="text" value="">
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">To 3</span>
|
|
<input type="text" value="">
|
|
</label>
|
|
|
|
<label class="item item-input item-stacked-label">
|
|
<span class="input-label">Comment 3</span>
|
|
<textarea id="textarea"></textarea>
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">From 4</span>
|
|
<input type="text" value="">
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">To 4</span>
|
|
<input type="text" value="">
|
|
</label>
|
|
|
|
<label class="item item-input item-stacked-label">
|
|
<span class="input-label">Comment 4</span>
|
|
<textarea id="textarea"></textarea>
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">From 5</span>
|
|
<input type="text" value="">
|
|
</label>
|
|
|
|
<label class="item item-input">
|
|
<span class="input-label">To 5</span>
|
|
<input type="text" value="">
|
|
</label>
|
|
|
|
<label class="item item-input item-stacked-label">
|
|
<span class="input-label">Comment 5</span>
|
|
<textarea id="textarea"></textarea>
|
|
</label>
|
|
|
|
<button type="button" class="button button-block button-energized" ng-click="openModal()">
|
|
Open Modal
|
|
</button>
|
|
|
|
<button type="submit" class="button button-block button-calm">
|
|
Submit!
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<p>
|
|
<a href="clickTests.html">Click Tests</a> -
|
|
<a href="tapInputs.html">Tap Inputs</a> -
|
|
<a href="/test/">CSS Tests</a>
|
|
</p>
|
|
</ion-content>
|
|
</ion-view>
|
|
|
|
<script id="modal.html" type="text/ng-template">
|
|
<div class="modal" ng-controller="ModalCtrl">
|
|
<header class="bar bar-header bar-positive">
|
|
<h1 class="title">New Contact</h1>
|
|
<button class="button button-clear button-primary" ng-click="closeModal()" ion-stop-event="click">Cancel</button>
|
|
</header>
|
|
<ion-content class='has-header'>
|
|
<div class="padding">
|
|
<div class="list">
|
|
<label class="item item-input">
|
|
<span class="input-label">First Name</span>
|
|
<input type="text" placeholder="">
|
|
</label>
|
|
<label class="item item-input">
|
|
<span class="input-label">Last Name</span>
|
|
<input type="text" placeholder="">
|
|
</label>
|
|
<label class="item item-input">
|
|
<span class="input-label">Email</span>
|
|
<input type="text" placeholder="">
|
|
</label>
|
|
<button class="button button-full button-positive" ng-click="closeModal()">Create</button>
|
|
</div>
|
|
</div>
|
|
</ion-content>
|
|
</div>
|
|
</script>
|
|
|
|
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
|
<script>
|
|
|
|
var msgs = [];
|
|
var timerId;
|
|
|
|
document.addEventListener('touchstart', function(e){
|
|
console.log('touchstart');
|
|
});
|
|
document.addEventListener('touchstart', function(e){
|
|
console.log('touchend');
|
|
});
|
|
document.addEventListener('mousedown', function(e){
|
|
console.log('mousedown');
|
|
});
|
|
document.addEventListener('mouseup', function(e){
|
|
console.log('mouseup');
|
|
});
|
|
document.addEventListener('MSPointerDown', function(e){
|
|
console.log('MSPointerDown');
|
|
});
|
|
document.addEventListener('MSPointerUp', function(e){
|
|
console.log('MSPointerUp');
|
|
});
|
|
document.addEventListener('click', function(event){
|
|
console.log('click', 'clientX: ' + event.clientX, 'clientY: ' + event.clientY);
|
|
});
|
|
|
|
function getTime() {
|
|
var d = new Date();
|
|
return d.getSeconds() + '.' + d.getMilliseconds();
|
|
}
|
|
|
|
|
|
angular.module('navTest', ['ionic'])
|
|
|
|
.controller('AppCtrl', function($scope, $ionicModal) {
|
|
|
|
$scope.openModal = function() {
|
|
$scope.modal.show();
|
|
};
|
|
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
|
|
$scope.modal = modal;
|
|
}, {
|
|
animation: 'slide-in-up',
|
|
focusFirstInput: true
|
|
});
|
|
|
|
$scope.formSubmit = function(){
|
|
alert('SUBMIT!');
|
|
};
|
|
|
|
})
|
|
|
|
.controller('ModalCtrl', function($scope) {
|
|
$scope.closeModal = function() {
|
|
$scope.modal.hide();
|
|
}
|
|
});
|
|
|
|
var msgs = [];
|
|
var index = 0;
|
|
var timeId;
|
|
var consoleDebug = console.log;
|
|
var consoleError = console.log;
|
|
|
|
function getTime() {
|
|
var d = new Date();
|
|
return d.getMilliseconds();
|
|
}
|
|
|
|
console.error = function() {
|
|
consoleError.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() {
|
|
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:pink">' + msg + '</span>';
|
|
if(arguments[0] === 'touchend') msg = '<span style="color:red">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'mousedown') msg = '<span style="color:lightblue">' + msg + '</span>';
|
|
if(arguments[0] === 'mouseup') msg = '<span style="color:blue">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'focusin') msg = '<span style="color:orange">' + msg + '</span>';
|
|
if(arguments[0] === 'focusout') msg = '<span style="color:orangered">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'click') msg = '<span style="color:green;font-weight:bold">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'clickPrevent') msg = '<span style="color:gray;">' + msg + '</span>';
|
|
|
|
msgs.unshift( msg );
|
|
|
|
if(msgs.length > 30) {
|
|
msgs.splice(40);
|
|
}
|
|
|
|
// 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);
|
|
|
|
consoleDebug.apply(this, arguments);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|