WebデザイナーのためのjQuery実践講座

jQuery&jKitで「タブ切り替え機能」を実装する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryとjKitプラグインを使って、実際に「タブ切り替え機能」を実装する方法について、解説致します。
講師:
04:43

字幕

このレッスンでは jQuery と jKit プラグインを使って実際に― タブ切り替え機能を実装していく 方法について解説致します まずは ダウンロードしてきた こちらの tabs-js ― というフォルダーの中に入っている こちらの index.html ファイルと― そして こちらの js フォルダーの中に 入っている― この javascript.js ファイルを エディターで開いて下さい そして これがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは前回までのレッスンのおさらいです 前回までのレッスンでは タブ切り替え機能を 実装する為の HTML のコーディングを― 行ってきました それがこちらの部分ですね 今回はこちらの部分に実際に jQuery と jKit プラグインを使って― タブ切り替え機能を実装してみたいと思います それでは こちらの javascript.js ファイルを エディターで開きます すると この様な画面になりましたね 今回 注目して頂きたい部分は こちらの部分となります こちらの一文でタブ切り替え機能を 実装しています それでは 順番に見ていきましょう まずは $() と書いてその中に section#seasonalMenu の直下にある― div と書いています この様に書く事でタブ切り替え機能を 実装する要素を指定する事が出来ます そして ドットと書いて jKit と書きます これは jKit プラグイン 専用の命令ですね そして その後に ( ) ;  と書いて処理を閉じます そして この jKit の括弧の中 いわゆる引数ですね その引数には二つの値を設定しています まず一つ目は実装したい jKit の機能を指定してあげます ここでは tabs としています この様にする事でタブ切り替えを 実装する事が出来ます そして その後に , と書いて その後に二つ目の引数を設定します この二つ目の引数ですが ここには そのタブ切り替え機能の― 設定項目を記述する事が出来ます 今回はこの様に波括弧で囲って 一つの設定項目 animation― というものを設定しています そして その animation の値には fade という値を入れています この様にする事で タブが切り替えられた時の― アニメーションエフェクトを 指定する事が出来ます ここに fade と入力している事によって タブ切り替えをして― コンテンツを切り替える際に 現在 表示されているコンテンツを― フェードアウト そして 次のコンテンツを フェードインさせてくる事が出来ます 以上で jQuery と jKit プラグインを使った― タブ切り替え機能の実装は完了となります この様に一文で完了するので とても簡単ですね ただ一点 こちらの部分にご注意下さい こちらの部分は #seasonalMenu が 付いた section に対して― タブ切り替え機能を実装するように見えますが 実はそうではなくて― 実際はタブ切り替え機能のタブとコンテンツを 含んでいた article タグありましたね その article タグのすぐ上にある親要素を 指定してあげる必要があります ですので 今回はこの ID seasonalMenu が付いた section タグのすぐ下にある― div タグを指定してあげる という形になります それでは この状態で index.html ファイルを― ブラウザで開いて確認してみましょう はい これがその index.html ファイルを ブラウザで開いた状態です では 下の方を見ていきます こちらの Seasonal Menu の部分ですね こちらの部分が先程 jQuery と jKit プラグインを使って― タブ切り替え機能を 実装した部分となっています まだレイアウト自体は綺麗に 整えられていませんが― jQuery と jKit プラグインを使って タブ切り替え機能を実装したので― そのタブ切り替えの動作だけは 行えるようになっています こちらの上の部分にあるのが そのタブの部分です クリックしてみましょう すると この様に下が 切り替わっているのが分りますね 後はこちらのレイアウトを CSS で 綺麗に整えてあげれば完了ですね その CSS のコーディング方法については 次のレッスンで解説していきますので そちらも合わせて参考にしてみて下さい 以上でレッスンは終了です 今回は jQuery と jKit プラグインを使って 実際に― タブ切り替え機能を 実装する方法について― 解説致しました

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。