2

小さな画面表示では自動的に非表示になり、投稿が...で固定される長いタイトルのリストビューがあります。

タイトル全体が画面に表示されない場合、これらの長い説明のタイトルをスクロールできるかどうかはわかりません。

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>

ユーザーがリンクまたはボタンをクリックする前にタイトルを読むことができるように、タイトルをマウス ホバー時に左または右にスクロールするようにできますか。

4

2 に答える 2

3

アップデート

CSS3 アニメーションを使用して、より良いアイデアを思いつきました。vmouseoverクラス.marqueeに追加され、その<a>テキストがアニメーション化されます。アニメーションが完了すると、すべてが通常に変更されます。

ここでデモ。

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

古い答え

さて、<marquee>スクロールに追加する方法を見つけました。ただし、モバイルではテストしませんでした。これがうまくいくことを願っています。

$("#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();
 }
});
于 2013-03-28T10:11:22.533 に答える
3

これはまさにあなたが望んでいたものではありませんが、リストにカーソルを合わせると、完全なコンテンツが表示されます

$("#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/

于 2013-03-28T09:41:57.360 に答える