jQuery Mobile listview descrption with scrolling

我有一个带有一些长标题的列表视图，它自动隐藏在小屏幕显示上并用…固定后固定

如果整个标题没有显示在屏幕上，我不确定是否有可能使这些长描述的标题滚动。

关于jsFiddle的示例

 
 Home 
Messages
 
 
 
 
Event 1 With take every second Saturday of each month
 
Event 2 With take every second Thrusday of each month
 
Event 3
 
 
  

我们可以使标题在鼠标hover时向左或向右滚动，以便用户在点击链接或按钮之前可以阅读标题。

Answer 1

UPDATE

我使用CSS3动画想出了一个更好的主意。 在vmouseover一个类.marquee将添加到并为其’文本设置动画。 动画完成后，所有内容都将更改为正常。

在这里演示。

HTML

 
 
 Home 
Messages
 
 
 
 
Lorem ipsum dolor sit amet. 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet ullamcorper vehicula. Cras eros augue, mollis vitae aliquet auctor, porta. 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et. 
 
 
  

CSS +动画

 .marquee { white-space: nowrap !important; overflow: visible !important; animation: right-left 5s ease; -moz-animation: right-left 5s ease; -webkit-animation: right-left 5s ease; } @-moz-keyframes right-left { 0% { -moz-transform:translateX(0); } 50% { -moz-transform:translateX(-50%); } 100% { -moz-transform:translateX(-200%); } } /** Webkit Keyframes **/ @-webkit-keyframes right-left { 0% { -webkit-transform:translateX(0); } 50% { -webkit-transform:translateX(-50%); } 100% { -webkit-transform:translateX(-200%); } } 

JS

 $("#MessagesList li").on('vmouseover', function (event) { var text = $(this).find('a').text(); var textlength = $(this).find('a').text().length; var where = $(this).find('a'); var root = $(this); if (textlength > 50) { where.addClass('marquee'); where.css('text-overflow', ''); //$("MessagesList").listview('refresh'); } $("a").on('animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () { $(this).removeClass('marquee'); //$("MessagesList").listview('refresh'); $(this).css('text-overflow', 'ellipsis'); }); }); 

---

老答复

好吧，我找到了一种方法来添加来滚动。 但是，我没有在Mobile上测试它。 我希望这适合你。

 $("#MessagesList a").on('vmouseover vmouseout', function (event) { var text = $(this).text(); if (event.type == 'vmouseover') { $(this).html('' + text + ''); } if (event.type == 'vmouseout') { $(this).text(text); $(this).find('marquee').remove(); } }); 

Answer 2

这并不是您想要的，但当您将鼠标hover在列表上时，它将显示完整内容

 $("#MessagesList a").bind('hover',function(event){ $("#MessagesList a").css('white-space', 'nowrap'); $(this).css('white-space', 'normal'); $("#MessagesList").listview("refresh"); }); 

这是一个活泼的小提琴http://jsfiddle.net/mayooresan/w6wSC/