如何构建一个包含 3 个页面的滑动页面，并添加一个“气泡”按钮以显示您刚刚滑动的页面？
你能给我一些建议或可以找到示例的链接吗？
最佳答案
这是一个工作示例:http://jsfiddle.net/Gajotres/hrkJq/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<article data-role="page" id="article1" data-pagination="1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 1</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<div id="bubble-holder">
<div id="page1-bubble"></div>
<div id="page2-bubble"></div>
<div id="page3-bubble"></div>
</div>
</div>
</article>
<article data-role="page" id="article2" data-pagination="2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 2</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<div id="bubble-holder">
<div id="page1-bubble"></div>
<div id="page2-bubble"></div>
<div id="page3-bubble"></div>
</div>
</div>
</article>
<article data-role="page" id="article3" data-pagination="3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 3</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<div id="bubble-holder">
<div id="page1-bubble"></div>
<div id="page2-bubble"></div>
<div id="page3-bubble"></div>
</div>
</div>
</article>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', 'article[data-role="page"]', function(){
selectbubble($(this));
});
$(document).off('swipeleft').on('swipeleft', 'article', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('article[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).off('swiperight').on('swiperight', 'article', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('article[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
function selectbubble(page) {
$.each($('#bubble-holder div'), function (index,value) {
var bubble = $(this);
bubble.css('background','#3408AE');
if(bubble.attr('id') === 'page' + page.attr('data-pagination') + '-bubble'){
bubble.css('background','#0B0228');
}
});
}
CSS:
.ui-footer {
height: 30px;
}
#bubble-holder {
margin: 10px auto 0 auto;
width: 60px;
height: 10px;
}
#page1-bubble, #page2-bubble, #page3-bubble {
position: relative;
float: left;
margin: 0 5px;
width: 10px;
height: 10px;
background: #3408AE;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 -1px #eee;
-webkit-box-shadow: inset 0 -1px #eee;
box-shadow: inset 0 -1px #eee;
}
关于带有 "bubble buttons"的页面之间的 Jquery 移动滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16293898/