Question

我正在尝试使用jQueryMobile列表，就像在twitter应用程序中一样。

我正在寻找的视频：http://www.youtube.com/watch?v=l7gTNpPTChM

但我有两个问题：

1）每一行都有一个类.mailRow和.live（“tap”）事件有效，但.live（“swipe”）在移动设备上不起作用，并且在我使用它时可以在计算机上工作右键。

2）我设法用

“隐藏”行

    $('.mailRow').live('swipe', function(e){
        $(this).animate({ marginLeft: "100%"} , 800);
    });

但是我不知道如何将另一个div放在下面，所以当动画结束时它会被显示出来。

这是列表元素在HTML中的样子：

    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
        <div id="12345" class="mailRow" style="margin-left: 100%; ">
            <div class="ui-btn-inner ui-li"><div class="ui-btn-text">
                <a href="" class="ui-link-inherit">
                    <p class="ui-li-aside ui-li-desc"><strong>30/09/2011 11:09:34</strong></p>              
                    <h3 class="ui-li-heading">USER1</h3>
                    <p class="ui-li-desc"><strong>Re: this is a test</strong></p>
                    <p class="ui-li-desc">TESTING THE MOBILE VERSION...</p>
                </a>
            </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div>
        </div>
    </li>

更新：我发现滑动事件无效，因为div中有一个“a”标记。我不知道如何解决这个问题。

Answer 1

我自己找到了解决方案，我想分享一下，以防有人遇到同样的问题：

New Style补充道：

<style type="text/css">
    .hidden
    {
        visibility: hidden;
        height: 0px !important;
        padding: 0px !important;
        margin: 0px !important;
    }
</style>

列出元素HTML：

<li data-theme="c" mail-id="12345" class="mailRow">
    <div class="buttonsRow hidden">
        <a href="#" data-role="button" data-iconpos="top" data-icon="back" data-inline="true">Reply</a>
        <a href="#" data-role="button" data-iconpos="top" data-icon="delete" data-inline="true">Delete</a>
    </div>
    <a href="#" class="messageRow">
        <p data-role="desc" class="ui-li-aside"><strong>30/09/2011 11:09:34</strong></p>                
        <h3 data-role="heading">USER1</h3>
        <p data-role="desc" ><strong>Re: this is a test/strong></p>
        <p data-role="desc" >TESTING THE MOBILE VERSION...</p>
    </a>
</li>

Javascript代码：

function mailLinks()
{
    $('.mailRow').live('swiperight', function(e){
        $(this).find('.messageRow').animate({ marginLeft: "100%"} , 800, function(){
            $(this).parentsUntil('li').find(".ui-icon-arrow-r").addClass("ui-icon-arrow-l").removeClass("ui-icon-arrow-r");
            $(this).parent().find('.buttonsRow').removeClass("hidden");
            $(this).addClass("hidden");

        });
    });
    $('.mailRow').live('swipeleft', function(e){
        $(this).find('.buttonsRow').addClass("hidden");
        $(this).find('.messageRow').removeClass("hidden");
        $(this).find('.messageRow').animate({ marginLeft: "0%"} , 800, function(){
            $(this).parentsUntil('li').find(".ui-icon-arrow-l").addClass("ui-icon-arrow-r").removeClass("ui-icon-arrow-l");
        });
    });

    $('.mailRow').live('tap', function(e){
        e.preventDefault();
        idMail = $(this).attr('mail-id');
        loadPage('read');
    });
}

它不漂亮，但确实有效。

Answer 2

目前还不知道它是否很重要，但在jquery mobile 1.0 final发布后，

有一个教程描述了您的“滑动菜单”。

http://andymatthews.net/read/2011/02/23/Add-a-Twitter-for-iPhone-Style-Swipe-Menu-to-jQuery-Mobile

Jquery Mobile幻灯片列表

2 个答案: