from :: Asahikawa Hokkaido

passer-by198

primetime pencil

2012/06/28


Posted

「jQuery」と「jQuery UI」で HTML に彩りを添えよう…第5回「Effects/Slide」ボタンクリックでコンテンツを開閉

「Effects」公式ページ
jQuery UI Documentation / API / 1.8 / Effects  


「Effects」についての「Demos & Documentation」
jQuery UI Demos & Documentation / Effects  



過去記事で書いた…

 HTML要素を折りたたんでクリックで動的に開閉するJavaScript…複数設置可能



…を…「jQuery」で実現させてみましょう…

勿論…第3回「Accordion」でも実現できるでしょうが…

別途設定しなければなりませんし…

タイトル要素を使っていたりと…

引用記事やソースコードを開閉するには…

ちょっと…大袈裟過ぎます…なので…

第2回「Button」と「Effects」の中の「Slide」を使って実装するのが良いでしょう…

尚…少量の JavaScript だけで HTML 要素の開閉をしたい方は…

上記の過去記事がお奨めです…

導入にあたっては事前に…

第2回「Button」のカスタムコードも設定しておいて下さい…

先ずは…ボタンクリックでコンテンツを開閉するためのカスタムコードです…

見易さ重視で改行を入れていますが…

実装では1行で記述しています…

「Slide」用カスタムコード



クラス名は…お好きなクラス名で OK ですが…

それぞれ固有である必要があります…

各行の意味は…

クラス名「collapse0」のボタンをクリックすると…

クラス名「collapse10」の HTML 要素をスライド エフェクトで開閉(.slideToggle)…

…(中略)…仮に…10個設定していますが…11個目は…

「collapse20」に対応するのは「collapse30」ってな具合です…

ご自身の必要な分だけ設定して下さい…

最後の行は… 複数の HTML 要素を…

一括で開閉するために設定しています…

クラス名「toggleAll」をクリックすると…

クラス名「toggle」をスライド エフェクトで開閉(.slideToggle)…

…ってな感じですが…

下記「サンプルのマークアップコード」を見れば解ると思いますが…

開閉したい HTML 要素側に…

全てクラス名「toggle」を設定して使います…

これも…複数必要ならば「toggleAll1」「toggle1」などとして設定して下さい…

因みにこの記事中には…19個の開閉クラス名と…

1個の一括開閉クラス名が使われています…

次に…上記の過去記事と同様の HTML で…

サンプルを作成してみましょう…

過去記事と対比させながら色々と弄ってみて下さい…

タイトル属性は記述していませんので…

ツールチップは表示されません…

HTML 要素はできるだけシンプルに記述しています…

Example for Collapse / Toggle All
[0] (クリックで9個全てのサンプルの HTML 要素が開閉)

Example for Collapse / Text
[1] (テキストをクリックで開閉します)

Example for Collapse / Ordered List
[2] (順序付きリストをクリックで開閉します)

Example for Collapse / Blockquote
[3] (引用をクリックで開閉します)

Example for Collapse / Multiple
[4] (2つの異なる要素をクリックで開閉します)

Example for Collapse / Video-object
[5] (YouTube の埋め込み Player をクリックで開閉します)

Google Chrome, Japan
[6] (YouTube の埋め込み iframe を画像クリックで開閉します)

Example for Collapse / Pre
[7] (整形済みテキストをクリックで開閉します)

Example for Collapse / Table
[8] (表をクリックで開閉します)

上記サンプルのマークアップコードです…

構造を理解する上で不必要な部分は一部省略してあります…

[0] ボタンのマークアップコード


[1] ボタンのマークアップコード


[2] ボタンのマークアップコード


[3] ボタンのマークアップコード


[4] ボタンのマークアップコード


[5] ボタンのマークアップコード


[6] ボタンのマークアップコード


[7] ボタンのマークアップコード


[8] ボタンのマークアップコード



尚…通常リンクと区別するために…

上記ボタンのように…自作アイコンで実装しています…

上記過去記事と第2回「Button」をお読み下さい…

最後に…余談になりますが…

かなり頻繁に使う機能だと思われます…ので…

雛形を定型文管理ソフトに登録しておくとお便利ですよ…

 Clibor / クリップボード履歴と定型文管理ソフト



以上です…お疲れ様でした…

こちらの記事も…お薦めです…

 jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト






0 Comments :

「jQuery」と「jQuery UI」で HTML に彩りを添えよう…


「導入」「Button」「Accordion」「Tabs」「Effects/Slide」
「Progressbar」「Dialog」「Tooltip」「Menu」
「Extra」 / 公式「Widgets」以外の「jQuery UI」スクリプト
Blogger Template Customize Universal / INDEX

Blogger テンプレート・カスタマイズ / 全般を解説
高速化・最適化対策の結果と備忘録