我正在使用jQueryMobile 1.4。 这是他们引入tabs的版本。
我可以让对话框单独工作。我也可以单独使用标签,但是当它与对话框配对时,它似乎无法正常工作。
我有一个玩具示例,用于说明问题github。
如果直接转到dialog.html页面,则对话框和标签页可以正常工作。
但是如果你从index.html页面开始,然后点击链接弹出打开对话框,则该过程失败。发生的事情是对话框暂时弹出,但随后又消失了。该网址也会更改为dialog.html,但内容是index.html的内容。
我的index.html打开包含以下代码的对话框页面:
$('#info').on('click', 'a', function(event) {
event.preventDefault();
$.mobile.pageContainer.pagecontainer('change','dialog.html');
});
我的dialog.html就是这样:
<div data-role="page" data-dialog="true">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="c">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="#tab1" data-ajax="false">tab1</a></li>
<li><a href="#tab2" data-ajax="false">tab2</a></li>
<li><a href="#tab3" data-ajax="false">tab3</a></li>
</ul>
</div>
<div id="tab1">
Content1
</div>
<div id="tab2">
Content2
</div>
<div id="tab3">
Content3
</div>
</div>
</div><!-- content -->