jQuery Mobile:data

本文介绍了jQuery Mobile:data-rel="back"+ 数据转换不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

1) 如果我点击主页上的page 1"链接，然后点击back"按钮，我会得到预期的反向幻灯片动画.

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

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

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

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

解决方案

我想我明白了:

http://jsfiddle/E86M9/3/

必须重置changePage默认过渡值

$("a[data-role=tab]").each(function () {var 锚点 = $(this);锚点绑定(点击"，函数(){$.mobile.changePage(anchor.attr("href"), {过渡:无"，更改哈希:假});返回假；});});$("div[data-role=page]").bind("pagebeforeshow", function (e, data) {$.mobile.silentScroll(0);$.mobile.changePage.defaults.transition = '幻灯片';//这里重置默认值});

HTML

<div data-role="header"><h1>主页</h1>
<div data-role="内容"><p><a href="#page-1">第 1 页</a></p>
<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</＞<h1>第 1 页</h1>
<div data-role="内容"><p>第 1 页内容</p>
<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">第 1 页</a></li><li><a href="#page-2" data-role="tab" data-icon="grid">第 2 页</a></li><li><a href="#page-3" data-role="tab" data-icon="grid">第 3 页</a></li>
<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</＞<h1>第2页</h1>
<div data-role="内容"><p>第 2 页内容</p>
<div data-role="footer" data-position="fixed"><div data-role="navbar"><ul><li><a href="#page-1" data-role="tab" data-icon="grid">第 1 页</a></li><li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">第 2 页</a></li><li><a href="#page-3" data-role="tab" data-icon="grid">第 3 页</a></li>
<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</＞<h1>第3页</h1>
<div data-role="内容"><p>第 3 页内容</p>
<div data-role="footer" data-position="fixed"><div data-role="navbar"><ul><li><a href="#page-1" data-role="tab" data-icon="grid">第 1 页</a></li><li><a href="#page-2" data-role="tab" data-icon="grid">第 2 页</a></li><li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">第 3 页</a></li>
</div>

I created a jsfiddle that enables tabs using the navbar without changing the url hash: http://jsfiddle/ryanhaney/eLENj/

1) If I click on the "page 1" link from the home page, followed by clicking the "back" button, I get the reverse slide animation as expected.

2) If I click on the "page 1" link from the home page, then click on "page 2" or "page 3" (in the footer navbar), then click on the "back" button....there is no transition.

If I follow scenario #2 after changing the "$.mobile.changePage" call in the jsfiddle javascript to use a transition other than "none", the back button uses that same transition.

How can I enforce the transition for elements with data-rel="back"?

NOTE: In the jsfiddle example, it is desired behavior to keep tab selections out of the navigation history. The back button should go back home regardless of which tab you are on. There should be no transition between tabs. The jsfiddle example already provides this behavior.

解决方案

I think I got it:

http://jsfiddle/E86M9/3/

Had to reset the changePage default transition value

$("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:data-rel="back"+ 数据转换不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！