Jquery mobile jquery移动面板上的每个不同html

我试图在每个不同的HTML页面上使用面板

我在JQM网站上得到了这个示例面板JS代码

/* 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

例如，我有一些HTML页面，如

main.html页面ID为“#pageMain”，about.html页面ID为“#pageAbout”，gallery.html页面ID为“#gallery”

---

如何修复JS代码？请帮助~

您的代码用于添加通过滑动手势打开面板的功能。它不会将面板与页面内容一起添加到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");

---

你的问题不清楚。假设您希望代码停止匹配单个页面，只需停止将

#demo page

选择器传递到

on（）

。您使用的是哪个jQM版本？要在活动页面中打开面板，请添加此

$.mobile.activePage.find（#right panel”）.panel（“打开”）

和

$.mobile.activePage.find（“左面板”）.panel（“打开”）我已经有了代码，但现在无法发布。这是一种将jqm文档中演示的两位代码与添加的检查相结合的情况，以确保您不会多次添加面板。感谢您的回答：）