Как написать повторно используемый код в jquerymobile HTML5 без сценариев на стороне сервера? - PullRequest
Новая
       0

Как написать повторно используемый код в jquerymobile HTML5 без сценариев на стороне сервера?

3 голосов
/ 27 октября 2011

Можно ли как-нибудь включить файлы в jquery mobile, чтобы некоторый код можно было многократно использовать вместо того, чтобы писать избыточный код везде?

Как и для каждой страницы, мне нужно иметь кнопку «Домой» и кнопку «Назад» .... есть ли способ указать их в файле и включить их на каждой странице. я знаю трудный способ сделать это, используя javascript ... где я могу поместить div = "header" и включить скрипт, который позже добавит контент ... 

    <div id="bookHotels" data-role="page">

    <div data-role="header">

            -----   include the header file to to make it reusable ----

    </div><!-- /header -->

    <div data-role="content">   
    </div><!-- /content -->

    <div data-role="footer">
            <h4>footer text</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Любая помощь приветствуется ...

Ответы [ 2 ]

3 голосов
/ 27 октября 2011

Если вы используете страницы HTML (.html) и не подключены к серверу, то можете использовать шаблон JavaScript (что не так уж сложно).Дополнительным преимуществом шаблонизации с использованием JavaScript является то, что при передаче данных происходит меньше беспроводных данных, поэтому страницы загружаются быстрее.Рекомендуется использовать шаблоны, если вы снова и снова перекодируете одно и то же.

Вот пример добавления контента в заголовок каждой страницы, когда страница создается jQuery Mobile: 

$('[data-role="page"]').live('pagecreate', function () {
    var $header = $(this).children('[data-role="header"]');
    $header.html('<div data-role="navbar"><ul><li><a href="#">Nav Item 1</a></li><li><a href="#">Nav Item 2</a></li><li><a href="#">Nav Item 3</a></li></ul></div>').trigger('create');
});

Другой вариант - использовать теги <iframe> с атрибутом seemless (добавлено в спецификации HTML5).Вот ссылка на документ: http://www.w3schools.com/html5/tag_iframe.asp

Seemless: указывает, что iframe должен выглядеть так, как будто он является частью содержащегося документа 

<div data-role="header">

        <iframe seemless="seemless" src="/path/to/header.html"></iframe>

</div><!-- /header -->
0 голосов
/ 11 марта 2013

Вот решение, которое сработало для меня, основываясь на ответе Джаспера с использованием принципа шаблона js. Все остальные ответы на аналогичные вопросы, в которых используется «нагрузка» или аналогичные методы, работают неправильно, поскольку HTML-код неправильно расширен и другие проблемы. 

$(document).on('pagebeforecreate', function () {
    // use document so that it triggers for all new pages
    // use pagebeforecreate so that JQM can enhance the html after it is inserted in the DOM
    // use 'on' instead of 'live' as 'live' is deprecated and does not work in jquery 1.9.1
    // $(this) is the current document here so have to use 'find' instead of 'children'
    $(this).find('[data-role="header"]').each(function () {
        // $(this) is now the header
        // if we have already inserted the html, we should not do it anymore
        if ($.trim($(this).html()) === "") $(this).html('<div data-role="navbar"><ul><li><a href="#">Nav Item 1</a></li><li><a href="#">Nav Item 2</a></li><li><a href="#">Nav Item 3</a></li></ul></div>');
    });
});
...