Question

我想更改特定部分中所有链接的数据转换。 jQuery Mobile页面转换（http://jquerymobile.com/test/docs/pages/docs-transitions.html）上的文档仅指定了如何使用属性在每个元素的基础上设置转换类型。

我更愿意完全在javascript层管理交互行为，而不是内容。为一组元素设置$ .mobile.changePage（）的选项将是理想的，但我无法弄清楚如何做到这一点。

jQuery Mobile docs属性示例：

<a href="index.html" data-transition="pop">I'll pop</a>

如果仅限于通过属性设置数据转换，那么如果我可以在父元素上指定转换（'flip'）会很棒：

<ul data-transition="flip">
    <li><a href="page1.html">I'll flip</a></li>
    <li><a href="page2.html">I'll flip too</a></li>
    <li><a href="page3.html">I'll flip as well</a></li>
</ul>
<a href="another_page.html">I'll use the default transition (eg slide)</a>

不幸的是，这似乎不是它的工作方式。

目前我最好的解决方案是使用javascript将特定于部分的数据转换属性添加到相应部分中的所有链接，但更愿意以更高效的方式处理此问题。 jQuery .attr解决方案：

$(document).ready(function(){
    $('ul a').attr('data-transition', 'flip');
});

谢谢！

Answer 1

更新：更容易实施

直播链接：

http://jsfiddle.net/EwyGL/10/

我使用flip而不是pop来显示转换更多，但只需用pop替换flip。

HTML：

<div data-role="page" id="page1"> 
    <div data-role="content"> 
        <div class="content-primary">
            <ul data-role="listview" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider">Transition Flip</li> 
                <li><a href="#page1">I'll Flip</a></li>
                <li><a href="#page2">I'll Flip too</a></li>
                <li><a href="#page3">I'll also Flip</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page2"> 
    <div data-role="content"> 
        <div class="content-primary">
            <ul data-role="listview" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider">Transition Flip</li> 
                <li><a href="#page1">I'll Flip</a></li>
                <li><a href="#page2">I'll Flip too</a></li>
                <li><a href="#page3">I'll also Flip</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page3"> 
    <div data-role="content"> 
        <div class="content-primary">
            <ul data-role="listview" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider">Transition Flip</li> 
                <li><a href="#page1">I'll Flip</a></li>
                <li><a href="#page2">I'll Flip too</a></li>
                <li><a href="#page3">I'll also Flip</a></li>
            </ul>
        </div>
    </div>
</div>

JS：

$('a').each(function() {
    $(this).attr('data-transition','flip'); 
});

在jQuery Mobile中，如何为一组链接设置数据转换？

1 个答案: