jQuery (IBM Worklight) 页面导航和后退按钮

Posted 2023-05-09

【中文标题】jQuery (IBM Worklight) 页面导航和后退按钮

【英文标题】：jQuery (IBM Worklight) page navigation and back button

【发布时间】：2013-10-01 23:57:24

【问题描述】：

我正在使用带有 jQ​​uery 库的 IBM Worklight 开发一个应用程序。应用程序的结构是

Login.html --> Menu.html -->

Menu1 --> Menu1.html -->(点击按钮)--> Detail.html -->(save)address.html Menu2 --> Menu2.html -->（点击按钮）--> data.html --> edit.html

所以应用程序按照上面的说明流动。我正在使用 jQuery 单页模板（在每个 html 文件中），因为应用程序有更多的页面，并且将所有这些都放在 html 上是不合适的。

我已经创建了

<div data-role="page" id="menuPage" data-theme="c"></div>
<div data-role="page" id="menu1" data-theme="c"></div>
<div data-role="page" id="details" data-theme="c"></div>

然后单击按钮，我将使用$('#divID').load(abc.html, callback) 和callback 将相应的html 文件加载到相应的div 中，并在上面的html 文件中创建动态元素并使用jQuery.append() 进行附加。 添加元素后，我使用$.mobile.changePage($('#menuPage'), 'pop'); 更改页面。

到目前为止一切正常，但是当我尝试使用后退按钮时出现问题。在 chrome 浏览器或移动模拟器中，当我使用后退按钮时，我能够进入上一页，但是当我尝试使用前一页上的链接/按钮前进时，下一页创建时没有任何样式。它就像在 C 级浏览器中一样，没有任何样式。

所以问题是这是与页面交互并在 DOM 中加载它们的正确方法。以及如何让返回按钮正常工作。

任何建议都会非常有帮助。提前谢谢...

【问题讨论】：

尝试阅读此public.dhe.ibm.com/software/mobile-solutions/worklight/docs/… 并使用示例多页应用程序，它清楚地展示了如何做到这一点。

我尝试使用此方法，但页面样式出现问题。加载下一页时，不会呈现 jQuery 样式。

在 Main 中加载 Jquery 一次应该可以工作。如果可以发布一些更详细的代码，则很容易识别问题。

你是否也在传递你的 .css 文件？

我已经在主库中加载了 jQuery 库，但是样式中断了。你（@IdanAdar）通过.css是什么意思？？？

【参考方案1】：

$("#ID").trigger("create") or
$("#ID").page().trigger("create") or
$("#ID").trigger("pagecreate").

在页面加载完成后，尝试在回调函数中添加以上所有代码。