jQueryプラグイン活用講座

jQuery Knobのダウンロードと設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインjQuery Knobをダウンロードして、HTMLドキュメントに設定を加えます。
講師:
04:12

字幕

このレッスンでは、マウスホイールやドラッグでマウスダイアルを作るプラグインjQuery Knob のダウンロードと設定についてご説明します。今、画面で開いてるのはjQuery Knob のデモのページです。このページを探すには Google でキーワード jquery とそれから knob ですね。もう、そのままで検索するのが良いと思います。そうすると、デモページが一番先頭に出ています。それから GitHub でダウンロードするんですがデモページからもGitHub に飛べますのでデモページの方を見ましょう。ここに表示されているのは実際のダイアルのサンプルです。まず、マウスホイールを回して数字を変えることもできますしそれから、マウスでこのグラフの表示のようなものですねこれをドラッグして値を変えることもできます。ものによって伸び方やどんなふうに表現されるかというのが違っていますね。こっちは切れてますし少し 先端が丸くなっています。さらに、下はもっとカスタマイズした例なんですけれどもこのようなサンプルがあります。実際のダウンロードについては、一番右上。「Fork me on GitHub」ということでGitHub の方でダウンロードをします。 右下の「Download ZIP」のボタンで ZIP がダウンロードできます。それから 説明はREADME.md ですね。ここを見ると、サンプル設定の例が出ていますね。こんなふうに設定するんですよと、あるいはオプションです。こういったものが出ています。では戻りまして GitHub からこの jQuery Knob のダウンロードをします。ダウンロードしたプラグインを開いたフォルダがこちらのjQuery-Knob-master です。この中の js というフォルダの中にプラグインの JavaScriptファイルが入っています。jquery.knob.jsこちらです。これを、使うフォルダの中のライブラリ用のフォルダを用意しておいた方がいいと思うんですがそこに入れます。左上に開いているのが作業用のフォルダです。sample.html。これが練習用のHTML ドキュメントでlib というフォルダの中に、ライブラリは入れることにしています。ここはまだ空ですのでこちらの jquery.knob.js をコピーします。これで、ファイルの方の準備は整いました。練習用の HTML ドキュメント、sample.html を開きました。 jquery のプラグインですからscript 要素で jquery を読み込んでおく必要があります。ここでは、ネットワーク cdn からjquery-1.11.3 を読み込んでいます。この後に並べてscript 要素で先ほどコピーしておいたプラグインのファイルを読み込みます。jquery.knob.jsこれを開きます。そして、タグを閉じると。これで jQuery Knob を使うための準備が整いました。ファイルを保存しましょう。このレッスンでは、マウスホイールやマウスのドラッグでコントロールできるダイアルを作るプラグインのjQuery Knob のダウンロードと設定についてご説明しました。ダウンロードは GitHub から「Download ZIP」ボタンでダウンロードができます。そしてダウンロードしたjquery.knob.js のファイルを適切なフォルダに入れそれを HTML ドキュメントでjquery のライブラリを読み込んだ後にプラグインを script 要素で読み込むと いうことでした。

jQueryプラグイン活用講座

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

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

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

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

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