Question

我知道我可以创建一个jQuery移动叠加层来加载来自另一个页面的内容。

我可以手动创建叠加层以向用户显示消息吗？比标准JS警报框更性感的东西？

更新

而不是说

<a href="my_message.html" data-rel="dialog">Show Message</a>

我想说的是：

$.showDialog("Hello world!");

Answer 1

指出正确的方向：

相关：

http://jquerymobile.com/demos/1.0rc1/docs/pages/page-dynamic.html

直播示例：

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>

Answer 2

虽然这已经晚了将近一年，但根据OP的评论仍然没有得到答复，我以为我会增加2美分。至少使用jQuery Mobile 1.2.0，您可以从同一页面实现这一目标。

这是http://jsfiddle.net/z775f/3/

的小提琴

所有添加的内容都是将其添加为HTML

<div data-role="dialog" id="pageLoadDialog" data-theme="a">
            <div data-role="content" data-theme="a">
                Here is some demo text.
            </div>
</div>

重要的是要注意，它位于任何其他标记之外，就像对话框是它自己的“页面”一样。

然后我添加了一个JS函数来模拟条件逻辑以显示或编辑对话框的内容。

function onPageLoad(showDialog) {
    if(showDialog){
            $('#pageLoadDialog').dialog();
            $.mobile.changePage('#pageLoadDialog', { transition: "none"} );
    }
}

最后使用布尔值调用该函数以显示“pageload”上的对话框，该对话框可以在实际环境中添加到正文或文档的onload事件中。

onPageLoad(true);

除了将jQuery Mobile JS和CSS引用更新为新的1.2.0 RC 1版本之外，所有其他代码都是从Phill Pafford的小提琴中分离出来的。

希望这可以帮助某人，因为它不能立即明确如何从与该主题上的jQuery Mobile示例相同的页面上引用外部.html

Answer 3

您可以使用jtsage的simple dialog plugin。它支持简单的“确定，取消”模式，用户输入模式和“空白”模式，允许您指定任何您喜欢的HTML。

如何使用jQuery mobile创建叠加框

3 个答案: