Accordion
Accordionは必要な時だけ説明を表示出来ます。不要な時は説明が表示されないため読み飛ばす事が出来、訪問者にストレスを与えないように出来ます。例えば、以下のように内容1、2、3をそれぞれクリックするとその説明を表示させる事が出来ます。
「jQueryの利用」でプラグインを利用出来るようになっていれば特に別途ダウンロードの必要はなく、<head>と</head>の間に以下の記述を追加します。
【Accordionを利用するためのhead内スクリプト例(jQuery UIから引用)】
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
又、<body>と</body>の間で実際に配置する部分に以下を記述すると記述した部分にAccordionが表示されます。
【Accordionを利用するためのbody内html例】
<div id="accordion">
<h3>
内容1</h3>
<div><p>
内容1についての説明</p></div>
<h3>
内容2</h3>
<div><p>
内容2についての説明</p></div>
<h3>
内容3</h3>
<div><p>
内容3についての説明</p></div>
</div>
赤字部分は自分のホームページに沿った内容に書き換えて下さい。
Dialog
Dialogは以下のようにポップアップで表示され、ページを開いた時に訪問者に注意を与える場合に使えます。右上の×をクリックする事で消す事が出来ます(以下は参考画像を表示しているだけのため消せません)。
「jQueryの利用」でプラグインを利用出来るようになっていれば特に別途ダウンロードの必要はなく、<head>と</head>の間に以下の記述を追加します。
【Dialogを利用するためのhead内スクリプト例(jQuery UIから引用)】
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
又、<body>と</body>の間で以下を記述するとDialogが表示されます。
【Dialogを利用するためのbody内html例】
<div id="dialog" title="
jQueryのDialogプラグイン">
<p>
プラグインを説明するために表示しています。右上の×をクリックして閉じて下さい。</p>
</div>
赤字部分は自分のホームページに沿った内容に書き換えて下さい。
Show
Showは最初は説明を表示せずに訪問者がクリックした時だけ表示する事が出来ます。以下でエフェクトを選択して「クリック」をクリックするとその内容が表示されます。
クリック
「jQueryの利用」でプラグインを利用出来るようになっていれば特に別途ダウンロードの必要はなく、<head>と</head>の間に以下の記述を追加します。
【Showを利用するためのhead内スクリプト例(jQuery UIから引用)】
<script>
$(function() {
function runEffect() {
var selectedEffect = $( "#effectTypes" ).val();
var options = {};
if ( selectedEffect === "scale" ) {
options = { percent: 100 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 280, height: 185 } };
}
$( "#effect" ).show( selectedEffect, options, 500, callback );
};
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
$( "#button" ).click(function() {
runEffect();
return false;
});
$( "#effect" ).hide();
});
</script>
又、<body>と</body>の間で実際に配置する部分に以下を記述すると記述した部分にShowが表示されます。
【Showを利用するためのbody内html例】
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">
jQueryの説明</h3>
<p>
説明を記述します。</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="highlight">High</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
</select>
<a href="#" id="button" class="ui-state-default ui-corner-all">
クリック</a>
赤字部分は自分のホームページに沿った内容に書き換えて下さい。
Tabs
Tabsはタブをクリックするとその内容を切り替える事が出来ます。以下でタグをクリックするとその内容が表示されます。内容を説明する部分にはリンクも記述出来るため、タブで切り替えてリンク先を選択させるようにしてガイドの役割をさせる事も出来ます(以下はクリックするとページの先頭に飛びます)。
「jQueryの利用」でプラグインを利用出来るようになっていれば特に別途ダウンロードの必要はなく、<head>と</head>の間に以下の記述を追加します。
【Tabsを利用するためのhead内スクリプト例(jQuery UIから引用)】
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
又、<body>と</body>の間で実際に配置する部分に以下を記述すると記述した部分にTabsが表示されます。
【Tabsを利用するためのbody内html例】
<div id="tabs">
<ul>
<li><a href="#tabs-1">
内容1</a></li>
<li><a href="#tabs-2">
内容2</a></li>
<li><a href="#tabs-3">
内容3</a></li>
</ul>
<div id="tabs-1">
<p>内容1についての説明</p>
</div>
<div id="tabs-2">
<p>内容3についての説明</p>
<p>段落分けして記述も可能</p>
</div>
<div id="tabs-3">
<li><a href="#" style="color:blue;">リンクも可能</a></li>
<li><a href="#" style="color:blue;">リンクも可能</a></li>
</div>
</div>
赤字部分は自分のホームページに沿った内容に書き換えて下さい。
又、以下のように最初は表示を隠しておいて、クリックすると内容を表示させる事も出来ます。同じタブをもう1度クリックすると表示を隠せます。
上記はJavaScriptを以下のようにしています。
【Tabsで最初は表示を隠すスクリプト例例(jQuery UIから引用)】
<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true
});
$( "#tabs" ).tabs({ active: false });
});
</script>
Menu
Menuは選択肢を選ぶ事で選択した動作をさせる事が出来ます。又、以下の「動画」の部分のようにカーソルを合わせると追加のメニューを表示する事も出来ます。以下ではページの先頭にリンクしていますが、実際にはスクリプト等で動作を実行させたり、他のページにリンクしたり出来ます。
「jQueryの利用」でプラグインを利用出来るようになっていれば特に別途ダウンロードの必要はなく、<head>と</head>の間に以下の記述を追加します。
【Menuを利用するためのhead内スクリプト例(jQuery UIから引用)】
<script>
$(function() {
$( "#jquery_menu" ).menu();
});
</script>
又、<body>と</body>の間で実際に配置する部分に以下を記述すると記述した部分にMenuが表示されます。
【【Menuを利用するためのbody内html例】
<ul id="jquery_menu">
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>セーブ</a></li>
<li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>ズームイン</a></li>
<li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>ズームアウト</a></li>
<li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>プリント...</a></li>
<li>
<a href="#">動画</a>
<ul style="width:100px">
<li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>巻き戻し</a></li>
<li><a href="#"><span class="ui-icon ui-icon-stop"></span>停止</a></li>
<li><a href="#"><span class="ui-icon ui-icon-play"></span>再生</a></li>
<li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>次へ</a></li>
</ul>
</li>
</ul>
赤字部分は自分のホームページに沿った内容に書き換えて下さい。<li>タグを羅列してその中にリンクを張る等の動作を記述しますが、アイコンを使う場合は<span class="クラス">で各アイコンを指定します。
