Movable Type 備忘録

 Expander with jQuery

  • Dec012008
  • Vote:
    http://bizcaz.com/archives/2008/12/01-001911.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんばんわ^^

最近 Fx を始めたのですが、まだリアルで投資なんてとても、とても･･･。
デモトレードというもので少しずつコツ!? を掴んでいこうと思ってる今日この頃でございます。

さて、jQuery の Expander プラグインを使ってみましたのでご紹介します。

サンプルを表示できませんでした。

上記サンプルでお分かりのように、Expander プラグインは長いテキストをある一定文字数でちょん切って「read more ...」として隠してくれるプラグインです。
日本語ももちろん問題ありません。ただし、半角、全角文字問わず 1 文字( 半角／全角の区別がない )と換算してるようです。

Expander プラグインは以下のページから入手できます。

使い方は人それぞれなのですが、とりあえずカンタンに 2 つのパターン例を記しますね。

使い方パターン１

文章の途中でちょん切って使いたい（上記サンプルのようなかんじ）場合には以下のようにします。
例として以下のような文章があると仮定します。

文章の途中でちょん切る

  1. <p class="expander">Yahoo!百科事典は、日本を代表する百科事典である、小学館の「日本大百科全書（ニッポニカ）」（1984～1994 判：全 26 巻）をベースに、毎月新項目やマルチメディアデータが追加されるデジタル版百科事典です。<br />
  2. 各分野の権威により編集された内容を無料で瞬時に検索できますので、調べものをする際に初めに参照するツールとして、ぜひご利用ください。</p>

上記のような文章の途中（60 文字）でちょん切る場合には以下のようなコードを HTML ヘッダ中に追加します。

文章の途中でちょん切るコード

  1. $(function() {
  2.     $('.expander').expander({
  3. slicePoint : 60,
  4.         widow : 2,
  5.         expandEffect : 'fadeIn',
  6.         collapseTimer : 0,
  7.         userCollapse : true,
  8.         expandSpeed : '200',
  9.         expandText : ' [MORE ...]',
  10.         userCollapseText: ' <br />[COLLAPSE]'
  11.     });
  12. });

ポイントは赤字の部分です。
ちょん切りたい段落（ p タグ ）をセレクタにしてます。 そして、slicePoint オプションを使って文字数（半角／全角区別なし）を指定します。

使い方パターン２

次にブロックを丸ごとちょん切りたい場合には以下のようにします。
例として以下のような文章があると仮定します。

ブロックでちょん切る

  1. <div class="body">
  2.     <p>Yahoo!百科事典は、日本を代表する百科事典である、小学館の「日本大百科全書（ニッポニカ）」（1984～1994 判：全 26 巻）をベースに、毎月新項目やマルチメディアデータが追加されるデジタル版百科事典です。</p>
  3. </div>
  4. <div class="more">
  5.     <p>各分野の権威により編集された内容を無料で瞬時に検索できますので、調べものをする際に初めに参照するツールとして、ぜひご利用ください。</p>
  6. </div>

上記のような文章で、more ブロックを丸ごとちょん切る場合には以下のようなコードを HTML ヘッダ中に追加します。

文章の途中でちょん切るコード

  1. $(function() {
  2.     $('.more').expander({
  3. slicePoint : 0,
  4.         widow : 2,
  5.         expandEffect : 'fadeIn',
  6.         collapseTimer : 0,
  7.         userCollapse : true,
  8.         expandSpeed : '200',
  9.         expandText : ' [MORE ...]',
  10.         userCollapseText: ' [COLLAPSE]'
  11.     });
  12. });

ポイントは赤字の部分で、ちょん切りたいブロック（more）をセレクタにしてます。 そして、slicePoint オプションには 0 を指定することですべてが隠されます。

各オプションの説明

カンタンな使い方が分かったところで、以下に各オプションについて記します。

  • slicePoint

    スライスする文字数を指定します。半角／全角の区別はないようです。デフォルトは 100 文字になります。

  • widow

    すいません。このオプション、説明読んでもよく分かりませんでした。 タグの階層!? に関係してるのかなぁ。
    ちなみに、デフォルトの 4 から 2 にすることで期待する動作（日本語の場合）になりました･･･とだけ言っておきます (;￣∇￣A

  • expandText

    隠されたテキストを表示するためのアンカーテキストになります。デフォルトは「read more...」です。ここには <br /> や <span> などのタグを含めることができます。

    また、expandText で追加されるクラス名は「read-more」でスタイルすることができます。

  • userCollapseText

    表示されたテキストを隠すためのアンカーテキストになります。デフォルトは「[collapse expanded text]」です。ここには <br /> や <span> などのタグを含めることができます。

    また、userCollapseText で追加されるクラス名は「re-collapse」でスタイルすることができます。

  • collapseTimer

    隠されたテキストを自動的に非表示にする時間（ミリ秒）を指定できます。デフォルトは 0（自動的に隠しません）です。

  • expandEffect

    隠されたテキストが表示される際にフェードによるエフェクトを使用するかどうかのオプションです。フェードさせたい場合には「fadeIn」を指定します。デフォルトは「show」になります。

  • userCollapse

    表示されたテキストを手動で隠すことを許可するかどうかのオプションになります。 デフォルトは「true」です。このオプションで「false」を指定した場合、userCollapseText オプションのアンカーが表示されず、隠すことができないようにあんります。

  • expandSpeed

    隠されたテキストの表示スピードをミリ秒で指定します。

以上です。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード