jQuery UI 導入方法

jQuery UI の導入方法についての記事。
jQuery UI とは、jQuery公式のユーザインターフェース(UI)用ライブラリのこと。
jQuery UI を使うと、UIを駆使した、高度なインターネットアプリケーションを作ることができる。CSS テーマなどもあらかじめ用意されているので、特別なことをしなくても、ある程度のことは出来てしまう優れものだ。

導入

jQuery UI – Configure your downloadより、最新バージョンをダウンロード。2011/05/16現在の最新バージョンは、1.8.12なので、「jquery-ui-1.8.12.custom.zip」ファイルをダウンロード。
使いたい js ファイルや css ファイルを、自分のサイトのサーバーにアップロードし、使いたいページで読み込む。大概の js ファイルは、「development-bundle/ui/」に入っている。css ファイルは、「development-bundle/themes/」に入っている。それぞれのプラグインは、依存関係がある場合があるので、読み込む順番にも、注意が必要だ。
依存関係が面倒な場合は、「 jquery-ui-1.8.12.custom.min.js 」を、まるごと読み込んでしまおう。
もちろん、jQuery を読み込んでおく必要もある。

まるごと読み込む例

<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>

ファイルへのパスは、それぞれ、アップロードした場所を指定する。

プラグイン別に読み込む例

例えば、jQuery UI の Accordion プラグインを読み込むなら、

<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.accordion.js"></script>

となる。ファイルへのパスは、それぞれ、アップロードした場所を指定する。

使用例

スポンサード リンク

カテゴリー: JavaScript, jQuery, jQuery UI パーマリンク