Question

我创建了一个jsfiddle，使用导航栏启用标签而不更改网址哈希：http://jsfiddle.net/ryanhaney/eLENj/

1）如果我点击主页上的“第1页”链接，然后点击“返回”按钮，我会按预期获得反向幻灯片动画。

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

如果我在更改jsfiddle javascript中的“$ .mobile.changePage”调用后使用方案＃2以使用“none”以外的转换，则后退按钮将使用相同的转换。

如何对data-rel =“back”的元素强制执行转换？

注意：在jsfiddle示例中，需要保持选项卡选择不在导航历史记录中的行为。无论您使用哪个标签，后退按钮都应该返回原位。选项卡之间不应有任何转换。 jsfiddle示例已经提供了这种行为。

Answer 1

我想我明白了：

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>

Answer 2

anchor.bind("click", function () {
$.mobile.changePage(anchor.attr("href"), {
    transition: "none",
    changeHash: false
});
return false;

似乎是"transition: "none","的问题。当我删除它或将其更改为任何内容时，它会按预期工作：http://jsfiddle.net/PQsyP/

jQuery Mobile：data-rel =“back”+数据转换不起作用？

2 个答案: