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

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

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

ソートを可能にする

次にリストなどをソートするUIを実装してみます。

リストの順番をドラッグアンドドロップで入れ替えられるのがわかると思います。JavaScript部分は以下のようになっています。

$('.list1').sortable().disableSelection();

sortable()がソート可能にする処理です。後ろのdisableSelection()はテキストを選択できないようにする処理で,ドラッグする要素にはこの処理を実行することで,操作時にテキストが選択されなくなり,使い勝手がよくなります。

ただしjQuery UIのバージョン1.8.4以下ではdisableSelectionの機能はWebkitベースのブラウザには効きません

リストを相互に入れ替えられるような機能もsortable()で実装することが可能です。サンプルは以下のようになります。

この機能は,connectWithというオプションで移動できる要素を指定することで実現可能です。コードはこのようになります。

// リスト1の項目はリスト2に移動することができる
$('.list1').sortable({
    connectWith: '.list2'
}).disableSelection();

// リスト2の項目はリスト1に移動することができる
$('.list2').sortable({
    connectWith: '.list1'
}).disableSelection();

移動先の要素の指定はjQueryのセレクタと同じ形式になるので,移動先を複数指定することも可能です。

タブのUIを作る

タブやカレンダーなどの機能は,テーマのCSSファイルを読み込む必要があります。20種類以上のテーマが公式サイトで配布されていますので,好きなテーマを選んで使うとよいでしょう。今回はGoogle CDNから読み込むことにします。CDNから読み込むには以下の様なlink要素を追加します。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css">

これを使ってタブのUIを作るとこのようになります。

ここではテーマを読み込むために$.uiThemeLoaderというテーマローダーを作成しました。これを使ってテーマをセレクトボックスで切り替えられるサンプルを作ったのでこちらで色々切り替えてみて好きなテーマを探してみて下さい。

タブの機能にもさまざまなオプションが用意されているのでいくつか機能を付け加えてみます。以下は初期表示の時に選択されているタブの指定と,タブ変更時のアニメーションをつけ加えたサンプルです。

コードは上記の例に加えて以下のようなオプションを設定しただけです。

$('#tabs').tabs({
    // 初期表示のタブを指定する
    selected: 2,

    // アニメーション
    fx: { height: 'toggle', opacity: 'toggle' }
});

著者プロフィール

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

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

Twitter: @hokaccha