Question

我正在尝试在每个不同的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代码？请帮忙〜

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");

jquery移动面板上的每个不同的HTML

1 个答案: