gpt4 book ai didi

javascript - 将外部面板加载到 Jquery 移动页面

转载 作者:行者123 更新时间:2023-11-29 19:42:10 26 4
gpt4 key购买 nike

使用侧面板的 JQuery Mobile 模板。为简单起见,我希望能够从“外部页面”/单独的文档加载此面板,以便它可以构建一次并在多个页面上使用。

经过一些研究,我得到了以下代码,将一串 html 加载到一个变量中,然后将该变量作为侧面板加载到每个页面中:

/* 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 文件的需要。

再做一些工作,我发现了这个将页面加载到变量中的代码片段:

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

所以理论上将两者相加应该会得到我想要的结果;

/* 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 加载器。

我错过了什么和/或做错了什么??


完整的解决方案

Omar 下面的解决方案完成了大部分工作,但还需要一个小而重要的补充来使 JQM 元素按预期显示。这是完整的解决方案:

$(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() 以便元素以所需的样式呈现。

最佳答案

$.get() 函数应该封装在pagebeforecreate 事件中,以便在检索到内容后直接追加内容。此外,您需要初始化检索到的内容。

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

关于javascript - 将外部面板加载到 Jquery 移动页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22404657/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com