无头加载jQuery Mobile对话框?

时间:2012-07-09 14:52:58

标签: javascript jquery mobile jquery-mobile

在我的jQuery Mobile网站中,我的标题中有一个按钮,如下所示:

<a href="/foo.html" data-rel="dialog" data-icon="grid">Foo</a>

问题在于JQM希望我用所有脚本和CSS重新定义头部。这对于一个对话(特别是慢速)来说太尴尬了。我希望我的对话框只需要我的网格内容,而无需重新定义一个完整的HTML页面。这可能吗?

1 个答案:

答案 0 :(得分:1)

您可以在同一页面中定义对话框(多页面布局)

HTML

<div data-role="page" id="thePage">
    <div data-role="content">
        <a href="#theDialog" data-rel="dialog">Open dialog</a>
    </div>
</div>

<!-- Add the dialog here -->
<div data-role="dialog" id="theDialog">
    <div data-role="header" data-theme="d">
        <h1>Dialog</h1>
    </div>

    <div data-role="content" data-theme="c">
        <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="#thePage" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
        <a href="#thePage" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
    </div>
</div>

文档: