フィルタリングユーザーインターフェースのCSSクラス
このフィルタリングインターフェースで使われているCSSクラスは3つあります。1番外側の<div>
に割り当てられているfilterBox
CSSクラスはフィルタリングユーザーインターフェース全体の外観に影響を与えます。詳しく言うと、背景色を淡い黄色に設定し、フィルタリングインターフェースの周囲に1ピクセル幅の黒い境界線をめぐらせ、パディングを追加します。
.filterBox { border: solid 1px black; padding: 5px; background-color: #ffd; margin-bottom: 15px; }
残りの2つのCSSクラスはexpandIcon
とcollapseIcon
です。これらのCSSクラスはfilterUItitle <div>
で使われています。これらのCSSクラスは主として適切な展開アイコンまたは折りたたみアイコンをfilterUItitle
要素に追加するためのものです。名前から分かると思いますが、expandIcon
クラスはfilterUItitle
バーの中に展開イメージを描画し、collapseIcon
クラスは折りたたみイメージを描画します(下のスクリーンショットを参照ください)。フィルタリングユーザーインターフェースが折りたたまれている状態では、filterUItitle <div>
のCSSクラスをexpandIcon
に設定して、展開アイコンが表示されるようにしなければなりません。逆にフィルタリングユーザーインターフェースが展開された状態では、このCSSクラスをcollapseIcon
に設定しなければなりません。
今回は、フィルタリングインターフェースがデフォルトで折りたたんだ状態になるようにしています。上記のHTMLでfilterUItitle <div>
のclass
属性をexpandIcon
に設定しているのはそのためです。jQueryを使って、このCSSクラスの設定を、フィルタリングユーザーインターフェースの展開時にexpandIcon
からcollapseIcon
に変更し、フィルタリングユーザーインターフェースの折りたたみ時にcollapseIcon
からexpandIcon
に変更します。
expandIcon
およびcollapseIcon
CSSクラスの定義は次のとおりです。
.expandIcon { background-image: url(Images/expand.jpg); background-position: left; background-repeat: no-repeat; padding-left: 18px; cursor: pointer; } .collapseIcon { background-image: url(Images/collapse.jpg); background-repeat: no-repeat; background-position: left; cursor: pointer; padding-left: 18px; }
次のスクリーンショットは、上記のHTMLとCSSを適用したフィルタリングユーザーインターフェースを示しています。フィルタリングユーザーインターフェースは展開された状態になっていますが、まだ展開イメージが表示されています。これを修正するため、jQueryを使って、ドキュメントのロード時にfilterUI <div>
を隠すことにします。
ページのロード時にフィルタリングユーザーインターフェースを折りたたむ
ブラウザによるユーザーインターフェースのダウンロードが終わったら、filterUI <div>
を折りたたむ必要があります。これを行うため、document
のready
イベントハンドラを作成し、hide()
関数を呼び出します。
<script type="text/javascript"> $(document).ready(function() { $('#filterUI').hide(); }); </script>
こうすれば、ページのロード時にフィルタリングユーザーインターフェースが折りたたまれた状態になります。