<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<input type='radio' name='type' value='vanilla' checked="true"/>Vanilla HTML<br />
<input type='radio' name='type' value='ionic' />Ionic <br />
<input type='radio' name='type' value='ionic2' />Vanilla html with ionic included
</div>
<iframe id="vanilla" src="iframed-pure.html" height="500px" width="49%"></iframe>
<iframe id="ionic" src="iframed-ionic.html" height="500px" width="49%" style='display:none' ></iframe>
<iframe id="ionic2" src="ionic-test-2.html" height="500px" width="49%" style='display:none' ></iframe>
<script type="text/javascript">
$(document).ready(function() {
$('input[type=radio][name=type]').change(function() {
if(this.value == 'vanilla'){
$('#vanilla').show();
$('#ionic').hide();
$('#ionic2').hide();
} else if(this.value == 'ionic') {
$('#vanilla').hide();
$('#ionic').show();
$('#ionic2').hide();
} else {
$('#vanilla').hide();
$('#ionic').hide();
$('#ionic2').show();
}
});
});
</script>
</body>
</html>
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Test 1">
</label>
</div>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Test 2">
</label>
<div class="item">
<input type="text" placeholder="Test 3"> <!-- another attempt -->
</div>
<input type="text" placeholder="Test 4"> <!-- another attempt -->
<input type="text" placeholder="Test 5"> <!-- another attempt -->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var app = angular.module("app", ["ionic"]);
$(document).ready(function(){
$('input').on('keydown',function(){
$('#lastContent').html($( this ).val());
});
$('input').on('focus',function(){
$('#lastContent').html("focused");
});
});
</script>
</head>
<body>
<div ng-app="app">
<div id="outsideionic">
<input type="text">
</div>
<ion-header-bar class="bar bar-header bar-dark">
<span id='lastContent'></span>
</ion-header-bar>
<ion-content>
<!-- styled with inset icon -->
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Test 1" />
</label>
</div>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Test 2" />
</label>
<div class="item">
<input type="text" placeholder="Test 3" /> <!-- another attempt -->
</div>
<input type="text" placeholder="Test 4" /> <!-- another attempt -->
</ion-content>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var app = angular.module("app", ["ionic"]);
$(document).ready(function(){
$('input').on('keydown',function(){
$('#lastContent').html($( this ).val());
});
});
</script>
</head>
<body>
<div>
<input type="text" placeholder="Test 5" /> <!-- another attempt -->
</div>
</body>
</html>