ITコラム

jquery ui 導入 使い方

jQuery

2018.04.13

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

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

目次

1.jQuery UI の導入
2.カレンダーを表示
3.ドラッグ & ドロップ

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 を使用して、ドラッグ & ドロップを実装します。
1 ~ 3 の 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">1</div> 
    <div id="box2" class="box">2</div> 
    <div id="box3" class="box">3</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 」は、ドロップエリアから出た時に実行されます。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.