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プロパティ値の整合性がとれず
この動作がおかしくなるので除外してあります。(原因掴めず…)

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでお知らせとかのインフォメーション要素について見せ方を考えてみる。

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner