각각 다른 html로 jquery 모바일 패널

Question

각기 다른 HTML 페이지에서 패널을 사용하려고합니다.

그리고이 샘플 패널 JS 코드는 JQM 웹 사이트에 있습니다.

/* panel */ 
$(document).on("pageinit", "#demo-page", function() { 
    $(document).on("swipeleft swiperight", "#demo-page", function(e) { 
     // We check if there is no open panel on the page because otherwise 
     // a swipe to close the left panel would also open the right panel (and v.v.). 
     // We do this by checking the data that the framework stores on the page element (panel: open). 
     if ($.mobile.activePage.jqmData("panel") !== "open") { 
      if (e.type === "swipeleft" ) { 
       $("#right-panel").panel("open"); 
      } else if (e.type === "swiperight") { 
       $("#left-panel").panel("open"); 
      } 
     } 
    }); 
}); 

문제는 각기 다른 HTML 페이지에 패널을 배치하려는 경우 어떻게 페이지 ID를 설정해야합니까? 예를 들어

, 나는

main.html 페이지 ID가 "#pageMain"about.html 기본 페이지 ID가 "#pageAbout"이며, gallery.html 페이지 ID입니다 ..... 같은 HTML 페이지가 "#gallery"

JS 코드를 수정하려면 어떻게해야합니까? 제발 도와주세요 ~

Answer 1

코드는 스 와이프 제스처를 통해 패널을 여는 기능을 추가하기위한 것입니다. 페이지 콘텐츠와 함께 패널을 DOM에 추가하지 않습니다. 그렇게하려면 다음 코드를 수정해야합니다.

/* Creates the functionality to open the left side panel with a swipe */ 
$(document).one("pagebeforecreate", function() { 
    $.get('left-panel.html', function(data){ 
//$(data).prependTo($.mobile.pageContainer); //or .prependTo("body"); 
    $.mobile.pageContainer.prepend(data); 
    $("[data-role=panel]").panel().enhanceWithin(); // initialize panel 
    }, "html");