将外部面板加载到Jquery移动页面 [英] Load External Panel To Jquery Mobile Page

问题描述

使用侧面板的JQuery Mobile模板.为简单起见，我希望能够从外部页面"/单独的文档中加载此面板，以便可以一次构建并在许多页面上使用.

JQuery Mobile template which utilises a side panel. For simplicity I want to be able to load this panel from an 'external page' / seperate document so that it can be built once and used on many pages.

经过一些研究，我得到了以下代码，以将html字符串加载到变量中，然后将该变量加载到侧面板的每一页中:

A bit of research has resulted in me getting the following code to load a string of html into a variable and then loading that variable into each page as the side panel:

/* Get the sidebar-panel as a var */
var side_var = '<div data-role="panel" id="left-panel" data-position="left" data-display="push"><h1>Panel</h1><p>stuff</p></div>';

/* Load the side-panel var to the DOM / page */
$(document).one('pagebeforecreate', function () {
  $.mobile.pageContainer.prepend( side_var );
  $("#left-panel").panel();
});

这很好用，但是仍然不能满足将侧边栏/面板构建为单独的html文件的需求.

This works perfectly, however it still doesn't address the need to build the sidebar / panel as a separate html file.

多做一些工作，我发现了将代码页加载到变量中的代码段:

A bit more work and I discovered this snippet to load a page into a variable:

$.get("http://www.somepage.com", function( side_var ) {}, 'html');

所以从理论上讲，将两者加在一起应该可以得到我想要的结果；

So in theory adding the two together should give me the desired result;

/* Get the sidebar-panel as a var */
$.get("mypage.html", function( side_var ) {}, 'html');


/* Load the side-panel var to the DOM / page */
$(document).one('pagebeforecreate', function () {
   $.mobile.pageContainer.prepend( side_var );
   $("#left-panel").panel();
});

但是，运行此程序时，我得到的只是一个永久旋转的AJAX加载器.

However, all I get when running this is an eternally rotating AJAX loader.

我在想什么和/或做错了什么?

What am I missing &/or doing wrong??

完整解决方案

以下Omar的解决方案大体上可行，但是需要少量但重要的添加才能使JQM元素按预期显示.这是完整的解决方案:

Omar's solution below goes most of the way but needs one small but important addition to make the JQM elements display as expected. Here is the complete solution:

$(document).one("pagebeforecreate", function () {
  $.get('side-panel.html', function(data) { 
    //$(data).prependTo($.mobile.pageContainer); //or .prependTo("body");
    $.mobile.pageContainer.prepend(data);
    $("[data-role=panel]").panel().enhanceWithin(); // initialize panel
  }, "html");
});

要增强为JQM元素的每个元素都需要添加数据主题，以告知使用哪个主题.另外，在JavaScript中，初始化的面板小部件需要.enhanceWithin()以便元素以所需的样式呈现.

Each element to be enhanced as a JQM element needs the data-theme adding to tell it which theme to use. Additionally in the JavaScript the initialised panel widget needs to .enhanceWithin() in order for the elements to be rendered with the desired style.

推荐答案

$.get()函数应包装在pagebeforecreate事件中，以在检索到后直接附加内容.另外，您需要初始化检索到的内容.

the $.get() function should be wrapped in pagebeforecreate event, to append contents directly once retrieved. Also, you need to initialize retrieved contents.

$(document).one("pagebeforecreate", function () {
  $.get('mypage.html', function(data){ 
    $(data).prependTo("body"); // or .prependTo($.mobile.pageContainer);
    $("[data-role=panel]").panel(); // initialize panel
  }, "html");
});

这篇关于将外部面板加载到Jquery移动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！