jQueryの使い方とか

jQueryの使い方とか適当にメモしていきます。

jQueryは非常に便利なのですが使うまでの準備がちょっと面倒だったりします。

ここでは、 jQuery Dialog を使える様にする方法を紹介します。

 

一番てっとり早く設定する方法

jQuery UIのダウンロードサイトにアクセス

http://jqueryui.com/download/

 

Version 

1.10.3(Stable,for jQuery 1.6+)

等のStable(安定板)にチェックを入れます。

 

Components

の中にある Toggle All をクリックする事で全体のチェックステータスを切り替える事が出来ます。

 

Components > Toggle All のチェックを外します。

 

UI Core

Interactions

Widgets

Effects

と各種使いたいjQuery UI の候補があるのでその中で実際に利用したい項目にチェックを入れます。

 

ここでは、 

Widgets > Dialog 

Widgets > Menu

にチェックを入れました。すると、依存している UI Coreの中の

Core

Widget

Mouse

Position

等にも自動でチェックが入る事が確認出来ます。

要するに使いたい機能にチェックを入れると、自動で依存関係にあるモジュールにチェックが入ります。

 

必要に応じて Theme ( CSSのテーマ)を切り替えます。

 

Download ボタンをクリックします。

jquery-ui-1.10.3.custom.zip  

という風にミックスされたjQueryの関連モジュールが自動でパッケージ化されダウンロードされます。

展開します。

 

css

development-bundle

js

index.html

が出てきます。



ここでブラウザを開き、 index.html ファイルをブラウザにドラッグ > 右クリック > ソースの表示

ヘッダー部分に jquery / css を読み込む部分のコードがあるのでその部分を

実際に開発時に配置するパスに変更すれば簡単に動く状態のjQueryの読込コードを得る事が出来ます。

 

 尚、index.html をブラウザにドラッグすると画面上でjQuery UIの挙動を実際テストする事が出来ます。

 いやー、本当にjQueryのこの依存関係を自動で設定してダウンロードさせてくれる仕組みは助かりますw