带有来自javascript的页面转换的jquery mobile更改页面答案

【问题标题】：jquery mobile change page with page transition from javascript带有来自javascript的页面转换的jquery mobile更改页面
【发布时间】：2013-01-26 23:13:58
【问题描述】：

我正在此页面的帮助下进行转换：http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html

点击链接时我做了一个过渡：

<a href="#page1" data-transition="slide" data-role="button" > Submit </a>

这会进行幻灯片转换。

如果我在哪里将 data-transition 属性更改为 data-transition="none" 我将没有任何过渡。

现在我想在过渡之前做一些逻辑。换句话说，如果我可以使用 javascript 执行相同的转换，那就太好了。这就是我现在所拥有的：

function GoTopage1()
{
    if(someVar == true)
        window.location = "#page1";
}

我现在的链接是这样的：

<a onclick="GoTopage1()" data-transition="slide" data-role="button" > Submit </a>

该代码有效，但我丢失了幻灯片过渡。单击链接时，我会得到默认过渡，即淡入过渡。如何使用代码进行转换？

编辑

终于想通了：

我放置了一个隐藏链接：

<a id="t1" href="#page1"  data-transition="slide" ></a>

然后在我的功能上我现在有：

function GoTopage1()
{
    if(someVar == true)
        $("#t1").click(); // simulate link click        
}

【问题讨论】：

我喜欢它。非常感谢。

标签： javascript jquery jquery-mobile

【解决方案1】：

我怀疑因为你在锚标记中绑定了onclick，所以你的方法首先发生，然后 jQuery mobile 可能会说“我们已经在那里 - 不需要转换”。

我想知道你是否可以使用 jQuery-mobile 中的 $.mobile.changePage() 方法来代替设置 window.location。这可能会通过 jQuery-mobile 代码推动活动并使转换工作。

另外，由于 jQuery 页面逻辑基于 hashchange 事件，也许您应该设置 location.hash 而不是 location。您可以在此处查看文档：

http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html

编辑：从 jQuery Mobile 1.4 开始，$.mobile.changePage() 已被弃用，而应使用 $.mobile.pageContainer.pagecontainer("change") 代替。示例：

$.mobile.pageContainer.pagecontainer("change", "#page1", {transition: "slide"})

【讨论】：

我已经尝试了 $.mobile.changePage 但它不起作用......我没有同时使用这两个。我将 href="#page1" 替换为 onlcick 事件。
$.mobile.changePage( "#page1", { transition: "slide"} ); 可以完美运行，当然因为它可以在 1.5.0 中弃用（是的，它们确实弃用了诸如此类的基本功能）

【解决方案2】：

您可以使用以下内容：

$.mobile.navigate("#bar", {transition: "slide", info: "info about the #bar hash"});
$.mobile.pageContainer.pagecontainer("change", "target", {transition: "flow", changeHash: false, reload: true})

还值得注意的是，$.mobile.changePage() 现在已弃用，不应再使用。 http://api.jquerymobile.com/jQuery.mobile.changePage/

只是想我会根据我从其他线程中学到的知识来回答这个问题。我没有足够的声誉来放置其余的链接。只需在 Google 上搜索代码即可找到它们各自的 StackOverflow 线程。

【讨论】：