我在使用转换jQuery Mobile打开时遇到问题。
我无法创建过渡效果。
这是我的代码......
<div id="main" data-role="content" data-theme="d">
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a>
<!-- ... -->
<div data-role="page" id="dialog"><!-- dialog-->
<div data-role="header" data-theme="e">
<h1>Foo</h1>
</div>
<div data-role="content" data-theme="e">
<p>Bar</p>
</div>
</div>
<!-- Footer -->
jQuery('#page').live('pageinit', function() {
$('.widget ul').attr('data-inset', 'true').attr('data-theme', 'd').attr('data-dividertheme', 'b').attr('data-role', 'listview');
$('.widget ul').listview();
});
jQuery('#page').live('changepage', function() {
$('#dialog', 'pop', true, true);
});
感谢您的帮助。
此致
诉P>
答案 0 :(得分:6)
在data-role =&#34; page&#34;元素,你需要添加data-rel =&#34; dialog&#34;,而不是&#34; id&#34;使页面显示为对话框。
见这里:http://jquerymobile.com/test/docs/pages/page-dialogs.html
答案 1 :(得分:1)
jQuery(document).delegate('#page', 'pageinit', function() {
$('.widget ul').attr('data-inset', 'true').attr('data-theme', 'd').attr('data-dividertheme', 'b').attr('data-role', 'listview').listview();
}).delegate('#page', 'changepage', function() {
$.mobile.changePage('#dialog', {
transition : 'pop',
role : 'dialog'//this means you don't have to declare `data-role="dialog"` on the page if you don't want to
});
});
注意我链接了.listview()
函数调用和第二个.delegate()
函数调用。我还更改了.live()
.delegate()
,因为从jQuery 1.7开始,.live()
被折旧。要导航到您使用的页面$.mobile.changePage()
:http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html