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