jQueryプラグイン活用講座

ページ切り替えのインターフェイスを表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページ切り替えのインターフェイスを表示して、ページのデザインをつくります
講師:
05:43

字幕

このレッスンでは HTMLドキュメントのbody 要素の中を ページ分けしてくれるpagination のプラグインsimplepagination を使って先ずページのデザインをしてみたいと思います今 body 要素にはテキストが入っていますそしてこのテキストなんですがpage 1page 2 とありますのでこれらをページ分けしようと言うそう言う想定ですそしてそれぞれテキストはdiv 要素の中に入っていてclass selection それからid が page の連番でpage_1 page_2 と言う風に連番で付いていますそして page は全部で7 ページ あると言う事です現在は simplepaginationの設定はしてませんのでこれが ダラダラッと 全部表示されてしまうんですが今の状態を確認しましょう「ファイル」から「ブラウザーでプレビュー」します本当はここで切りたいんですけどねpage 1page 2page 3 とこれらを切った画面にしてみたいと思いますでは HTML ドキュメントの方に戻りましょうページ分けした画面のデザインはこの HTML ドキュメントのずっと下の方にあるこの空っぽの div 要素id が lightpaginationとなっていてclass pagination が設定されています空っぽですから div 択には何も入っていませんここにデザインを設定したいと思いますのでこの class を使ってjquery のジャバスクリプトコードを書いて行きますではこの script 要素の中に改行してjquery でお約束ですドキュメントの準備が整ったらfunction ですねこの処理を実行しましょう初期化の書き方ですこの中にsimplepagination の呼び出しを入れます今言いました通り セレクター はpagination と言うところに指定をしてそしてpagination と実はこれだけでは駄目で引数にオブジェクトを渡す必要がありますオブジェクトはsettings として{}を2つ書いて見やすい様に改行を入れます全部で何ページありますか と言う事を設定しますitem と言うプロパティーitems ですね複数形になりますitems 何ページありますかと言う事で全部で7ページあるので7と入力しますそして変数 settings に入れたオブジェクトはpagination の呼び出しに渡しますコピーを持ってきますメソッドの綴りが違ってますねp ですpagination と言う感じの書き方ですけれどもこれを「保存」してブラウザで確認しましょうブラウザーウィンドウをリロードします何も変わりませんページのデザインは下の方に作ってありますのでここにコントロールがあるんですねじゃあ この上のズラズラ出てきたのはどうするかと言うとこれは css で消してしまいますでは HTML ドキュメントの方に戻りましょうページ分けの単位となる div 要素には共通に class selection が割り当てられていますですからこれを消してしまおうと言う事でstylesheet を加えます閉じましてそしてclass のselection ですねこれに対して消してしまえと言う事なのでdisplaynone と言う風にします全部消えてしまうじゃないかとその通りですねですから最初のページid の page 1 ですねこれは改めて表示するとdisplayblock としますこれで1ページ目だけが表示されると言う事になりますので「保存」してブラウザーで確かめてみましょうブラウザーウィンドウをもう一度リロードしますそうすると1ページだけが出てきて後のページは消えましたただボタンをクリックしてもページは写りませんここは jquery のジャバスクリプトコードを書く必要がありますこのレッスンでは先ずこのページデザインですね?と言う事でインターフェイスを表示してそして1ページ目だけを出すと言う事について御説明しましたjquery のコードをおさらいしますとjquery が出荷される時オブジェクトに items と言う事でページ数を指定しセレクターを指定したらpagination でそのオブジェクトを渡すとそして全ての表示を一旦 display表示を消してから目的のページ 大抵1ページでしょうけれどもそれを表示すると言う風にしました

jQueryプラグイン活用講座

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

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

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

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

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