Blog

jQueryでマテリアルデザイン風の一覧からの詳細表示

2015.10.13Cat:jQuery デザイナー

マテリアルデザインでは一覧から詳細情報の画面に遷るときに、

選択した一覧の中の要素が画面いっぱいに広がっていくように詳細の画面が表示されることが推奨されています。

マテリアルデザインでなくても、スマホのアプリなどでは見かける機会は増えてきていると思います。

 

この動きをjQeuryで表現するにはどうすればいいのか、検討してみました。

 

検討して作ってみたものがこちら↓

DEMO

 

方法

今回検討してみた方法では、以下の様な手順を踏みます。

  1. 一覧のリンクをクリックしたときに、リンク先のページ内のコンテンツをAjaxで取得
  2. クリックした要素の位置と大きさを取得し、その上に、Ajaxで取得したコンテンツを被せる
  3. 被せた要素を画面いっぱいに広げ、URLにハッシュ(#で始まるページ内のリンク)を追加
  4. 戻るボタンが押されたら、詳細の要素を一覧の元の位置に戻して、詳細の要素を削除

 

コードは以下のとおり

HTML(head内)

今回はjQueryに加えて、戻るボタンの動きをハッシュから読み取るために「jquery.ba-hashchange.min.js」という以下のページでダウンロードできるjQueryプラグインを読み込んでいます。

Ben Alman >> jQuery hashchange event

このプラグインを使うことで、以下の様な形式で、ハッシュの変更があったタイミングでスクリプトを実行することができます。

ただ、元のコードだと、比較的新しいjQueryでユーザーエージェントの判定でエラーが出るため、

以下のコードをプラグインのコメントの後に追加し、

本体のコードの以下の部分を変更します

 

 

HTML(body内)

一覧のHTMLコードは以上のようなコードです。

 

CSS

CSSで一覧と詳細のスタイルを設定します。

ここでのポイントは、

Ajaxで読み込まれる予定の.detailSectionの要素にactiveというクラスがあった場合は、

一覧と同じような見た目で表示しておくことです。

 

jQuery

 

ポイントは、実際にはページ移動せずに、移動しているように見せることで、

ブラウザの戻るボタンが押されたときに、一覧へ戻るアニメーションを実現することです。

実際のページに利用する時はもう少し調整が必要だと思いますが、

ヒントとしてご活用ください。

 

参考にさせていただいたサイト

jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ | webOpixel

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ