SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 このフィルタリングインターフェースで使われているCSSクラスは3つあります。1番外側の<div>に割り当てられているfilterBoxCSSクラスはフィルタリングユーザーインターフェース全体の外観に影響を与えます。詳しく言うと、背景色を淡い黄色に設定し、フィルタリングインターフェースの周囲に1ピクセル幅の黒い境界線をめぐらせ、パディングを追加します。

.filterBox 
{ 
   border: solid 1px black; 
   padding: 5px; 
   background-color: #ffd; 
   margin-bottom: 15px; 
} 

 残りの2つのCSSクラスはexpandIconcollapseIconです。これらの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>を折りたたむ必要があります。これを行うため、documentreadyイベントハンドラを作成し、hide()関数を呼び出します。

<script type="text/javascript"> 
   $(document).ready(function() { 
      $('#filterUI').hide();
   }); 
</script> 

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

次のページ
filterUItitle <div>のクリック時に折りたたみ/展開状態を切り替える

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Scott Mitchell(Scott Mitchell)

http://www.4guysfromrolla.com/ScottMitchell.shtml

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4604 2009/12/14 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング