操作性向上のライブラリパッケージ！「 jQuery UI 」の紹介

・予算を抑えてwebシステムをつくりたい
・低コストで手軽に操作しやすいwebシステムをつくりたい

システムに携わる、生きとし生けるものはこう↑思いますよね。

そんな人のために、私が長年お世話になっている「jQuery UI」についてご紹介します。

jQuery UIとは

そもそもjQuery UIってなんなのかといいますと

jQueryを使って、普段webサイトやwebシステムなどで使いたくなるであろう機能をまとめたライブラリのことです。

例えば

・日付の入力補助部品（カレンダーが出るみたいな）
・ブラウザ上の要素をドラックして複数選択
・ブラウザ上の要素をサイズを変更

こんなの序の口で、他にもたくさんあります！
項目数でいうと30個を超えます！

サンプル

当サイトのモットーは「まずはサンプルを提示する事」と自負しております。

カレンダーを使って日付入力できます

デモ 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>
  <!--    jQueryライブラリ読み込み -->
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> 
  <!--   /jQueryライブラリ読み込み -->

  <!--   bootstrapライブラリ読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!--   /bootstrapライブラリ読み込み -->
</head>
<body>

<input type="text" id="datepicker" placeholder="クリックするとカレンダーが出るよ">

<!-- ############ javascript  ############ -->
<script type="text/javascript">
  $(function() {
    $('#datepicker').datepicker();
  });
</script>
<!-- ############ /javascript  ############ -->

<!-- ############ style  ############ -->
<style type="text/css" media="screen">
</style>
<!-- ############ /style  ############ -->

</body>
</html>

ドラッグ（タッチ）して動かせます

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>
  <!--    jQuery・bootstrapライブラリ読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
  <!--   /jQuery・bootstrapライブラリ読み込み -->
</head>
<body>


    <div id="div1" class="py-5 bg-light w-75 text-center">
      ドラッグすると動かせます<br/>
      変なところに置かないでね
    </div>

<!-- ############ javascript  ############ -->
<script type="text/javascript">
  $(function() {
    $("#div1").draggable();
  });
</script>
<!-- ############ /javascript  ############ -->


<!-- ############ style  ############ -->
<style type="text/css" media="screen">
</style>
<!-- ############ /style  ############ -->

</body>
</html>

ツールチップ（吹き出し的なもの）が出ます

デモ
今日は天気がよかったので、ザギンでシースー食べました。 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>
  <!--   bootstrapライブラリ読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!--   /bootstrapライブラリ読み込み -->
  <!--    jQueryライブラリ読み込み -->
  <link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
  <!--   /jQueryライブラリ読み込み -->
</head>
<body>
<!--1ツールチップ用のテキストを準備-->
<div id="tool-demo">
  今日は天気がよかったので、<span class="text-primary" title="銀座">ザギン</span>で<span  class="text-primary"  title="お寿司">シースー</span>食べました。
</div>
<!-- ############ javascript  ############ -->
<script type="text/javascript">
$(function() {
  // ツールチップ機能を適用
  $('#tool-demo').tooltip();
});
</script>
<!-- ############ /javascript  ############ -->


<!-- ############ style  ############ -->
<style type="text/css" media="screen">
</style>
<!-- ############ /style  ############ -->

</body>
</html>

jQuery UIの公式サイト

公式サイトは以下となります。
https://jqueryui.com/

jQuery UIの利用方法

１、まずはライブラリを読み込む

基本的には以下の二つ（jQuery本体とjQuery-UIのライブラリ）を読み込ませるだけです！

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

とても簡単ですね！
ただし、使う部品・ライブラリによっては他のライブラリも読み込ませる必要があります。

例えば、日付の部品を使うなら、以下が必要です。

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">

また、ドラッグの部品などについては、そのままではスマホ対応していないのでスマホのタッチ対応をさせるには以下のライブラリを読み込ませる必要があります。

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

２、HTMLを作り、javascriptで指定する

例えば、日付の補助部品について説明します。

まずは以下のようなHTMLを作ります。

<input type="text" id="datepicker" placeholder="クリックするとカレンダーが出るよ">

次にこの要素に対して、jQueryで日付補助部品になるおまじないをします！

<script type="text/javascript">
  $(function() {
    // おまじない
    $('#datepicker').datepicker();
  });
</script>

これで日付部品の出来上がりです！たったこれだけです！

日付の入力は手入力で「〇〇〇〇/〇〇/〇〇」なんて入力するの大変ですよね。
このライブラリを使えば、カレンダーから指定することが入力できるので、システムとしての操作性もぐっとあがります。しかも実装も簡単です！

最後に

それぞれの部品でオプション機能もたくさんあるので、ここでは存在についてだけ触れることとします！個別の紹介はまた次の機会にさせていただきます。

なにか要望が出てきたら、このライブラリでなんか近しい事ができないかなーと探すための「タンスの引き出し的な存在」として重宝しております。

よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！

前の記事

必見！tableタグの見出し（ヘッダ）固定可能！「FixedM…

次の記事

jQueryだけでテーブルをエクセル・CSV出力できる！「Ta…