如何在Worklight中使用Jquery Mobile在页面之间进行更改 [英] How to change between pages using Jquery Mobile in Worklight

问题描述

我在Worklight中从头开始一个项目。我正在使用Jquery Mobile，我需要知道Im假设如何在页面之间进行转换。当我拖放新的列表视图时，使用超链接生成以下代码：

Im starting a project from scratch in Worklight. Im using Jquery Mobile and I need to know how Im suppose to do the transition between pages. When I drag and drop a new list view, the following code is generated using Hyperlinks:

<ul data-role="listview" id="listview" data-inset="true">
        <li data-role="list-divider" id="divider">Divider</li>
        <li id="listitem"><a href="#">Item</a></li>
        <li id="listitem0"><a href="#">Item</a></li>
        <li id="listitem1"><a href="#">Item</a></li>
    </ul>

但如果我考虑构建多页面应用程序指南，我不应该使用超链接。 ..我该怎么办？

But if I take into consideration the "building multiple page application" guide, I should not use hyperlinks...How should I do this?

推荐答案

正如您所提到的，Worklight是一个单页应用程序。因此，您无法加载另一个HTML文件并期望应用程序继续运行。通过这样做，您将失去Worklight框架的上下文 - 对包含的JS文件的引用等。

As you rightly so mention, Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.

为了实现多页导航，那么，您可以使用jQuery Mobile的 changePage 或jQuery的加载函数（或其他框架中的等价物......），具体取决于你我喜欢你的应用程序。

In order to implement multipage navigation, then, you can use either jQuery Mobile's changePage or jQuery's load functions (or the equivalents in other frameworks...), depending how you'd like your application to behave.

jQuery.mobile.changePage（）

http://api.jquerymobile.com/jQuery.mobile.changePage/

.load（）

http ：//api.jquery.com/load/

以下是几个展示页面导航的Worklight 6.1项目：

Here are a couple of Worklight 6.1 projects demonstrating page navigation:

• JQM_multipage_load_changePage.zip - 使用其中之一 .load 或 .changePage


• JQM_multipage_changePage_pageshow.zip - 使用 .changePage 和 .pageShow

• JQM_multipage_load_changePage.zip - uses either .load or .changePage
• JQM_multipage_changePage_pageshow.zip - uses .changePage and .pageShow

在这两种方法中，你有1个HTML文件（Worklight的index.html）和多个其他HTML文件;您获取这些HTML文件的内容并将其替换为index.html的特定子集。这样，Worklight的index.html保持不变（对框架的JS等的引用），但应用程序内容已更改。

In both approaches you have 1 HTML file (Worklight's index.html) and multiple other HTML files; you take the contents of these HTML files and replace with it a specific subset of the index.html. This way Worklight's index.html remains intact (the references to the framework's JS, etc), but the app contents is changed.

根据您的具体情况，您可以在 href 中添加 onclick 并使用jQuery Mobile来过渡并显示另一个页面的内容。

Taking the above to your particular case, you can add an onclick to your href and use jQuery Mobile "to transition" and display the contents of "another" page.

这篇关于如何在Worklight中使用Jquery Mobile在页面之间进行更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！