jQueryでWeb Formsアプリケーションのフィルタリングユーザーインターフェイスを作成する（前編）

ユーザーごとに折りたたみ／展開の状態を記憶させる方法

フィルタリングユーザーインターフェースのCSSクラス

　このフィルタリングインターフェースで使われているCSSクラスは3つあります。1番外側の<div>に割り当てられているfilterBoxCSSクラスはフィルタリングユーザーインターフェース全体の外観に影響を与えます。詳しく言うと、背景色を淡い黄色に設定し、フィルタリングインターフェースの周囲に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およびcollapseIconCSSクラスの定義は次のとおりです。

.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> 

　こうすれば、ページのロード時にフィルタリングユーザーインターフェースが折りたたまれた状態になります。