yipo
10/2/2014 - 2:30 PM
webpage-slide
webpage-slide
body {
overflow: hidden;
text-align: center;
}
iframe {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#navbar {
margin-top: 20px;
}
$.getJSON('pages.json').done(function (pages) {
$('#menu').each(function (i,menu) {
$(pages).each(function (i,page) {
var link=$('<a>').text(page.title).attr('href','#'+i);
var item=$('<li>').html(link);
$(menu).append(item);
});
});
window.onhashchange=function () {
var index=parseInt(location.hash.substr(1));
if (isNaN(index)) return location.hash='#0';
var page=pages[index];
$('#title').text(document.title=page.title);
$('#page').attr('src',page.src);
var update_navbtn=function (id,k) {
var is_valid=(0<=k&&k<pages.length);
$(id).attr('disabled',!is_valid).attr('href','#'+(is_valid?(k):''));
};
update_navbtn('#prev',index-1);
update_navbtn('#next',index+1);
};
$(window).trigger('hashchange');
});
[
{
"title":"apple",
"src":"demo.html?apple"
},
{
"title":"banana",
"src":"demo.html?banana"
},
{
"title":"cherry",
"src":"demo.html?cherry"
}
]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpage-slide</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<iframe id="page" src="" frameborder="0"></iframe>
<div id="navbar">
<div class="btn-group">
<a id="prev" class="btn btn-default">«</a>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="title"></span>
<span class="caret"></span>
</button>
<ul id="menu" class="dropdown-menu"></ul>
</div>
<a id="next" class="btn btn-default">»</a>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
</head>
<body onload="demo.textContent=location.search.substr(1);" style="margin: 20px;">
<div id="demo" style="font: 48pt Verdana, Geneva, sans-serif; color: hsl(220, 20%, 90%);"></div>
</body>
</html>
/pages.json