Webページ上でインフォメーションやお知らせ記事を一覧で表示するような枠で、
デザイン(レイアウト)上、一覧表示では一行表示分の枠を設け、(長いタイトルなどは「…」で切ったり)
クリック後ページ遷移をして全体を見せるやり方はよくあること。

そんな際、タイトル的な内容までも途中でテキストを切ってしまうのは
今までも気が引けていたので、何か策はないかjQueryを使って考えてみる。

まずは動作サンプルから
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

通常の見た目では一覧表示は一行分表示分。
テキストが一行以上(二行になったもの)に対して「≫続きを見る」を表示し、
マウスオーバーで全てを表示します。

動きはjQueryとCSSを組み合わせて構成しています。

実際のスクリプトは以下のような感じに。

◆SCRIPT ———————————————————–
$(function(){
 $(‘ul li’).each(function(){
  if($(this).children(‘p’).height() > 35) { //1行分は大体19pxくらい(FontSize:12pxの場合)
   $(this).append(‘<span>≫続きを見る</span>’);
   $(this).hover(function(){
    $(this).children(‘p’).css({
     top:”-1px”,
     left:”-1px”,
     width:”420px”,
     position:”absolute”,
     background:”#F5F5F5″,
     border:”#777 1px solid”,
     zIndex:”100″
    });
    $(this).css({
     position:”relative”,
     overflow:”visible”
    });
    if(!($.browser.msie && $.browser.version <= 7)){
     $(this).siblings().stop().fadeTo(200, 0.2);
    }
   }, function() {
    $(this).children(‘p’).css({
     top:””,
     left:””,
     width:”350px”,
     position:””,
     background:”#fff”,
     border:””,
     zIndex:””
    });
    $(this).css({
     position:””,
     overflow:”hidden”
    });
    if(!($.browser.msie && $.browser.version <= 7)){
     $(this).siblings().stop().fadeTo(200, 1);
    }
    });
  }
 })
});
——————————————————————–

HTMLソース側には特定の指定などは記述せずに、
<li>の中に入る要素が1行か、2行になるか、で判別。
(「≫続きを見る」のテキストはHTML側では記述せずにスクリプトから生成します。)

マウスオーバーした際の動きは、表示するセクション以外はフェードアウトしてトーンを下げていますが
IE6,7ではfadeToと親<li>要素のvisibilityプロパティ値の整合性がとれず
この動作がおかしくなるので除外してあります。(原因掴めず…)

こんな感じですが何かの際に是非。。。