jQueryプラグイン活用講座

簡単なスクリプトでダイヤルをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
簡単なコードでマウスホイールやドラッグで回せるダイヤルをつくります。
講師:
03:25

字幕

このレッスンでは、マウスホイールやドラッグでコントロールできるダイヤルを作るプラグインの jQuery Knob を使って、簡単なコードでそのダイヤルを作ってみたいと思います。現在開いている HTML ドキュメントこれには、まず jquery のライブラリの読み込みがありそれから jQuery Knob のプラグイン jquery.knob.js。この script 要素の読み込みが書いてあります。けれど script 要素にまだ何もJavaScript コードは書かれていませんしbody 要素にも何もありません。まずは body 要素、にダイヤルを作るための input 要素を記入します。input ということで、type は text です。そして class を定めます。これを jQuery Knob で使うんですけれどもclass で dial としましょう。dial を作るので。そして、ダイヤルの表示の初期値です。パーセンテージなんですけれどもvalue として 65% にしましょう。これで body 要素の方は出来あがりです。後は今度は jquery のJavaScript コードを書きます。 ドキュメントが読み込まれたらという jquery のお馴染みのfunction の書き方です。() {}); この中に初期化のときに実行するステートメントを記入します。class input 要素にclass=”dial” を設定したのでこのダイヤルに対してセレクタを当てます。$(“.dial”。そして )。呼び出すメソッドは knob です。k が入りますのでご注意ください。k-n-o-b ですね。これで最低限はできました。ファイルを保存しましょう。そして「ブラウザーでプレビュー」します。ダイヤルが表示されました。65 という数字が出ていますね。これは、まずスクロールホイールで回して数字を切り替えることができますしそれから、この青い部分をドラッグして数字を変えることもできます。このレッスンでは、マウスホイールやドラッグで、コントロールできるダイヤルを作るプラグインのjQuery Knob の最低限のコードの記述についてご説明をしました。まず jquery とそれから、プラグインjQuery Knob をscript 要素で読み込んだ上でbody には input 要素を設定します。class を設定して初期値のパーセンテージをvalue で与えます。 その上で jquery の初期化の実行する function の中にセレクタで class を指定して呼び出しのメソッドはknob ということですぐに、あのダイヤルができてしまうということです。

jQueryプラグイン活用講座

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

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

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

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

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