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

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

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


過去記事で書いた…

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

「Slide」用カスタムコード

$(".collapse0").click(function(){$(".collapse10").slideToggle()});
$(".collapse1").click(function(){$(".collapse11").slideToggle()});
$(".collapse2").click(function(){$(".collapse12").slideToggle()});
$(".collapse3").click(function(){$(".collapse13").slideToggle()});
$(".collapse4").click(function(){$(".collapse14").slideToggle()});
$(".collapse5").click(function(){$(".collapse15").slideToggle()});
$(".collapse6").click(function(){$(".collapse16").slideToggle()});
$(".collapse7").click(function(){$(".collapse17").slideToggle()});
$(".collapse8").click(function(){$(".collapse18").slideToggle()});
$(".collapse9").click(function(){$(".collapse19").slideToggle()});
$(".toggleAll").click(function(){$(".toggle").slideToggle()});

クラス名は…お好きなクラス名で 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] (クリックで９個全てのサンプルの HTML 要素が開閉)

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

Example for Collapse / Text_line1
Example for Collapse / Text_line2
Example for Collapse / Text_line3

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

1. Example for Collapse / Ordered List_line1
2. Example for Collapse / Ordered List_line2
3. Example for Collapse / Ordered List_line3

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

Example for Collapse / Blockquote_line1
Example for Collapse / Blockquote_line2
Example for Collapse / Blockquote_line3

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

Example for Collapse / Text_line1
Example for Collapse / Text_line2
Example for Collapse / Text_line3

Example for Collapse / Multiple-Blockquote2_line1
Example for Collapse / Multiple-Blockquote2_line2
Example for Collapse / Multiple-Blockquote2_line3

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

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

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

<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>

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

戸田政康(T氏)から民主党議員への政治献金
 
年度
 
古川元久
 
枝野幸男
 
野田佳彦
 
小宮山洋子
 
手塚仁雄
 
原口一博
 
 
平成15年
 
110.000
 
120.000
 
0
 
0
 
0
 
1.000.000
 
 
平成16年
 
120.000
 
120.000
 
0
 
0
 
0
 
120.000
 
 
平成17年
 
120.000
 
120.000
 
10.000
 
0
 
0
 
120.000
 
 
平成18年
 
0
 
120.000
 
0
 
0
 
66.000
 
120.000
 
 
平成19年
 
100.000
 
120.000
 
0
 
0
 
102.000
 
120.000
 
 
平成20年
 
120.000
 
200.000
 
0
 
20.000
 
118.000
 
120.000
 
 
平成21年
 
120.000
 
120.000
 
0
 
0
 
118.000
 
120.000
 
 
平成22年
 
120.000
 
0
 
0
 
0
 
118.000
 
120.000
 
 
合計
 
810.000
 
920.000
 
10.000
 
20.000
 
522.000
 
1.840.000
 

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

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

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

<span class="buttons toggleAll"><a class="south">Example for Collapse / <span style="color:red;">Toggle All</span></a></span>
[0] (クリックで９個全てのサンプルの HTML 要素が開閉)

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

<span class="buttons collapse1"><a class="south">Example for Collapse / Text</a></span>
[1] (テキストをクリックで開閉します)
<div class="collapse11 toggle" style="display:none">
Example for Collapse / Text_line1
Example for Collapse / Text_line2
Example for Collapse / Text_line3
</div>

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

<span class="buttons collapse2"><a class="south">Example for Collapse / Ordered List</a></span>
[2] (順序付きリストをクリックで開閉します)
<ol class="collapse12 toggle" style="display:none">
<li>Example for Collapse / Ordered List_line1</li>
<li>Example for Collapse / Ordered List_line2</li>
<li>Example for Collapse / Ordered List_line3</li>
</ol>

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

<span class="buttons collapse3"><a class="south">Example for Collapse / <span style="color:#1E90FF;">Blockquote</span></a></span>
[3] (引用をクリックで開閉します)
<blockquote class="collapse13 toggle" style="display:none">
Example for Collapse / Blockquote_line1
Example for Collapse / Blockquote_line2
Example for Collapse / Blockquote_line3
</blockquote>

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

<span class="buttons collapse4 collapse5"><a class="south">Example for Collapse / <span style="color:#1E90FF;">Multiple</span></a></span>
[4] (２つの異なる要素をクリックで開閉します)
<div class="collapse14 toggle" style="display:none">
Example for Collapse / Text_line1
Example for Collapse / Text_line2
Example for Collapse / Text_line3
</div>
<blockquote class="collapse15 toggle" style="display:none">
<span style="color:#1E90FF;">Example for Collapse / Multiple-Blockquote2_line1
Example for Collapse / Multiple-Blockquote2_line2
Example for Collapse / Multiple-Blockquote2_line3</span>
</blockquote>

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

<span class="buttons collapse6"><a class="south">Example for Collapse / <span style="color:#8AC75A;">Video-object</span></a></span>
[5] (YouTube の埋め込み Player をクリックで開閉します)
<div class="collapse16 toggle" style="display:none">
<object width="560" height="315">
…(中略)…
</object>
</div>

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

<img class="collapse7" alt="Google Chrome, Japan" border="0" height="48" width="64" src="画像 URL" />
[6] (YouTube の埋め込み iframe を画像クリックで開閉します)
<div class="collapse17 toggle" style="display:none">
<iframe width="560" height="315" src="動画 URL" frameborder="0" allowfullscreen></iframe>
</div>

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

<span class="buttons collapse8"><a class="south">Example for Collapse / <span style="color:#F15B55;">Pre</span></a></span>
[7] (整形済みテキストをクリックで開閉します)
<pre class="collapse18 toggle" style="display:none">
…(中略)…
</pre>

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

<span class="buttons collapse9"><a class="south">Example for Collapse / <span style="color:#F15B55;">Table</span></a></span>
[8] (表をクリックで開閉します)
<pre  class="collapse19 toggle" style="display:none">
<table border cellpadding="2" bgcolor="#6495ed">
…(中略)…
</table>
</pre>

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

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

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

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

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

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

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


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

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

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

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery / Extra JavaScript Current-Label : jQuery