jQueryプラグイン活用講座

ダイヤルで設定された値を調べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ダイヤルが操作されて定められた値を調べます。
講師:
04:18

字幕

このレッスンでは、マウスホイールやドラッグでコントロールできるダイヤルを作るプラグインjQuery Knob の設定した値をどうやって調べるかということについてご説明をしたいと思います。現在 jQuery Knob の基本的な設定と若干のオプションの設定はできていて、ダイヤルを動かすということについてはもう完成しています。どうなっているかというと、まず input 要素でダイヤルを置くための要素を設定し class を定め初期値ですね。それを value に指定してあります。そしてこの class をセレクタとしてknob というメソッドを呼び出せばいいんですがオプションを設定するためにオプションのオブジェクトが引数に渡されています。その中には、リングの部分のカラーとかそれから文字のカラー、太さ後は端っこの切れ方ですね。丸くなっている、というような設定をしてあります。動きについては問題はありません。確認してみましょう。「ファイル」メニューから「ブラウザーでプレビュー」します。これがダイヤルです。マウスホイールを動かしても数字が変わりますしそれから、マウスでドラッグすることもできます。真ん中のテキストの数値も連動して変わりますね。 もっともこういうふうにダイヤルが動いて良かったね、ということにはならないですよね。ダイヤルで動かした結果、その値を使って何かしたいわけです。その値をどうやって取ったらいいかということが、このレッスンのポイントです。jQuery Knob では値が決まったときに関数を呼び出します。その指定なんですが、このオプションに加えます。オプションで releaseというプロパティです。ここで、起動したい、呼び出したい関数名を指定します。今回は showValue としましょう。値が知りたいので。そして、この showValue という関数はこれから定義します。function の showValue。タイプミスすると嫌なのでコピーを持ってきます。そして () {}と。そして、この引数として設定された値を受け取ります。では引数の名前、value にしましょう。これで値が分かります。今回はこの値に伴ってコントロールするものが特別ないのでconsole.log で値を見るだけにしましょう。console.log でvalue と引数に渡せばどの値になったかということを確認することができます。やりたいことに応じてその値に従った処理を加えればいいと いうことですね。 では、ファイルを保存します。そしてブラウザをリロードします。console.log のログを見たいのでChrome の場合は「表示」メニューから「開発/管理」で「JavaScript コンソール」です。ここに表示が出てきます。まず、マウスホイールを動かしてみます。数字は変わりますけど、変わるたびにその数字が表示されますね。ホイールの場合には、こういうふうにいちいち出てくるんですがドラッグの場合はちょっと違います。ドラッグですと、マウスボタンを押しました。何も起こりません。動かしました。やはり何も起こりません。そして、ここでいいなと思ってマウスボタンを放したときに値が表示されます。ですから release なんですね。マウスボタンを放すという意味でプロパティ名は release ということになっています。これで、どんな値に設定されたかということを知ることができますのでその値に応じた処理が書けるということです。このレッスンでは、ダイヤルを作るプラグインjQuery Knob で作ったダイヤルの値を変えて設定をしたときその設定された値をどうやって調べるかということについてご説明しました。オプションには release というプロパティに関数名を定めます。 そしてその定めた関数なんですが、引数に設定された値を受け取りますのでその値を使って処理を組み立てればいいということです。

jQueryプラグイン活用講座

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

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

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

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

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