もっと見る display more

「もっと見る」を実装するためのライブラリです。

• sample 1
• sample 2
• sample 3
• sample 4
• sample 5
• sample 6
• sample 7
• sample 8
• sample 9
• sample 10
• sample 11
• sample 12
• sample 13
• sample 14

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.display-more.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

<script type="text/javascript" src="jquery.display-more.js"></script>

【JavaScript】

$(function() { $('.sample').displayMore(); });

【HTML】

<ul class="sample"> <li>sample 1</li> <li>sample 2</li> <li>sample 3</li> <li>sample 4</li> <li>sample 5</li> <li>sample 6</li> <li>sample 7</li> <li>sample 8</li> <li>sample 9</li> <li>sample 10</li> <li>sample 11</li> <li>sample 12</li> <li>sample 13</li> <li>sample 14</li> </ul>

オプション

以下の設定が可能です。

オプション名	初期値	説明
itemElement	'> *'	開閉を行う子要素（高さを計算する要素）
showNumber	5	最小で表示する子要素の個数
animateMode	'slide'	アニメーション効果 設定できる値：     'slide' = スライド     'none' = なし
animateDuration	400	アニメーション速度（ミリ秒）
animateEasing	'swing'	アニメーションイージング
openText	'+ open'	開閉ボタンの閉じているときの文字列
closeText	'- close'	開閉ボタンの開いているときの文字列
buttonClass	'display- more-button'	開閉ボタンのclass名
openButtonClass	'open'	開閉ボタンの開いた時のclass名
openAreaClass	'open'	開閉対象要素の開いた時のclass名
outputMode	'after'	開閉ボタンの出力先 設定できる値：     'after' = 指定セレクターの後に配置     'before' = 指定セレクターの前に配置     'append' = 指定セレクターの子要素として最後に配置     'prepend' = 指定セレクターの子要素として最初に配置     'none' = 配置しない

$(function() { $('.sample').displayMore({ itemElement : '> li', showNumber : 2 }); });

メソッド

以下のメソッドが実行可能です。

メソッド名	説明
$element.changeDisplay(mode, callback)	表示・非表示の切り替え。 第一引数（必須）には、表示するか非表示にするかの指定、第二引数（任意）には表示または非表示した後に実行する関数を指定できる。 設定できる第一引数の値：     'show' = 表示する     'hide' = 非表示にする
$element.showDisplay(directMode, callback)	表示を行う。 第一引数（任意）はアニメーションを無効にするかどうか、第二引数（任意）には表示した後に実行する関数を指定できる。
$element.hideDisplay(directMode, callback)	非表示を行う。 第一引数（任意）はアニメーションを無効にするかどうか、第二引数（任意）には非表示した後に実行する関数を指定できる。

$(function() { var $sample = $('.sample').displayMore(); $sample.showDisplay(); });