読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

「続きを読む」を実現するプラグイン jQuery Expanderのオプションについて

jQuery

jQuery Expanderそのものの紹介は省きます。

ソースコードには以下のようにデフォルトを定義してあります。

defaults:{slicePoint:100,preserveWords:true,widow:4,expandText:"read more",expandPrefix:"… ",expandAfterSummary:false,summaryClass:"summary",detailClass:"details",moreClass:"read-more",lessClass:"read-less",collapseTimer:0,expandEffect:"slideDown",expandSpeed:250,collapseEffect:"slideUp",collapseSpeed:200,userCollapse:true,userCollapseText:"read less",userCollapsePrefix:" ",onSlice:null,beforeExpand:null,afterExpand:null,onCollapse:null,afterCollapse:null}

で、ひとつひとつみていきました。(僕の英語力が乏しくて全部は分からなかった…)

$(obj).expander({
    slicePoint:90, // 表示する文字数

    preserveWords: true, // trueにしてもfalseにしても何が違うのか分からない…

    expandText:"続きを読む", // 省略リンクテキスト
    expandPrefix: '★★', // 省略リンクテキスト接頭辞

    userCollapseText: "コンテンツを隠す", // 要素を閉じるリンクテキスト
    userCollapsePrefix: ' ', // 要素を閉じるテキスト接頭辞

    summaryClass: 'before', // 省略前部分のクラス名 (デフォルトはsummary)
    detailClass: 'after', // 省略後部分のクラス名 (デフォルトはdetails)

    moreClass: 'more', // 「続きを読む」のspanクラス名 (デフォルトはread-more)
    lessClass: 'less', // 「コンテンツを隠す」のspanクラス名 (デフォルトはread-less)

    widow:0, // なんなのかよく分からないけど、デフォルト4のままだとうまく作動しない…

    expandEffect: 'show', // コンテンツを広げるときの挙動
    expandSpeed: 0, // コンテンツを広げるスピード
    collapseEffect: 'hide', // コンテンツを隠すときの挙動
    collapseSpeed: 0, // コンテンツを隠すスピード

    beforeExpand: function() { // コンテンツを広げる前に実行する関数
        ....
    },
    afterExpand: function() { // コンテンツを広げたあとに実行する関数
        ....
    },
    beforeCollapse: function() { // コンテンツを隠す前に実行する関数
        ....
    },
    afterCollapse: function() {  // コンテンツを隠したあとに実行する関数
        ....
    }
});