可以从内联内容中进行对话框吗？

发布于 2024-12-08 22:08:23 字数 1000 浏览 0 评论 0原文

是否可以使用内联内容创建 jQuery Mobile 对话框在同一页面内？

例如：

<div data-role="page">
    <div data-role="content">

        <!-- this causes the entire current page to load as the dialog -->
        <a href="#modal" data-rel="dialog">Open Dialog<a> 

        <div id="modal" style="display: none">
            Hello World
        </div>

    </div>
</div>

典型的对话框要求链接对象的 href 是单独的“页面”的 href，或者位于当前页面旁边的页面：

<div data-role="page">
    <div data-role="content">
        <a href="#modal" data-rel="dialog">Open Dialog<a>
    </div>
</div>
<div data-role="page" id="modal">
    <div data-role="content">
        Hello World
    </div>
</div>

但是，我的模板结构禁止我将链接与模式内容分开。如果可能的话，我希望将事物模块化为单个可插拔控件。使用我当前的 CMS 框架 (Sitecore) 为模态内容创建全新的外部页面会很麻烦。

原文

Is it possible to create a jQuery Mobile dialog using inline content within the same page?

For example:

<div data-role="page">
    <div data-role="content">

        <!-- this causes the entire current page to load as the dialog -->
        <a href="#modal" data-rel="dialog">Open Dialog<a> 

        <div id="modal" style="display: none">
            Hello World
        </div>

    </div>
</div>

A typical dialog requires that the href of the linking object be that of a separate "page", or one that sits along side the current page:

<div data-role="page">
    <div data-role="content">
        <a href="#modal" data-rel="dialog">Open Dialog<a>
    </div>
</div>
<div data-role="page" id="modal">
    <div data-role="content">
        Hello World
    </div>
</div>

However, my template structure prohibits me from separating the link from the modal content. If possible, I would like to keep things modularized into a single pluggable control. Creating an entirely new external page for the modal content would be cumbersome using my current CMS framework (Sitecore).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

栀子花开つ 2024-12-15 22:08:23

无法找到可靠的跨平台开箱即用解决方案。
但 Jquery Mobile 1.2 具有“弹出”角色，因此任何 div 都可以轻松显示为弹出窗口。 http://jquerymobile.com/test/docs/pages/popup/index.html

回复收藏 0 原文

不念旧人 2024-12-15 22:08:23

jQueryMobile - SimpleDialog2 允许内联对话
http://dev.jtsage.com/jQM-SimpleDialog/demos2/

<a href="#" id="opendialog" data-role="button">Open Dialog</a>


  <div id="inlinecontent" style="display:none"   data-options='{"mode":"blank","headerText":"Yo","headerClose":true,"blankContent":true}'>

<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>
<a rel='close' data-role='button' href='#'>Close</a>
 </div>

$(document).delegate('#opendialog', 'click', function() {
// NOTE: The selector is the hidden DIV element.
$('#inlinecontent').simpledialog2();
})

jQueryMobile - SimpleDialog2 allows inline dialogues
http://dev.jtsage.com/jQM-SimpleDialog/demos2/

<a href="#" id="opendialog" data-role="button">Open Dialog</a>


  <div id="inlinecontent" style="display:none"   data-options='{"mode":"blank","headerText":"Yo","headerClose":true,"blankContent":true}'>

<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>
<a rel='close' data-role='button' href='#'>Close</a>
 </div>

$(document).delegate('#opendialog', 'click', function() {
// NOTE: The selector is the hidden DIV element.
$('#inlinecontent').simpledialog2();
})

回复收藏 0 原文

~没有更多了~