我知道我可以创建一个 jQuery 移动覆盖,从另一个页面加载内容。
我可以手动创建叠加层来向用户显示消息吗?有比标准 JS 警报框更性感的东西吗?
更新
而不是说
<a href="my_message.html" data-rel="dialog">Show Message</a>
我想说的是:
$.showDialog("Hello world!");
最佳答案
为您指明正确的方向:
相关:
实例:
- http://jsfiddle.net/UrdE6/11/
- http://jsfiddle.net/UrdE6/12/ (有功能)
- http://jsfiddle.net/UrdE6/32/ (带有页面导航)
JS:
var originalMessage = $('#the-content').html();
var dynamicMessage = '<span>This is a dynamic message</span>'; // add dynamic content here
$('#dynamic').click(function() {
$('#generic-dialog').live('pagebeforeshow',function(event, ui) {
$('#the-content').html(dynamicMessage).trigger('create');
});
});
$('#original').click(function() {
$('#generic-dialog').live('pagebeforeshow',function(event, ui) {
$('#the-content').html(originalMessage).trigger('create');
});
});
HTML:
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" id="tasks">
<li data-role="list-divider">Dynamic Dialog</li>
<li><a href="#generic-dialog" data-rel="dialog" id="original">Show Original Dialog</a></li>
<li><a href="#generic-dialog" data-rel="dialog" id="dynamic">Show Dynamic Dialog</a></li>
</ul>
</div>
</div>
<!-- This is a page used for a dialog -->
<div data-role="page" id="generic-dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="c" id="the-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
<a href="#" data-role="button" data-rel="back" data-theme="b">Sounds good</a>
<a href="#" data-role="button" data-rel="back" data-theme="c">Cancel</a>
</div>
</div>
关于jquery - 如何使用 jQuery mobile 创建覆盖框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7770383/