Jquery Mobile список слайдов

Question

Я пытаюсь сделать список с помощью jQueryMobile, как в приложении Twitter.

Видео того, что я ищу: http://www.youtube.com/watch?v=l7gTNpPTChM

Но у меня есть 2 проблемы:

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>

ОБНОВЛЕНИЕ : Я обнаружил, что событие свипинга не работает, потому что естьтег "a" внутри div.Я не знаю, как это исправить.

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

Это не красиво, но работает.

Answer 2

не знаю, важно ли это в данный момент, но после выхода финала jquery mobile 1.0,

есть учебник, описывающий ваше "меню смахивания".*