jQueryUIを使った装飾

jQueryUIはJavaScriptのライブラリの一つで、これを使えば難しい操作をすることなく色々な、そしてハイレベルのをサイトを構築することができます。

ベーシックデザインでjQueryUIを利用する

上記URLの左のメニュー一覧から自分が設置したいアイテムを選びます。ここではベーシックデザインで設置するケースを考えてみます。（カスタマイズは後述）

例えば、Datepickerを選択するとサンプルを見ることができる下記のような画面がでてきて、さらに下のview sourceを押すとソースコードを見ることができます。

このソースコードをそのまま張り付けてもいいのですが、html5の仕様になってますので、XHTML1.0やHTML4.01で作成している人はmetaタグやdoctype、scriptにtext/javascriptを入れたりと、直さないといけません。

ベーシックデザインで設置する際には、ソースコードの７、８、９行目は基本いじりません。jQueryUIをダウンロードして設置もできますが、CDNで読み込んだほうが高速ですのでそのままにすることをお勧めします。

ただし、８行目はjQueryファイルを別の場所から読み込んで既に使っている場合は削除します。バージョンが異なるなら不具合が出るのでなおさらです。

１０行目はいらないので削除します。変わりに自分のCSSファイルでスタイルを微調整しましょう。

１１～１５行目はdatepickerの場合はここに置く必要はないため、/body直前に移動したほうがやや高速になります。（Webサイトの高速化参照）

１９行目でdatepickerを指定したい要素（この場合はinput要素）にidを指定しています。pやdivに指定すればカレンダーだけが表示されます。（大きさはFontSizeで調節できます）

<!-- HTML -->
<div id="datepicker" style="margin:10px 30px;font: 62.5% 'Trebuchet MS', sans-serif;"></div>

datepicker以外にも実に様々なアイテムがExampleとともに掲載されています。

itemをカスタマイズする

各アイテムをカスタマイズするには、サイト上部のタブからThemesを選びます。

左のThemeRollerのRoll Your Ownタブを弄繰り回すと色とかを自分好みに変えることができます。ちょこちょこいじるのがメンドクサイ人はその右のGalleryタブをクリックしてテンプレートから選びます。

Downloadボタンを押すと、Download Builderのページに移動するので、落としたいアイテム以外のチェックを外し、一番下のダウンロードボタンを押すとカスタマイズされたファイルが詰まったフォルダを落とすことができます。

jquery-ui-1.10.0.custom.jsとjquery-ui-1.10.0.custom.cssファイルだけ抜き出して、先ほどのベーシック版のjsファイルとcssファイルをこのファイルに置き換えて読み込めばOKです。なお、カスタマイズする場合はCDNから読み込むことはできないので、適当なフォルダから相対パス等で読み込んでください。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>