Jquery Mobile 幻灯片列表答案

【问题标题】：Jquery Mobile slide listJquery Mobile 幻灯片列表
【发布时间】：2011-09-30 15:52:29
【问题描述】：

我正在尝试使用 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>

UPDATE ：我发现滑动事件不起作用，因为 div 中有一个“a”标签。我不知道如何解决这个问题。

【问题讨论】：

标签： jquery css jquery-mobile slide swipe

【解决方案1】：

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

添加了新样式：

<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');
    });
}

它不漂亮，但它确实有效。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：