gpt4 book ai didi

jquery-mobile - jQuery 移动 : data-rel ="back" + data-transition does not work?

转载 作者:行者123 更新时间:2023-12-04 05:57:34 25 4
gpt4 key购买 nike

我创建了一个 jsfiddle,它使用导航栏启用选项卡而不更改 url 哈希:http://jsfiddle.net/ryanhaney/eLENj/

1)如果我点击主页上的“page 1”链接,然后点击“back”按钮,我会按预期获得反向幻灯片动画。

2)如果我点击主页上的“第1页”链接,然后点击“第2页”或“第3页”(在页脚导航栏中),然后点击“返回”按钮......有没有过渡。

如果我在将 jsfiddle javascript 中的“$.mobile.changePage”调用更改为使用“none”以外的转换后遵循场景 #2,则后退按钮使用相同的转换。

如何强制使用 data-rel="back"的元素进行转换?

注意:在 jsfiddle 示例中,希望将选项卡选择保留在导航历史记录之外。无论您在哪个选项卡上,后退按钮都应该返回主页。选项卡之间不应有过渡。 jsfiddle 示例已经提供了这种行为。

最佳答案

我想我明白了:

  • http://jsfiddle.net/E86M9/3/

  • 必须重置 changePage 默认过渡值
    $("a[data-role=tab]").each(function () {
    var anchor = $(this);
    anchor.bind("click", function () {
    $.mobile.changePage(anchor.attr("href"), {
    transition: "none",
    changeHash: false
    });
    return false;
    });
    });

    $("div[data-role=page]").bind("pagebeforeshow", function (e, data) {
    $.mobile.silentScroll(0);
    $.mobile.changePage.defaults.transition = 'slide'; // reset default here
    });​

    HTML
    <div id="home" data-role="page">
    <div data-role="header">
    <h1>Home</h1>
    </div>
    <div data-role="content">
    <p>
    <a href="#page-1">Page 1</a>
    </p>
    </div>
    </div>

    <div id="page-1" data-role="page">
    <div data-role="header">
    <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
    <h1>Page 1</h1>
    </div>
    <div data-role="content">
    <p>Page 1 content</p>
    </div>
    <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
    <ul>
    <li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li>
    <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
    <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
    </ul>
    </div>
    </div>
    </div>

    <div id="page-2" data-role="page">
    <div data-role="header">
    <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
    <h1>Page 2</h1>
    </div>
    <div data-role="content">
    <p>Page 2 content</p>
    </div>
    <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
    <ul>
    <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
    <li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li>
    <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
    </ul>
    </div>
    </div>
    </div>

    <div id="page-3" data-role="page">
    <div data-role="header">
    <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
    <h1>Page 3</h1>
    </div>
    <div data-role="content">
    <p>Page 3 content</p>
    </div>
    <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
    <ul>
    <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
    <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
    <li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li>
    </ul>
    </div>
    </div>
    </div>​

    关于jquery-mobile - jQuery 移动 : data-rel ="back" + data-transition does not work?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9321655/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com