jQuery Мобильный сайт с несколькими файлами - PullRequest
Новая
       10

jQuery Мобильный сайт с несколькими файлами

0 голосов
/ 28 марта 2012

Я работаю на дружественном для мобильных устройств веб-сайте, использующем jQuery Mobile, но хотел бы сделать это, используя несколько файлов HTML, каждый с одним data-role = "page" div (вместо нескольких data-role = "page" divsв одном файле, что кажется стандартом), поскольку это позволяет максимально использовать существующий сайт.Я знаю всю концепцию data-ajax = "false", которую я мог бы использовать в тегах <a> главной страницы, но это отключает эффекты перехода страниц, которые нам действительно нравятся.

Я пробовал pagehow,pagebeforeshow, pageinit, document.ready и т. д., но ничего из этого никогда не сработает, если я не перейду на эту страницу напрямую, в отличие от перехода по ссылке с главной страницы, т.е. с оглавлением (или обновления страницы после перехода по ссылке из оглавления),В общем, мой JS-файл выглядит так:

('div[data-role="page"]:first').live('pageshow',function(){ /*do custom stuff here */})

Я также попытался добавить ссылку на этот JS-файл на страницу оглавления, но не повезло ... что я ожидал, ноЯ решил попробовать.Мне трудно поверить, что JQM просто не поддерживает работу с сайтом (без потери эффектов перехода), поэтому я, вероятно, упускаю что-то простое.

1 Ответ

1 голос
/ 28 марта 2012
  1. .live() не рекомендуется, поэтому используйте .delegate(): http://api.jquery.com/on
  2. Вы должны привязываться к идентификаторам, а не использовать несколько псевдоселекторов (я думаю, что это ваша проблема, что ваш комплексселектор может быть недопустим для делегирования события):

. 

$(document).delegate('#my-page-id', 'pageinit', function () {
    //you can now do work for the `#my-page-id` pseudo-page
});

Если вы хотите связать все псевдостраницы, чтобы сделать что-то глобально, вы можете использовать: 

$(document).delegate('[data-role="page"]', 'pageinit', function () {
    //you can now do work for all the `[data-role="page"]` "pages"
});

Или вы можете поместить классы в различные элементы data-role="page", чтобы указать, к какому элементу вы хотите привязаться.

...