Диалог со встроенным контентом возможен? - PullRequest
Новая
       20

Диалог со встроенным контентом возможен?

0 голосов
/ 06 октября 2011

Можно ли создать 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>

В типичном диалоговом окне требуется, чтобы ссылка на объект связывания составляла ссылку на отдельную «страницу» или на сторону текущей страницы: 

<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).

Ответы [ 2 ]

3 голосов
/ 21 июня 2012

Не удается найти надежное, кроссплатформенное готовое решение.
Но Jquery Mobile 1.2 играет роль «всплывающего окна», поэтому любой div можно легко отобразить как всплывающее окно.http://jquerymobile.com/test/docs/pages/popup/index.html

1 голос
/ 16 ноября 2012

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();
})
...