jQuery Mobile - изменить страницу и выбрать меню не работает

Это мой первый раз с jQuery Mobile, и я фактически использую его из темы WP, которую я получил. Я понимаю, что это может быть связано с темой, но я просто хочу убедиться.

Итак, это тема Wordpress jQuery Mobile, вы подключаете ее, и она работает. Дело в том, что я преобразовал меню Wordpress из UL в SELECT.

Затем я добавил некоторый jQuery для запуска выбора при изменении, получив значение выбранного параметра. Это работает, я получаю загрузку, а затем страница меняется с желаемым эффектом.

Но я не могу заставить меню «Выбрать» отображать текущий выбранный элемент. Он всегда возвращается к первому.

Я использовал:

$('#main_menu').selectmenu("refresh");
$('#main_menu').selectmenu("refresh", true);

Но ничего...

Вы можете ознакомиться с сайтом здесь: http://avatarblog.fl1hosting.com/ и просмотреть источник.

Вы увидите, что все мои мобильные события предшествуют включению jQuery Mobile, что для меня не имеет особого смысла, но если я добавлю их позже, ничего не сработает.

Любая помощь будет высоко ценится!

Спасибо


person elmediano    schedule 24.07.2012    source источник


Ответы (1)


Вам нужно установить, какую опцию отображать в меню выбора. Попробуй это,

$("#main_menu")[0].selectedIndex = 2; // this will select the 3rd in the menu list
$("#main_menu").selectmenu("refresh");

Вы можете добавить следующий скрипт в ваш header.php:

$(document)
.unbind("pageshow.initMenuBtn")
.bind("pageshow.initMenuBtn", 
    function() {
        $.mobile.activePage = $("div.ui-page-active");
        $("#main_menu", $.mobile.activePage)
          .unbind("change")
          .bind("change", function() {
                var page = $(this).val();
                $.mobile.changePage(page);
            });

        var selectedIndex = 0;
        $("#main_menu>option", $.mobile.activePage).each(function(index) {
            if ($(this).hasClass("current-menu-item")) {
                selectedIndex = index;
            }
        });
        $("#main_menu", $.mobile.activePage)[0].selectedIndex = selectedIndex;
        $("#main_menu", $.mobile.activePage).selectmenu("refresh");
    });
person jay c.    schedule 24.07.2012
comment
Привет Джей. Боюсь, это не сработало. Также я не совсем понимаю... Разве этот код не всегда будет отображать 3-й элемент в списке? Что я пытаюсь сделать, так это отобразить текущий элемент страницы, поэтому, если я нажму «О нас», выберите «О нас» и так далее. Спасибо за вашу помощь. - person elmediano; 25.07.2012
comment
да просто так не получится. пожалуйста, проверьте мои обновления в моем посте выше. в первом коде я просто даю вам представление о том, почему ваш вызов $(#main_menu).selectmenu(refresh); не сработало, как вы ожидаете. это на самом деле потому, что выбранное значение в вашем всегда является первым вариантом. - person jay c.; 25.07.2012
comment
Спасибо за это. Боюсь, это тоже не сработало. Это сайт на Wordpress, поэтому я добавляю весь код в header.php, который включен во все шаблоны. Список выбора динамически генерируется из базы данных, и при выборе параметра jQuery получает значение параметра и запускает changePage для этого значения. - person elmediano; 25.07.2012
comment
в порядке. тогда, пожалуйста, проверьте обновленный код выше. на основе сгенерированного HTML вы можете получить selectedIndex по атрибуту класса элемента option. - person jay c.; 25.07.2012
comment
Кстати, приведенный выше код можно поместить в ваш файл header.php, и он уже будет определять, какое меню должно отображаться на всех ваших страницах. - person jay c.; 25.07.2012
comment
Спасибо, Джей. Кажется, он начинает что-то делать, но пока это не так. Поправьте меня, если я ошибаюсь, потому что я новичок в jQuery Mobile, но из того, что я прочитал в Интернете, $(document) не работает, и вместо этого следует использовать $('div:jqmData(role="page")').live('pagebeforeshow',function(){? На самом деле не уверен, я пробовал размещать этот код в разных местах, и он не работает на 100%. - person elmediano; 25.07.2012
comment
Я оставил код в шапке, чтобы вы могли сами посмотреть и протестировать поведение, если не возражаете. Попробуйте зайти на разные страницы несколько раз, и вы увидите странное поведение. Если я нахожусь на странице и текущий элемент отображается неправильно, а затем я обновляю страницу, она обновляется до правильного элемента. Спасибо - person elmediano; 25.07.2012
comment
с какого сайта вы взяли эту информацию? $(документ) работает всегда. Кроме того, знаете ли вы, что в jQuery 1.7 метод .live() уже устарел (api.jquery. ком/живой). в jquery mobile страницы кэшируются по умолчанию, поэтому у нас есть $.mobile.activePage для указания активного div с data-role=page. мы используем событие pageshow, если хотим выполнить действие после завершения анимации перехода. список событий и их описание см. на jquerymobile.com/test/docs/api/ события.html. - person jay c.; 25.07.2012
comment
проверьте обновленный код выше и удалите код $('div:jqmData(role=page)').live('pagebeforeshow',function(){}) со своей страницы. - person jay c.; 25.07.2012
comment
Большое спасибо за это. Извините, я запутался, когда читал. Он использовал $(document).bind('pageinit') вместо $(document).ready() ;) К сожалению, ваш код все еще не работает. Кажется, он делает то же самое, что и раньше: выберите пункт меню, страница загружается, HOME отображается как текущая страница, но если вы обновляете страницу, пункт меню обновляется. Я тут немного схожу с ума! Спасибо за все Джей - person elmediano; 26.07.2012
comment
Только что понял, что тема добавляет свою собственную версию jQuery, поэтому я удалил ее. Кроме того, он не использовал последнюю версию jQuery Mobile, поэтому я удалил ее и добавил последнюю... но все стало еще хуже! Не уверен, что здесь происходит! Помоги пожалуйста! :) - person elmediano; 27.07.2012
comment
привет Эльмедиано. Я думаю, что это совершенно другой макет сейчас. так в чем проблема? ваше меню, казалось, теперь отображается во вкладках, и оно выглядит хорошо. что значит стало еще хуже? - person jay c.; 27.07.2012
comment
Привет Джей. Извините, я изменил его обратно на настольную версию, так как мобильная версия загружается только при просмотре на мобильном устройстве. Я только что изменил его, чтобы он отображал версию для мобильных устройств на случай, если вы могли бы быстро взглянуть :) Я имел в виду, что это ухудшилось, так это то, что когда я установил последнюю версию jQuery Mobile и щелкнул пункт меню, он даже не запустить событие changePage правильно. Что он сделает, так это правильно изменит URL-адрес и заголовок страницы, но содержание останется прежним. Я не знаю, я искал везде и не могу найти ответ :( - person elmediano; 27.07.2012
comment
по какой-то странной причине я не знаю, почему $.mobile.activePage не обновляется. вместо этого попробуйте модифицированный код выше. дайте мне знать, если это сработало или нет. - person jay c.; 27.07.2012
comment
Абсолютная легенда! Это сработало, Джей! Спасибо миллион раз, очень ценю :) - person elmediano; 27.07.2012