请告诉我如何在面板中显示带按钮的面板(带幻灯片)。并在每次点击按钮时显示不同的页面?
这是我的代码。 http://jsfiddle.net/ravi1989/YAA4A/
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
</div>
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
答案 0 :(得分:1)
我希望我能正确理解你的问题。
工作示例:http://jsfiddle.net/TXRjk/1/
<强> HTML:强>
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
<a href="#second" data-role="button">Jump to second page</a>
<a href="#third" data-role="button">Jump to third page</a>
</div>
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-role="panel" id="mypanel">
<a href="#index" data-role="button">Jump to first page</a>
<a href="#third" data-role="button">Jump to third page</a>
</div>
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="third">
<div data-role="panel" id="mypanel">
<a href="#index" data-role="button">Jump to first page</a>
<a href="#second" data-role="button">Jump to second page</a>
</div>
<div data-theme="a" data-role="header">
<h3>
Third Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
Javascript:
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});