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

ProgramBox

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

Post author:admin
Запись опубликована:31 января, 2023
Post category:Вопросы по программированию

#jquery #jquery-ui #html #jquery-mobile

#jquery #jquery-пользовательский интерфейс #HTML #jquery-мобильный

Вопрос:

могу ли я каким-либо образом включить файлы в 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 -->

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

Ответ №1:

Если вы используете страницы 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 -->

1. Нет, html 5 не включает в себя php? … я знаю об этих двух способах… но просто любопытно, не является ли способ jQuery сделать это немного странным. Тем не менее, это работает… Спасибо за помощь, Джаспер 🙂 …

2. Я вспомнил обновленный <iframe> тег для спецификации HTML5, он включает seemless атрибут, проверьте ссылку, которую я добавил к своему ответу.

3. Бесшовный iframe работает не очень хорошо, так как контент не будет улучшен. Это решение не сработало как есть для меня, но указало мне правильное направление, спасибо!!! Я опубликую решение, которое работает для меня ниже. Несмотря на то, что прошло много времени с тех пор, как был задан вопрос, это все еще проблема с JQM, и мне потребовалось некоторое время, чтобы выяснить, как правильно это сделать.

Ответ №2:

Вот решение, которое сработало для меня на основе ответа Джаспера с использованием принципа шаблона 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>');
    });
});