나는 이것을 4 일 동안 사용할 수 있도록 노력했지만 행운은 없습니다.Jquery mobile ui-btn-navbar의 활성화
저는 매우 간단한 jquery 모바일 앱을 보유하고 있습니다. 앱에 머리글, 콘텐츠 및 바닥 글이 있습니다. 'pagecreate'이벤트가 항상 동일하고 모든 페이지에 HTML이 없기 때문에 바닥 글이 동적으로 생성됩니다.
그래서 나는 같은 것을 할 :
$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
DrawHeader($(this));
DrawFooter($(this));
SetFooterEvents($(this));
SetActiveFooter($(this));
});
DrawHeader() 및 DrawFooter()는 머리글 div를 페이지에 미리 추가하고 바닥 글 div를 추가하기 만하면됩니다. SetFooterEvents()는 바닥 글 탐색 바 버튼의 onclick 이벤트를 설정하고 SetActiveFooter()는 SUPPOSED로 ui-btn-active를 현재 활성 푸터 링크로 설정합니다. 이렇게하려면 page div에 data-active-footer 속성을 추가하고 navbar 요소에 data-name 속성을 추가했습니다. 페이지의 data-active-footer에 따라 현재 요소를 찾고 ui-btn-active 클래스를 적용합니다.
function SetActiveFooter(page) {
page.children('div[data-role="footer"]')
.find('a[data-name="' + page
.attr("data-active-footer") + '"]').addClass("ui-btn-active");}
지금까지 그렇게 좋았습니다.
이제는 페이지로 바뀌었고 navbar가 켜져 있고 (이전에 ui-btn-active 클래스를 성공적으로 수신함) 이전 페이지를 클릭하고 있는데, navbar의 점등 된 항목이 나던가요? 다시 변화!
페이지를 다시 클릭하면 (예 : 두 번째 페이지 [corrent 조명]으로 변경, 첫 페이지로 다시 변경됨 [두 번째 페이지가 계속 켜져 있음, 첫 번째 페이지가 다시 클릭 된 경우) 탐색 표시 줄 단추가 켜집니다.
내가 알아 낸 것은 jqm이 'pagecreate'이벤트에서 현재 페이지의 navbar를 변경할 때 이전 페이지의 navbar를 변경했기 때문입니다. 'pageshow'이벤트를 사용하여이 동작을 덮어 쓰려고했습니다. 즉, ui-btn-active 클래스를 navbar의 현재 요소에 적용하려고했지만 문제는 $ (this) 및 e.currentTarget 객체입니다. 'pageshow'이벤트에서 더 나은 요소를 포함하지 마십시오 !!!
$(".ui-page").live('pageshow', function (e) {
alert($(this).children('div').length); // returns 2!
alert($(this).children('div[data-role="footer"]').length); //returns 0
alert($(e.currentTarget).children('div').length); // returns 2!
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});
어떤 아이디어?
감사합니다.