1. 首页
  2. 问答
  3. Jquery手机幻灯片列表

Jquery手机幻灯片列表

2011-09-30 59 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

相关问题

 相关问题