 |
| アコーディオンメニュー |
clickしたら内容が表示されるインターフェースをアコーディオンメニューと言います。 DOMを使って実装すると面倒です。なぜならメニューの数だけidをつけるので煩雑です。しかし、 jQueryを使えばすっきり実装できます。 HTMLです。 <!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <title>sample</title> <link type="text/css" rel="stylesheet" href="style.css" /> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="program.js"></script> </head> <body> <dl id="panel"> <dt><img src="arrow_right.png" style="vertical-align:middle;"> <u>ラズベリーパイって何？</u></dt> <dd>名刺サイズの大きさと言われていますが、実際SUICAカードと同じでした。 こんな小さいボードがコンピュータなんてちょっと信じられません。</dd> <dt><img src="arrow_right.png" style="vertical-align:middle;"> <u>ラズベリーパイにできること</u></dt> <dd>データベースを使ったサーバーでJavaやPHPで 開発したコードのデバッグは本番サーバーではできません。 デバッグ用のサーバーを構築して動作確認後に本番サーバーに転送します。</dd> <dt><img src="arrow_right.png" style="vertical-align:middle;"><u> 制御装置として使う</u></dt> <dd>ラズベリーパイにはいろいろな入出力があります。 これらを使ってマイコンでは実現不可能な制御装置を作ることができます。</dd> </dl> </body> </html><dt>でメニュー項目を設定します。 <dd>で内容を設定ます。 CSSです。 #panel {
}
#panel > dt {
border-bottom: solid 1px #00c;
padding: 10px;
cursor: pointer;
background-color: #ddf;
color: black;
font-weight: bold;
}
#panel > dd {
border: solid 1px #ccc;
margin: 0px;
padding: 10px;
}
特に難しいことはやっていません。JavaScriptです。 jQuery(function($) {
$('#panel > dd').hide();
$('#panel > dt')
.click(function() {
var dd = $('+dd', this);
if (dd.css('display') === 'block') {
dd.slideUp(1000);
(this).innerHTML = strClose((this).innerText);
} else {
dd.slideDown(1000);
(this).innerHTML = strOpen((this).innerText);
}
});
});
function strClose(caption){
var str = '<img src=\"arrow_right.png\" style=\"vertical-align:middle;\">' +
'<u>' + caption + '</u>'
return str;
}
function strOpen(caption){
var str = '<img src=\"arrow_bottom.png\" style=\"vertical-align:middle;\">' +
'<u>' + caption + '</u>'
return str;
}
<dt>要素をクリックしたとき、その次の<dd>要素に対して表示・非表示に応じてslideUpまたはslideDownの処理をします。また、 赤で囲った表示がないとクリックしてもらえないかもしれないので、画像を作って表示しています。まだ、ダメ押しでアンダーラインを付けています。 |
ラズベリーパイって何？