jQueryプラグイン活用講座

jQuery Knobのオプションでダイヤルのデザインを変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オプションのプロパティでダイヤルのデザインを変えます。
講師:
05:25

字幕

このレッスンではマウスのホイールやドラッグでコントロールできるダイヤルを作るプラグインjQuery Knob のオプションを使ってそのダイヤルのデザインを変更してみたいと思います。今、最低限の記述のコードでこの HTML ドキュメントではダイヤルを表示しています。そのためには、まずinput 要素が必要でそこに class を設定し、dial です。それから初期のパーセンテージ表示したいダイヤルのパーセンテージ 65 ということでinput 要素を定め、その class をセレクタで指定しknob というメソッドを呼び出すとこれだけで簡単にダイヤルができてしまいます。では、今のダイヤルのデザインを確認しておきましょう。「ファイル」から「ブラウザーでプレビュー」します。65% のところにブルーの表示があり後、テキストでパーセンテージも表示されています。ホイールを、マウスのホイールをドラッグすると数字が変わります。あるいはドラッグで変えることもできます。このデザインを少し変えてみたいと思います。ダイヤルのデザインを変えるにはこの knob のメソッドの呼び出しにオプションのオブジェクトを渡します。 では、オブジェクトをsettings としてオブジェクトですから{}ですね。改行して見やすくしましょう。そして、このオブジェクトをsettings という変数に入れましたが、これをコピーして引数に渡します。もちろん空っぽでは意味がありませんのでセッティングを1つ加えてみましょう。fgColor と。これは foreground ですね。全形、あのダイヤルの色の付いた、色の付いたって両方付いてますね。あのブルーの部分のカラーを変えたいと思います。ではブルーでなくて、あれは多分スカイブルーだと思うんですがturquoise。ちょっと緑がかった色ですね。この色にしてみたいと思います。では保存をして、確認してみましょう。ブラウザウィンドウをリロードします。明るい緑色に変わりましたね。これは turquoise です。動きは変わりませんので、もうちょっとオプションを加えていきしょう。今、文字の色はこのバーといっていいんでしょうかね。この部分と同じ色になっているんですが文字の色だけ別に変えることもできます。ではオブジェクトを settings にプロパティを加えましょう。プロパティは , 区切りです。 そして、テキストのカラーはインプットカラーとなります。inputColor。C は大文字です。そして skyblue にしましょう。最初のデフォルトは多分、skyblue だと思います。ではこれで、保存をしてまた確認をします。ブラウザをリロードすると、文字が skyblue に変わりました。もう少し、オプションを加えましょう。今度はあの、バーというのかリングというのか、あの太さです。太さは thinkness というプロパティになっていて少し細目にします。0.25 と。これは、半径に対してどれ位の比率かということですので余り1に近いような数字を入れたらだめです。もちろん0でもだめですので、その間の適当な数字。まぁ、0.5 前後がいいんじゃないでしょうか。この数字で、保存をして確認してみましょう。ブラウザウィンドウをリロードすると、ちょっと細くなるはずですね。細くなりました。あともう1つ、オプションを加えたいと思います。最後に加えるオプションはあのリングの切れたリングの端っこの形です。lineCap と。ここも C は大文字なんですけれどもそれに対して round という値を与えましょう。 丸くなるということなんですけれどもどう丸くなるのかは見てみれば分かります。ファイルを保存します。ブラウザをリロードしますのでこの端の、切れ目のところにご注目ください。リロードすると端が丸くなるということです。このレッスンでは、マウスホイールやドラッグでコントロールできるダイヤルを作るプラグインのjQuery Knob のデザインをオプションで変えてみました。その場合、オプションというのはオブジェクトなんですけれどもそれを knob のメソッドの呼び出しのときに渡します。4つ オプションはご紹介しました。まず foregroundfgColor ですね。これは、あのリングの部分の色になります。それから真ん中の文字はinputColor です。それから、リングの太さについてはthinkness ということで、0から1のまぁ 0.5 に近いめの数字が良いと思います。そして最後は lineCap ということで round とするとあの切れ端が丸くなるということでした。

jQueryプラグイン活用講座

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

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

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

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

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