2011-05-18 10 views
2

私のRuby On Railsアプリケーションでは、文字列値を表示すると、ユーザーが文字列値にマウスを置くと100文字しか表示されません。例えばRuby On Railsの文字列を切り捨てて展開する

:例はアル..です

上にマウスの場合:例では、常に記述の状況よりも優れています。

私はRuby On Railsのビルドインfunc => truncate(title.to_s、:length => 100)で試してみました。私は上記を使用することによってのみ切り捨てることができることを知っています。上記のいずれかのRubyでRailsの溶液またはjQqueryソリューションのためのソリューションを使用すると、マウスオーバーでテキストを拡大したい場合は、それがあることを意味して、その後、私はjQueryのでソリューションを実装することをお勧めしたい最高の

答えて

2

では何

JSをオンにしていないユーザーにはフルテキストが表示されます(アクセシビリティに優れています)。以下は私たちがウェブサイトで使用しているものに基づいており、テキストをクリックすることによってフル/ショートテキストを切り替えることができますが、ホバーイベントに変更するのは簡単です。

最初に、自動的に展開/縮小するテキストを、div/spanでjQueryで後で取り上げるクラスにラップします。

<div class="autoShorten">An example is always better than description situation.</div> 

は、その後、次のjQueryの関数を作成:

jQuery.fn.autoShorten = function() { 
return this.each(function(){ 
    if ($(this).text().length > 100) { 
     var words = $(this).text().substring(0,100).split(" "); 
     var shortText = words.slice(0, words.length - 1).join(" ") + "..."; 
     $(this).data('replacementText', $(this).text()) 
     .text(shortText) 
     .css({ cursor: 'pointer' }) 
     .hover(function() { $(this).css({ textDecoration: 'underline' }); }, function() { $(this).css({ textDecoration: 'none' }); }) 
     .click(function() { var tempText = $(this).text(); $(this).text($(this).data('replacementText')); $(this).data('replacementText', tempText); }); 
    } 
}); 
}; 

この機能は、単語の区切りに省略記号を挿入するのではなく、中

最終的には単語の途中で利益を持っているあなた$(document).ready機能追加 $('.autoShorten').autoShorten();

0

これはうまく動作します。 http://jsfiddle.net/R4Xyd/5/

$(".inner").mouseover(function(){ 
    $(".inner").animate({"marginLeft": "-=100px"}, "slow"); 
}); 

$(".inner").mouseout(function(){ 
    $(".inner").animate({"marginLeft": "+=100px"}, "slow"); 
}); 

はここに仕事でそれを参照してください。
関連する問題