Как я могу создать оверлей, используя jQuery mobile

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

Live Пример:

• 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>

Answer 2

Хотя это почти на год позже, но все еще остается без ответа в соответствии с комментариями ОП, я думал, что добавлю свои 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.

Надеюсь, это поможет кому-тоне сразу понятно, как это сделать на той же странице, что и примеры jQuery Mobile по теме, ссылающиеся на внешний .html

Answer 3

Вы можете использовать простой диалоговый плагин jtsage .Он поддерживает простой режим «ОК, отмена», режим пользовательского ввода и «пустой» режим, который позволяет вам указать любой HTML-код, который вы хотите.