jQueryプラグイン活用講座

simplePaginationのオプションでインターフェイスの設定を変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オプションのプロパティでインターフェイスのデザインを変えます。
講師:
04:38

字幕

このレッスンでは HTML ドキュメントのbody 要素の中をコンテンツをページ分けしてくれるPagination のプラグインsimplePagination の、オプションの設定を切り替えて少し、表示を変えてみたいと思います。現在、基本的なsimplePagination の設定はできています。まず、オブジェクトでページ数を itemsそれから、クリックしたときの処理をonPageClick というプロパティに設定した上で、そのオブジェクトを渡してpagination というメソッドを呼び出します。これが、インターフェースを指定するdiv 要素に定められたclass です。そして、クリックした後、という動きがここに書いてありますのでonPageClick のプロパティに設定した call back 関数ですね。ページの切り替えもできるようになっています。今現在の状態を確認しておきましょう。「ファイル」から「ブラウザーでプレビュー」します。1ページ目が表示され「Next」で、次のページに行くこともできますしボタンをクリックして、そのページに飛ぶこともできます。「Prev」。前へということで前に戻りましてやはりページ選択ができると、いうことで基本的な設定はできていますけれども少し、このインターフェースなども変えてみたいと思います。 simplePagination.js のドキュメントページURL はここなんですけれどもそこを開くと、最初の方にインターフェースのデザインが3種類用意されています。デフォルトはこの”light-theme” というもので先ほどのボタンがこういう状態でしたね。もう1つ ”dark-theme” はまぁ暗い、黒っぽい感じです。それから ”compact-theme”というのがありましてまずこの compact-theme を試してみましょうか。コピーしておきます。間違えないように。HTML ドキュメントの方に戻りましょう。オプションを設定するのはこの pagination の呼び出しに渡しているオブジェクトです。このプロパティとして加えます。インターフェースのデザインは、cssStyle と。cssStyle で先ほどコピーしておいたcompact-theme ですね。ペーストします。オブジェクトのプロパティは, 区切りということで確認してみましょう。ファイルを保存します。ブラウザウィンドウをリロードするとlight-theme がcompact-theme に変わりました。もう1つの dark-theme を見ておきましょう。 cssStyle のプロパティの値compact をdark に書き換えます。そして、保存して確認します。ブラウザウィンドウをまたリロードしましょう。黒いインターフェースになりました。今度はこの「Prev」「Next」という表示。このテキストの表示も変えられますので試してみたいと思います。まず Prev。前へという文字の表示なんですがこれはそのままprevText です。Text の T は大文字で例えばここで日本語だったら, 区切りですけれども「前へ」 というふうにしてもいいでしょうがどうせであれば、世界共通に分かるようにしたいですね。だったらこんな感じ(<<)でいいでしょう。不等号、2つ重ねました。ということは今度は Next です。nextText で同様に , 区切りで「次へ」ということなので右向きの不等号()。これで確認してみましょう。ファイルを保存します。ブラウザウィンドウをリロードすると、「Prev」「Next」の表示がこの不等号<< と に変わりました。こっちの方がコンパクトで見やすいかもしれないですね。このレッスンでは HTML ドキュメントのbody の中身をコンテンツをページに分けて表示してくれるプラグインsimplePagination のオプションを加えてインターフェースのデザインを変えてみました。 今回試したのは cssStyle で、インターフェースのデザインの選択。それから 「前へ」とか「次へ」というボタンなんですがそのテキストを変えるということでした。

jQueryプラグイン活用講座

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

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

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

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

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