読んで覚える,触って体験!JavaScript&CSS3~gihyo.jp×jsdo.it presents

第6回 jQuery UIを使ってみよう(お題編)

この記事を読むのに必要な時間:およそ 3 分

はじめに

jQuery UIは,ドラッグアンドドロップ,カレンダー,スライダーなどを始め,さまざまなユーザインターフェースを簡単に実装することができるようになるjQueryのライブラリです。ユーザインターフェースに関係する機能がたくさん含まれたjQueryのプラグインと思ってもらえばわかりやすいかと思います。

jQuery UIはたくさんの機能を提供するので,機能が全部入ったスクリプトのファイルはかなりの容量になります(現時点での最新版である1.8.14の圧縮版で約210KB)⁠すべての機能を使うということはほとんどないので,jQuery UIは使用する機能だけ選択してダウンロードできるカスタムダウンロードを提供しています。

今回jsdo.itで使うサンプルのコードは全部入りのjQuery UIを使いますが,実際に使う場合はカスタムダウンロードしたコードを使ったほうがいいでしょう。

また,今回紹介しきれない機能やオプションなどについてはドキュメントやデモのページを参照してみてください。

jQuery UIを使う

それでは早速jQuery UIを使ってみましょう。jsdo.itでjQuery UIを使う場合にはあらかじめ用意されている,Major Librariesから読み込むことができるので,簡単に使うことができます。jQuery UIを使うにはjQueryも必要ですので,jQueryとjQuery UIをロードします。

jQueryとjQuery UIの2つのがロードされているのがわかると思います。まずはjQuery UIを使ってドラッグの機能を実装してみましょう。以下のサンプルでは要素がドラッグアンドドロップできるようになっています。

これはjQuery UIのDraggableを使っています。JavaScriptコードを見てもらうとわかりますが,以下のようにたった一行だけしか書いてありません。

$('.box').draggable();

jQuery UIを使うとこれだけで要素をドラッグして動かせるようになります。また簡単さに加えてさまざまな機能をオプションやイベントで設定できるのもjQuery UIの特徴の一つです。たとえば今のコードに,ドラッグ中に要素の色を変えるという機能を追加してみます。

追加したコードは以下のようになります。これもとても短いコードで実現できるというのがわかると思います。

$('.box').draggable({
    // ドラッグ開始時に実行される
    start: function() {
        $(this).css('background', '#C00');
    },

    // ドラッグ終了時に実行される
    stop: function() {
        $(this).css('background', '#CCC');
    }
});

著者プロフィール

外村和仁(ほかむらかずひと)

HTMLコーダー,JavaScriptプログラマ,PHP,Perlのプログラマといった職務を経験後,2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用,開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はPythonとJavaScript。JavaScriptの勉強会,jstudyを主催している。

Twitter: @hokaccha

コメント

コメントの記入