jquery移动更改页面,页面从javascript过渡

时间:2013-01-26 23:13:59

标签: javascript jquery jquery-mobile

我正在借助此页面进行转换: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 =“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        
}

2 个答案:

答案 0 :(得分:1)

我怀疑,因为你与锚标签中的onclick绑定,你的方法首先发生,然后jQuery mobile可能会说&#34;我们已经在那里 - 不需要过渡&#34;。

我想知道你是否可以使用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

答案 1 :(得分:0)

您可以使用以下内容:

  1. $.mobile.navigate("#bar", {transition: "slide", info: "info about the #bar hash"});
  2. $.mobile.pageContainer.pagecontainer("change", "target", {transition: "flow", changeHash: false, reload: true})
  3. 值得注意的是,$.mobile.changePage()现已弃用,不应再使用。 http://api.jquerymobile.com/jQuery.mobile.changePage/

    我以为我会从其他主题中学到的东西回答这个问题。 我没有足够的声誉来提供剩下的链接。只需在Google上搜索代码,即可找到各自的StackOverflow主题。