Как скрыть все теги ярлыков на моем сайте jQuery Mobile для удобства доступа?

Question

Я пытаюсь скрыть все теги меток на своем сайте jQuery Mobile в удобной форме.С этой целью я использую javascript для применения класса ui-hidden-accessible к каждому тегу метки на моем сайте согласно документации (http://jquerymobile.com/test/docs/forms/docs-forms.html).

Однако мой javascript не работает.

Здесьскрипка, демонстрирующая, как по-прежнему отображается тег метки. http://jsfiddle.net/tW4Xu/

Почему он не работает? Я также изучил другие обработчики событий jQM, такие как pageinit и pagecreate: http://jquerymobile.com/test/docs/api/events.html

Мой javascriptчтобы скрыть метки тегов:

// done after page is loaded
$(document).on("pageshow", "label", function(event) {
   $(this).addClass("ui-hidden-accessible");     
});​

Answer 1

Кажется, что у вас здесь что-то не так, хотя я не уверен, сколько из этого исходит из сводки jsfiddle и сколько в вашем полном коде.

Первое, что нужно отметить, это то, что 'pageshow' является событием перехода страницы. Кажется, что вы могли бы вместо этого использовать «pageinit». Вот как описывают документы jQM:

Запускается на инициализируемой странице после инициализации. Мы рекомендуем связываться с этим событием вместо DOM ready (), потому что это будет работать независимо от того, загружается ли страница напрямую или содержимое перетаскивается на другую страницу как часть системы навигации Ajax.

$( '#aboutPage' ).live( 'pageinit',function(event){  
    alert( 'This page was just enhanced by jQuery Mobile!' );  
});

Также обратите внимание, что 1) событие связывается с live () вместо on () (не знаю, есть ли разница), и 2) оно привязывается к определенному идентификатору для jQM 'page'. Это часть того, чего не хватает в вашем примере с jsfiddle. Там нет никаких именованных страниц JQM. В некотором роде jQM портит идею о готовности страницы, поскольку все находится в одном html-файле, а затем разбивается на части с использованием идентификаторов и вставляется через AJAX.

И так, наконец: Даже если jQM скажет, что нет, если ваша цель - добавить этот класс к каждой метке на каждой странице jQM, я бы использовал старый добрый $ (document) .ready (), а затем использовал бы $ .each (), чтобы изменить их все за один раз. Опять же, из документов JQM:

Однако в jQuery Mobile Ajax используется для загрузки содержимого каждой страницы в DOM во время навигации, а обработчик готовности DOM выполняется только для первой страницы. Чтобы выполнить код при загрузке и создании новой страницы, вы можете привязаться к событию pageinit.

Так что в $ .ready () нет ничего плохого, просто это событие вызывается только один раз, поэтому последующие переходы страниц не вызовут его. Но это может быть именно то, что вы хотите в первую очередь.

Этот код работает на jsfiddle:

$(document).ready( function(event) {  
  $("label").each( function(index, element) {   
    element.addClass("ui-hidden-accessible");  
  });  
});​

Если на вашем реальном сайте вы заметили, что переходы страниц приводят к возвращению меток, тогда вы захотите привязать что-то еще, опять же, вероятно, «pageinit».

Надеюсь, это поможет! Извиняюсь за многословие ... Я как-то пошёл туда, да?

Answer 2

Не используйте в прямом эфире его устарела с jquery 1.7. У вас была правильная идея, просто сделайте это до просмотра страницы и убедитесь, что вы используете идентификатор страницы. Также в вашей скрипке верхнее выпадающее меню меняется с загрузки на без переноса (голова). У меня были проблемы с этим в прошлом.

$(document).on("pageinit", "#thepageid", function(event) {
   $('label').addClass("ui-hidden-accessible");     
});​

Это будет работать для всех ваших страниц JQM.

$(document).on("pageinit", "[data-role=page]", function(event) {
   $('label').addClass("ui-hidden-accessible");     
});​

Answer 3

http://jsfiddle.net/tW4Xu/2/

Что?Не уверен, что ваше конкретное требование для использования on('pageshow'), в моей скрипке я использовал

$(function() {
   $('label').addClass("ui-hidden-accessible");     
});​