jQueryプラグイン活用講座

circlifulのダウンロードと設定

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

ぜひご覧ください。

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

字幕

このレッスンでは、アニメーションする円グラフが作れるプラグインCircliful のダウンロードと設定についてご説明します。Circliful はjQuery の公式ページのプラグインとして登録されています。jQuery のサイトでこの Plugins のサイトです。ここで Search で検索すればいいでしょう。circle というキーワードで見つかると思います。ここですね。そして、この登録ページの右側にダウンロードのボタンがありますからここでダウンロードをしておきます。ダウンロードしたファイルが、こちらのjquery-plugin-circliful-masterというフォルダですその中に使うファイルとしては、この js の中に入っているjquery.circliful.min.jsこちらを使います。あともう1つサンプルを作って試すには、この css の中にあるjquery.circliful.cssこちらもあると試しやすいので、この2つを作業用のフォルダにコピーしておきます。こちらが作業用のフォルダでライブラリは lib という名前にしましたけれども、ここにプラグインですね。先ほどの js に入っていたmin の方のJavaScript ファイルをコピーしてあります。 あと css ファイルを、先ほどお見せした css ファイルですねそれをここにコピーしてあります。sample.html これが、これから試そうとしているファイルです。Dreamweaver でsample.html練習用のファイルを開きました。jQuery のプラグインですから、当然 jQuery は読み込んでおく必要があります。ここでは script 要素の srcソースにはcdn ネットワークからのライブラリの読み込みを行っています。バージョンは 1.11.3 です。まだ Circliful の設定は行っていません。それを加えていきましょう。まず script 要素に、先ほどダウンロードしてコピーしておいたファイルをJavaScript ファイルをscript 要素に読み込みます。lib の方ですね。jquery.circliful.min.js 開きます。そしてタグを閉じると。後もう1つ css も読み込んでおくといいのでここで、やはりコピーしたcss ファイルですね。link です。そして rel の属性でstylesheet という設定にしてhref ですね。ここで先ほど、やはりコピーしておいたcss のファイルを開きます。 そして、タグを閉じると。これで保存しましょう。これで、Circliful を使う準備が整いました。このレッスンでは、アニメーションする円グラフが描けるjQuery のプラグインCircliful のダウンロードと設定についてご説明しました。ダウンロードはページのDownload now ボタンで、すぐさま落とすことができます。そして、HTML ドキュメントの方ではjQuery に合わせてCircliful のライブラリをscript 要素で読み込み練習用には link で、css ファイルも読み込んでおくといいでしょう。

jQueryプラグイン活用講座

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

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

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

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

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