× 無料のユーザー登録をすると学習状況を管理することができるようになります

#02 ひな形ファイルを作ろう

jQuery UI のダウンロードを終えて解凍すると、こういった具合にファイルが出来ているのが分かるかと思います。
js フォルダに入っている JavaScript と、css フォルダに入っている css を使って編集をしていきましょう。

レッスンを進めていくにあたり、jQuery UIを使うことができるひな形ファイルを作っていきます。

  • ひな形ファイルの作成

このレッスンでは jQuery 1.8.0 / jQuery UI 1.8.23 を使用しています。

2015年1月25日
2015/1/25現在のjQuery UIでは動画のようなフォルダ構成になっておりません。
ダウンロードしたファイルからjquery-ui.js、jquery-ui.cssを読み込んでも良いですが、以下のようにjQueryのサイトから引っ張ってくることも可能です。
その場合はソースコードの6-8行を以下のように書き換えてください。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
2012年9月11日
jQuery UIはGoogleでもホストされているので次のコードで読み込むことが可能です。
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
詳細は以下から確認してください。
https://developers.google.com/speed/libraries/devguide?hl=ja#jquery-ui

ただし、これを読み込んだだけではThemeを使うWidgetsが利用できないので、それらを使いたい場合は公式サイトから必要なファイルを一式ダウンロードして使うのがいいでしょう。
逆にSortableやDraggableといったThemeを使わない機能だけ使いたい場合はGoogleから読み込む方が便利な場合もあるので覚えておきましょう。

このレッスンの問題を報告する

この動画に関する、よくある質問はまだありません。

プレミアム会員(月額980円)になると、全レッスンの素材ファイルをダウンロードできます。

詳しい説明を読む

プレミアム会員(月額980円)になると、全レッスンのソースコードを見られるようになります。

詳しい説明を読む

このレッスンの問題を報告する

プレミアム会員(月額980円)になると、全レッスンのデモを見られるようになります。

詳しい説明を読む
先生に質問してみよう (試験運用中)