Jquery для мобильных и динамических ссылок - PullRequest
Новая
       18

Jquery для мобильных и динамических ссылок

2 голосов
/ 04 августа 2011

Просто окунувшись в мобильный телефон Jquery для рабочего проекта, я наткнулся на небольшой камень преткновения, на котором я слишком долго крутил свои колеса, поэтому пришло время для экспертной оценки.

Концепция такова: есть главная страница с кнопкой «последние записи в Facebook».При щелчке по этой кнопке вы переходите на вторую страницу, где результаты извлекаются из RSS-ленты Facebook и оборачиваются тегом, указывающим на закладку на той же странице (в соответствии с соглашением JQM).До этого момента у меня не было проблем, ссылки правильно заполняют заголовок, а href правильно указывает на href = "detailpage" + i.проблема заключается в том, что когда я пытаюсь создать соответствующий контейнер содержимого и добавить его к тегу body с соответствующей страницей сведений + я идентифицирую, что ссылка просто возвращает меня на домашнюю страницу, а не к недавно добавленному контенту.

Я думаю, что, возможно, dom не знает, что новый материал существует после его создания, и в результате, не имея соответствующих элементов, возвращается только первый элемент "page".

Я использую JQM 1.0b2 и jquery 1.6.2 с пробелом телефона

операция, которую я делаю, выглядит следующим образом: 

$('#gotoContentpage').click(function(){

    $("#contentlist").empty(); //empty the list elements we've placed in the html
    $.ajax({
           type: "GET",
           url: "https://www.facebook.com/feeds/page.php?id=212385708771580&format=rss20",
           dataType: "xml",
           success: parseXml
           });

    function parseXml(xml){    
        var i =1;
        $(xml).find("item").each(function(){
            var pageid = "detailpage" + i;                     
            $("#contentlist").append("<li><a href='#"+pageid+"'>" + ($(this).find("title").text()) + "</a></li>");

            $("body").append("<div data-role='page' id='"+pageid+"'><div data-role='header'><a data-rel='back'>back</a><h1>" + ($(this).find("title").text()) + "</h1></div><div data-role='content'>" + ($(this).find("description").text()) +"</div><div data-role='footer'><h1>  detail Page Footer </h1></div></div>");

          i++;
          });


          $("#contentlist").listview('refresh'); 

         }


     });

вот HTML, которыйвыводится как обычная HTML-страница: http://deepblue.cs.camosun.bc.ca/~c0029098/caleb/test.html

РЕДАКТИРОВАТЬ: после нескольких часов вращения моих колес и изменения моего подхода кажется, что я нашел решение.Вместо того, чтобы указывать href на закладку, как все другие ссылки, которые загружаются изначально, я был вынужден использовать функцию $ .mobile.changePage, чтобы добраться туда, куда мне нужно было перейти.

"<li><a href='javascript:void(0)' onclick=\"javascript: $.mobile.changePage($('"+'#'+pageid+ "'), 'slide');\">" + "foobar"</a></li>"

надеюсь, что это поможет кому-то.

1 Ответ

0 голосов
/ 03 октября 2011

Я считаю, что для динамически добавляемых страниц должен быть добавлен атрибут data-url, чтобы включить его в навигации.Если я правильно помню, это было добавлено, когда JQM пересмотрел кнопку возврата и история работала.Идентификатор больше не используется с точки зрения навигации.

, т. Е. В вашем случае: 

$("body").append("<div data-role='page' data-url='"+pageid+"' id='"+pageid+"'><div data-role='header'><a data-rel='back'>back</a><h1>" + ($(this).find("title").text()) + "</h1></div><div data-role='content'>" + ($(this).find("description").text()) +"</div><div data-role='footer'><h1>  detail Page Footer </h1></div></div>");

Если проблемы не устранены, возможно, на динамически добавленных страницах потребуется вызвать .page().

Мой код для добавления динамических страниц выглядит следующим образом: 

$('<div data-role="page" id="infopage" data-url="infopage"></div>').appendTo('body').page();

Возможно, вызов .page() просто добавляет data-url Я проверю, когда у меня будет время, и обновлюмой ответ.

...