jquery mobile change page with page transition from javascri

jquery mobile change page with page transition from javascript

本文关键字：page from javascri transition with change jquery mobile      更新时间：2023-09-26

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

单击链接时，我进行了过渡： 

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

这将进行幻灯片过渡。

如果我将数据转换属性更改为数据转换="无"，我将不会得到任何转换。

现在我想在进行过渡之前做一些逻辑。换句话说，如果我可以用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        
}

我怀疑因为你与锚标签中的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"})

您可以使用以下内容：

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

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

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

相关文章：