nablarch.ui.Collapsible Class
開閉可能領域
このウィジェットは、画面の特定の領域を開閉操作可能とするものである。 例えば、メニューのサブ階層や、詳細情報などのように、必要に応じて表示・非表示を 切り替えたい要素に対して適用する。
マークアップ仕様
開閉を制御させたい要素にマーカCSSクラス nablarch_Collapsible を指定し、 その -content オプションに開閉対象となる要素を指し示すセレクタ式を指定する。
マーカCSSを適用した要素の先頭には、アイコンが挿入される。 それをクリックすることで、内容の表示・非表示要素を切り替えることができる。
また、要素の開閉状態はフォーム要素に自動的に保持される。 NAFのウィンドウスコープと連動させることにより、画面間の遷移において、 各要素の開閉状態を自動的に保持することができる。 (開閉状態を保持するフォーム要素のname属性、value属性をそれぞれ -name オプション、 -value オプションに指定する。)
<h2 class="nablarch_Collapsible
-content #userInfoBlock
-name formdata.blockOpenStatus
-value userInfoBlock">
会員情報
</h2>
<div id="userInfoBlock">
...
</div>
<h2 class="nablarch_Collapsible
-content div.purchaseHistory
-name formdata.blockOpenStatus
-value purchaseHistory
-closed">
購入履歴
</h2>
<div id="purchaseHistory1" class="purchaseHistory">
...
</div>
<div id="purchaseHistory2" class="purchaseHistory">
...
</div>以下は、このウィジェットのオプションの一覧である。
-content (セレクタ式): 開閉対象要素を指定するセレクタ式(必須）
-name (属性値): 画面内の開閉領域の状態を保持するフォーム要素のname属性(必須)
基本的に任意の文字列で構わないが 開閉状態を画面遷移間で保持するには適切なウィンドウスコーププレフィックスから 開始させる必要がある。
開閉状態を画面間で引き継ぐ場合には、開閉状態のステータスを連携するための hiddenタグ(n:plainHidden)を該当のformに追加すること。 hiddenタグのname属性には、本属性値( -name属性値 )に設定した値を指定する。 ※開閉要素が複数あった場合でも、 -name属性値 は全て同一値とし、 hiddenタグは1つのみ用意すれば良い。
<n:form windowScopePrefixes="formdata">
<%-- 画面間で開閉状態を引き継ぐために必要となるhiddenタグ --%>
<n:plainHidden name="formdata.blockOpenStatus" />
<%-- 開閉機能要素１ --%>
<%-- 開閉機能要素２ --%>
</n:form>-value (属性値): 領域の開閉状態を保持するフォーム要素のvalue属性(必須)
開閉対象を一意に特定する文字列を指定する。(ID属性など)
-open: / -closed: この領域の初期開閉状態を指定する。 -open, -closed のいずれも指定しなかった場合は開いた状態で表示される。 なお、このクラスは現在の開閉状態に応じて自動的に追加、更新される。
Item Index
Methods
Properties
- $content
- closeRequstsKey static
- event static
- hasIcon
- initClosed
- name
- name
- widgetType static
Methods
$state
()
JQuery
現在の開閉状態を保持するフォーム要素を取得する。
Returns:
現在の開閉状態を保持するフォーム要素
close
()
対象領域を閉じる。 すでに閉じている場合はなにもしない。
Collapsible
-
element -
[opts]
コンストラクタ関数
Parameters:
-
elementHTMLElement展開ボタンのDOM要素
-
[opts]Object optional以下のオプションを保持するオブジェクト closed: (
Boolean) 初期表示時に閉じている content: (jQuery|String) 展開対象要素のjQuery結果セットもしくはセレクタ式 name: (String) 領域の開閉状態を保持するフォーム要素のname属性 value: (String) 領域の開閉状態を保持するフォーム要素のvalue属性
Returns:
インスタンス
isClosed
()
Boolean
フォーム要素上に保持されたステータスをもとに現在の開閉状態を返す。
Returns:
現在のステータスが閉じている場合はtrue そうでなければfalse
open
()
対象領域を開く。 すでに開いている場合はなにもしない。
render
()
chainable
フォーム要素上に保持されたステータスに合わせて開閉状態を変更する。
具体的には以下の2つの処理を行う。
開閉ボタン (マーカCSS nablarch_Collapsible を指定した要素) のCSSを切り替える。
各開閉対象要素 ($content内の各要素) に対して以下の処理を行う。
a. 各要素の data-nablarch_Collapsible_closeRequstsKey 属性を取得する。
当該属性がnullであれば空のオブジェクトを設定する。b1. 対象を閉じる場合は、a.で取得したオブジェクトに対して
-valueオプション値のキーを登録する。b2. 対象を開く場合は、a.で取得したオブジェクトに対して
-valueオプション値のキーを削除する。c. この処理の結果、a.で取得したオブジェクト上にキーが1つも存在しなければ
この要素を表示し、そうでなければ非表示とする。
なお、上記のような仕様としているのは、以下の理由による。
Collapsibleが入れ子になっている場合は、開閉対象要素が複数のCollapsibleから 開閉の指示を受ける。 このとき、開閉対象要素は、1つでも閉じるように指示しているCollapsibleが 存在していれば閉じる必要がある。
revertState
()
現在の開閉状態が初期状態に戻ったことをフォームに記録する。 (=現在の開閉状態が初期状態から反転したことを表すフォーム要素を削除する。)
toggle
()
chainable
現在の開閉状態を反転させる。
Properties
$content
JQuery
開閉対象の要素
closeRequstsKey
String
final
static
開閉対象要素の状態を保持するdata属性のキー名(定数)
Default: Collapsible.widgetType + "_closeRequstsKey"
event
Object
final
static
イベント定義
Collapsible.event = {
"click" : "toggle"
};hasIcon
Boolean
開閉する要素にアイコンが存在するかどうか。
initClosed
String
初期開閉状態
name
String
開閉ステータスを保持するinput要素のname属性値
name
String
開閉ステータスを保持するinput要素のvalue属性値
widgetType
String
final
static
ウィジェット識別子
Default: "nablarch_Collapsible"