jQuery Mobile listview descrption with scrolling [英] jQuery Mobile listview descrption with scrolling

问题描述

我有一个带有一些长标题的列表视图，这些标题会自动隐藏在小屏幕显示上并且用...固定后发布。

I have a listview with some long title which automatically is hidden on small screen display and post fixed with ...

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

I am not sure if it is possible to make these long title of descriptions to scroll if whole title doesnt show up on the screen.

关于jsFiddle的示例

<div data-role="page" id="MessagesPage">
    <div data-role="header">
        <a href="#HomePage" data-icon="home" data-direction="reverse">Home</a>      
        <h1 id="ScheduleDayText">Messages</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview" id="MessagesList" data-autodividers="false">
            <li date="2013-03-20"><a href="#">Event 1 With take every second Saturday of each month</a></li>
            <li date="2013-03-20"><a href="#">Event 2 With take every second Thrusday of each month</a></li>
            <li date="2013-03-19"><a href="#">Event 3</a></li>
       </ul>
    </div>
</div>

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

Can we make title to scroll to left or right on mouse hover so that user can read the title before they click on the link or button.

推荐答案

更新

我想出了一个更好的主意，使用CSS3动画。在 vmouseover 一个类 .marquee 将被添加到< a> 并为其'文字制作动画。动画完成后，所有内容都将更改为正常。

I came out with a better idea, using CSS3 animation. On vmouseover a class .marquee will be added to <a> and animate its' text. After the animation is done, everything will be changed to normal.

在这里演示。

HTML

<div data-role="page" id="MessagesPage">
 <div data-role="header"> <a href="#HomePage" data-icon="home" data-  direction="reverse">Home</a> 
     <h1 id="ScheduleDayText">Messages</h1>

</div>
<div data-role="content">
    <ul data-role="listview" id="MessagesList" data-autodividers="false">
        <li date="2013-03-20"><a href="#">Lorem ipsum dolor sit amet.</a>

        </li>
        <li date="2013-03-20"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet ullamcorper vehicula. Cras eros augue, mollis vitae aliquet auctor, porta.</a>

        </li>
        <li date="2013-03-19"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et.</a>

        </li>
    </ul>
 </div>
</div>

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

---

OLD ANSWER

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

Well, I found a way to add <marquee> to scroll. However, I didn't test it on Mobile. I hope this works for you.

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

这篇关于jQuery Mobile listview descrption with scrolling的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！