mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
104 lines
3.7 KiB
HTML
104 lines
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Slide Box</title>
|
|
|
|
<!-- Sets initial viewport load and disables zooming -->
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<link href="../dist/css/ionic.css" rel="stylesheet">
|
|
<style>
|
|
#slide-box {
|
|
max-height: 200px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<section>
|
|
|
|
<header class="bar bar-header bar-dark">
|
|
<h1 class="title">Various Moos</h1>
|
|
</header>
|
|
|
|
<main class="content-wrapper">
|
|
<div class="content has-header">
|
|
<button id="prepend" class="button button-primary">Prepend</button>
|
|
<button id="append" class="button button-primary">Append</button>
|
|
<button id="remove" class="button button-danger">Remove</button>
|
|
<div class="slide-box" id="slide-box">
|
|
<div class="slide-box-slides">
|
|
<div class="slide-box-slide">
|
|
<img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
|
|
</div>
|
|
<div class="slide-box-slide">
|
|
<img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
|
|
</div>
|
|
<div class="slide-box-slide">
|
|
<img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
|
|
</div>
|
|
</div>
|
|
<div class="slide-box-pager">
|
|
<span><i class="ion ion-record"></i></span>
|
|
<span><i class="ion ion-record"></i></span>
|
|
<span><i class="ion ion-record"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
</section>
|
|
|
|
<script src="../dist/js/ionic.js"></script>
|
|
|
|
<script>
|
|
var b = document.getElementById('slide-box');
|
|
var box = new ionic.views.SlideBox({
|
|
el: b
|
|
});
|
|
document.getElementById('prepend').addEventListener('click', function(e) {
|
|
var content = document.createElement('div');
|
|
content.className = 'slide-box-slide';
|
|
content.innerHTML = '<img src="http://1.bp.blogspot.com/-A1IIpwx7jnE/TymvyGvjxNI/AAAAAAAAHi4/80CCftqRY0o/s640/sweetheart2.jpg">';//http://1.bp.blogspot.com/_6bMuhb3yWOA/TSiS2nYfQoI/AAAAAAAAAGA/AXOlDxrmMNQ/s1600/cow.jpg">';
|
|
|
|
|
|
box.prependSlide(content);
|
|
|
|
/*
|
|
var items = b.querySelector('.slide-box-items');
|
|
items.insertBefore(content, items.firstChild);
|
|
|
|
var pager = document.querySelector('.slide-box-pager');
|
|
for(var i = 0; i < pager.children.length; i++) {
|
|
pager.children[i].innerHTML = parseInt(pager.children[i].innerHTML) + 1;
|
|
}
|
|
|
|
var count = document.createElement('span');
|
|
count.innerHTML = "1";
|
|
pager.insertBefore(count, pager.firstChild);
|
|
*/
|
|
});
|
|
document.getElementById('append').addEventListener('click', function(e) {
|
|
var content = document.createElement('div');
|
|
content.className = 'slide-box-slide';
|
|
content.innerHTML = '<img src="http://1.bp.blogspot.com/-A1IIpwx7jnE/TymvyGvjxNI/AAAAAAAAHi4/80CCftqRY0o/s640/sweetheart2.jpg">';//http://1.bp.blogspot.com/_6bMuhb3yWOA/TSiS2nYfQoI/AAAAAAAAAGA/AXOlDxrmMNQ/s1600/cow.jpg">';
|
|
|
|
box.appendSlide(content);
|
|
|
|
/*
|
|
var pager = document.querySelector('.slide-box-pager');
|
|
var count = document.createElement('span');
|
|
count.innerHTML = pager.children.length + 1;
|
|
pager.appendChild(count);
|
|
*/
|
|
});
|
|
|
|
document.getElementById('remove').addEventListener('click', function(e) {
|
|
var items = b.querySelector('.slide-box-slides');
|
|
box.removeSlide(0);
|
|
});
|
|
/*
|
|
*/
|
|
</script>
|
|
</body>
|
|
</html>
|