1. 首頁
  2. 問答
  3. Jquery手機幻燈片列表

Jquery手機幻燈片列表

2011-09-30 80 views
2

我正在嘗試使用jQueryMobile做一個列表，就像在twitter應用程序中一樣。Jquery手機幻燈片列表

視頻什麼的我在尋找：http://www.youtube.com/watch?v=l7gTNpPTChM

但我有2個問題：

1）每一行都有一個類.mailRow和.live（ 「點擊」）事件的作品，但。直播（「滑動」）在移動設備上無法使用，並且在使用右鍵執行操作時會在計算機上運行。

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>

更新：我發現刷卡時不工作becase的有一個「一」在div標籤裏。我不知道如何解決這個問題。

來源

2011-09-30 SERPRO

回答

2

嗯，我找到了解決辦法我自己，我想和大家分享吧，以防萬一有人會面臨同樣的問題：

新型補充說：

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

這並不美觀，但確實有效。

來源

2011-10-04 12:33:33 SERPRO

相關問題

 相關問題