さて、全記事数が、500 に達し、Site Map の見た目が鬱陶しい！そこで、ラベル毎に開いたり、閉じたりできるようにした。
方針は...
- JavaScript などを使わず、HTML だけで記述し、一つの投稿内で完結する。
- テンプレートを変更したくないので、css はインラインに置く。
- 具体的には、onclick イベントハンドラで項目内の表示/非表示を切り替える。
尚、onmouseover/onmouseout という属性を知り、これがなかなかいい！勧告バージョンが、HTML4.01 というのもありがたい。
コードの流れは...
- onclick で、id="xxx" で指定した部分を取得し、オブジェクトの display 状態を判定して、block/none を切り替える。
- マウスカーソルのスタイルを、pointer に指定し、イベントハンドラを記述する。
尚、イベントは over -> out の順に発生するので、onmouseover/onmouseout をセットで記述する必要有り。 - 開閉部分 id="xxx" を指定する。
尚、表示/非表示の最初の状態は、display で指定。
表示の場合、display:block; 非表示の場合、display:none;
<div onclick="obj=document.getElementById('xxx').style;
obj.display=(obj.display=='none')?'block':'none';">
<span style="cursor:pointer;
margin:5px; padding:3px; display:block; width:240px; text-align:left;
background-color:#eee; box-shadow:2px 2px 2px 2px #555;"
onmouseover="this.style.backgroundColor='#ccc'"
onmouseout="this.style.backgroundColor='#eee'"
>項目</span>
</div>
<div id="xxx" style="display:none; clear:both;">
<p>リストの内容</p>
</div>
そして、これがサンプル...
b.読書:数学
- 2014-08-10 "数学と論理をめぐる不思議な冒険" Joseph Mazur 著
- 2014-08-03 "連分数のふしぎ" 木村俊一 著
- 2014-06-29 "数について" Richard Dedekind 著
- 2014-06-22 "ピタゴラスの定理" Eli Maor 著
- 2014-06-15 "天秤の魔術師 アルキメデスの数学 " 林栄治, 斎藤憲 著
j.読書:文学
m.読書:政治
0 コメント:
コメントを投稿