jQueryプラグイン活用講座

ボタンクリックでページを切り替える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インターフェイスのボタンクリックで、ページを切り替えます。
講師:
07:40

字幕

このレッスンではHTMLドキュメントの中のbody 要素の中を ページ分けしてpagination を作ってくれるプラグインsimplepagination のインターフェイスをきちんと動く様にjquery のジャバスクリプトコードを書きます今開いている HTMLドキュメントこれは pagination のインターフェイスを表示し1ページ目を出すと言うデザインまで出来ていますどういう構造になっているかと言うとまず body 要素なんですがページとして分けたいものをdiv 要素で設定していますそのdiv 要素は共通にselection と言うclass が割り当てられていてもう一方で今度は id ですね各ページを区別する為にpage_1_ 2 と連番が振ってありますこれが全部で7ページありましてここまでですねそのページの下にインターフェイスを入れるdiv 要素 この div 要素にはclass として pagination と言うのが設定されていますそしてこれらに対してjquery のジャバスクリプトコードとそれから style の設定がしてありますjquery の方は先ずドキュメントが読み込まれた時最初に実行される jquery のおなじみの書き方の中にセレクター 先ほどインターフェイスに設定してあったpagination と言うclass を selector にしてpagination と言うメソッドを呼び出しますこの時 引数としてオブジェクトを渡す必要がありますそのオブジェクトと言うのは全部で何ページありますよと言うプロパティーitems で今回は7なので7と言う指定がしてありますこれで7ページ分のインターフェイスが表示されます一方でこれだけでは1ページから7ぺージの内容 テキストが全て表示されてしまいますそれを1ページだけ表示する為に共通に設定してある classselection に対してcss でdisplay を非表示にするnone とと言う設定になっていますその上で改めて1ページ目だけ displayをブロックにする事によって表示していると言う事になるわけです現在の状態を確認しましょう「ファイル」から「ブラウザでプレビュー」です1ページ目の内容が表示されインターフェイスが出ていますけれどこのインターフェイスはジャバスクリプトコードを書かないと実際には機能しません1ページ目のまま変わりませんねこれを機能する様にジャバスクリプトコードを設定したいと思います書き加えるのは まず引数に渡すオブジェクトsettings のプロパティーですこの中にクリックししたらどうこうするよと言う処理を加えますonpageClick ですこれがプロパティーの名前でそして処理したい関数ですクリックした時に処理したいここに関数を書きますまだ定義してませんがshowPage と言う風にしたいと思いますそしてこの showPage をこの後に定義しますfunction c が抜けてましたねそして showPage「コピー」を持ってきましょうタイプミスをしない様にそしてこのコールバックと言いますけれども呼び出される関数は 引数を1つ受け取りますページ番号ですどの item が何番目の item がクリックされたかと言う番号を受け取りますので ではこれをcurrentPage と言う 引数名にしますそしたらこのページが表示したいページですと言う事なのでそのページを指定するにはこの id ですよねid を指定すればいいのでpage_番号という風に作ればいいのでこれを変数に設定しますpage と言う変数でpage_加える事の currentPage数値ですけれども 文字とプラスをすると文字が繋がりますので例えばここに1が渡されればpage_1と言う風になりますそしてこのページを表示する前に一旦全て表示をなくしますと言う事で全てに共通にpage に設定されている classselection これをセレクターに定めますselections ですねそしてこれに対して消えろと言う事でhide と言うメソッドを呼び出しますその上で改めて今度はこの page ですね文字列で作りましたこの page に対してhide の反対 show と言うメソッドを呼び出せば指定されたページ クリックしたページが表示されると言う事になります変数ページに入れる文字列ですがこれは id ですので頭にハッシュマーク #いわゆる 井桁を付けなければいけませんねその上で「保存」をしてブラウザーで確かめましょうブラウザーウィンドウをリロードします6つの最初の表示は変わりませんけれどもNext と言う事で 2ページ3ページページの番号をクリックすれば6ページ7ページPrevで前に戻る事が出来ますそして1ページと大丈夫ですねもう1つだけ手を加えましょうこの showPage のやっている事は全部のページを一旦消して目的のページだけ表示すると言う事なんですがそれはこのstyle に設定している事と一緒ですねselection を全て非表示にしその上で page 1 を表示してますだったらページ1を出せとこの showPage を呼び出しても大丈夫ですね 同じ事ですと言う事なので この style 要素はコメントアウトします無いものとしてしまいましょう無くてもpagination の呼び出しをした後にshow page 1 を出せと言う事でジャバスクリプトコードで全部の設定が終わってしまってstyle 要素が要らなくなります確認しましょう「ファイル」を「保存」してブラウザウィンドウをリロードします先ほどと動きが変わらなければ言い訳なんで変わりませんね ちゃんと5ページ 4ページPrev そして 1ページと言う風にコントロールが効きましたこのレッスンでは プラグインsimplepagination のインターフェイスを動作させましたボタンをクリックする事によってページを切り替えると言う部分ですねその為にはこのメソッドに渡すオブジェクトにonPageClick と言うプロパティーで 関数を指定しますその関数はクリックしたページの番号が分かりますのでこの id 番号の設定と合わせる様に 文字列を作りそして selection 全てのページを一旦 hide で消した後目的のページだけ改めて表示すると言う事でcss の設定も同じ事をしていたのでそれは script の呼び出しに切り替えました

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

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

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

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

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