ITコラム

プログラミングノウハウ

2018.04.13

#jQuery入門

jQuery【 jQuery UI 】UI の導入と使用方法

jQuery UI は、jQuery のプラグインの集まりで、jQuery UI を利用するとドラッグ & ドロップや統一性のあるデザインなどを簡単に実現することができます。
今回は、jQuery UI の導入と使用方法について、解説いたします。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. jQuery UI の導入
- jQuery UI を読み込む
- テーマを選択
2. カレンダーを表示
3. ドラッグ & ドロップ
4. まとめ

1. jQuery UI の導入

　
jQuery UI を導入する方法は、jQuery 自身と同様に「ファイルをダウンロードして HTMLファイル内で読み込む方法」と「 CDN を使用して HTMLファイル内でファイルを直接読み込む方法」がありますが、ここでは CDN を使用する方法を紹介します。
※双方の違い等については、jQuery【ダウンロード】jQuery を使用するための準備をご参照下さい。

jQuery UI を読み込む

jQuery UI を利用する場合は、jQuery UI の CDNを使用して HTMLファイル内で次のように読み込みます。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

テーマを選択

jQuery UI のテーマページからデザインを選択することができます。

上記ページの左側に表示される「 ThemeRoller 」の「Gallery」タブをクリックすると、デフォルトのテーマの一覧が表示されますので、こちらからテーマを選択します。
（一覧からテーマをクリックすると、右側にプレビューが表示されデザインを確認することができます。）

ここでは HTMLファイル内で次のように読み込んで「 Sunny 」を選択してみます。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">

CDN のリンク先 URL は、jQuery UI の「 Blog 」ページで「 CDN 」で検索して、選択したテーマ（ここでは Sunny ）のリンク先 URL を取得して下さい。

上記の CDN は「 jQuery CDN 」を使用していますが、「 jQuery CDNGoogle Ajax Libraries API 」や「 Microsoft Ajax CDN 」も同様に使用できます。

▲目次へ戻る

2. カレンダーを表示

　
導入した jQuery UI を使用して、入力補助のカレンダーを表示します。
入力欄をクリックしてみて下さい。

日付入力

　
先ほど選択したテーマ「 Sunny 」のデザインでカレンダーが表示されます。
　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
<script type="text/javascript">
$(function() {
  $("#wkCalender").datepicker();
});
</script>

<div style="background-color:#CCC; padding : 20px;">
  日付入力<input type="text" id="wkCalender">
</div>

「 datepicker 」は、jQuery UIのメソッドです。
HTML 要素を選択して datepicker メソッドを記述するだけで、入力補助のカレンダーが表示されます。

▲目次へ戻る

3. ドラッグ & ドロップ

　
jQuery UI を使用して、ドラッグ & ドロップを実装します。
１～３の BOX を、ドラッグしてドロップエリアにドロップしたり、ドロップエリアから外に出したりしてみて下さい。

１

２

３

ドロップエリア

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
<script type="text/javascript">
$(function() {
  // ドラッグ
  $(".box").draggable({
    containment:"#dragArea"
  });
  // ドロップ IN
  $("#dropArea").droppable({
    accept:".box",
    drop: function(e, ui) { 
      $("#infoArea").html(ui.draggable.text() + "　IN" );
    },
    // ドロップ OUT
    out:function(event,ui){ 
      $("#infoArea").html(ui.draggable.text() + "　OUT" );
    }
  });
});
</script>
<style>
.box{width:40px;height:40px;text-align:center;}
#box1{background-color:pink;}
#box2{background-color:orchid;}
#box3{background-color:skyblue;}
#dragArea{background-color:#CCC; padding : 20px;}
#dropArea{width:90%; height:100px; text-align:left; background-color:bisque;}
</style>
<div id="dragArea">
  <div style="display:inline-flex; align-items: center;">
    <div id="box1" class="box">１</div>　
    <div id="box2" class="box">２</div>　
    <div id="box3" class="box">３</div>
  </div>

  <div id="dropArea">
    <p>ドロップエリア</p>
  </div>
  <div id="infoArea">　
  </div>
</div>

「 draggable 」は、jQuery UIのメソッドです。
HTML 要素を選択して draggable メソッドを記述すると、指定した要素がマウスで移動できるようになります。

同様に「 droppable 」も jQuery UI のメソッドで、指定した HTML 要素がドロップを受け入れ可能な要素となります。

droppable メソッド内の「 drop 」は、ドロップした時に実行されます。
同様に「 out 」は、ドロップエリアから出た時に実行されます。

▲目次へ戻る