jQuery UIで動きのあるWebページを作ってみよう！

Javascript
jQuery
プログラミング言語
生活・便利

公開日時: 2021-03-17 　更新日時: 2022-06-09

この記事でわかること

システム エンジニア: jQuery UIとはそもそもどういったものでしょうか？

プロジェクト マネージャー: Webページを視覚的に見やすくするためのインターフェイスのことです。実際のコードを見ながら詳しく理解していきましょう。

jQuery UIで動きのあるWebページを作ってみよう！

今回は、jQuery UIを利用して動きのあるWebページを作成する方法を紹介します。
ここでは、datepicker：カレンダーから日付を選択、dialog：ダイアログを表示、sortable：ドラッグ＆ドロップで並び替え、draggable：ドラッグで移動、autocomplete：入力のオートコンプリート機能、について紹介します。

jQuery UIに興味のある方はぜひご覧ください。

datepicker

カレンダーから日付を選択できるUIであるdatepickerを紹介します。jQuery UIを使えるようにするにはjsとcssを指定します。ここではcdnでjQuery UIを利用します。

HTMLを以下に記載します。

<html>
  <head>
    <meta charset="utf-8">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- jQuery UI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  </head>
  <body>
    日付を選択してください。
    <input type="text" id="target">
  </body>
</html>

<html>

<head>

</head>

<body>

日付を選択してください。

</body>

</html>

jQueryは以下のように記述します。

$(function() {
  $('#target').datepicker({
    dateFormat: 'yy年mm月dd日',  // yyyy年mm月dd日
  });
});

$(function() {

$('#target').datepicker({

dateFormat: 'yy年mm月dd日', // yyyy年mm月dd日

});

実行結果は以下のようになります。

See the Pen
jquery_UI1 by kskumd (@kskumd)
on CodePen.

dialog

ダイアログを表示できるUIであるdialogを紹介します。

HTMLを以下に記載します。

<div id="target" style="display:none;">
  <p>message</p>
</div>
<input type="button" id="target_button" value="button" />

<p>message</p>

</div>

jQueryは以下のように記述します。

$(function() {
  $("#target_button").click(function() {
    $("#target").dialog({
      title:"Dialog title", // タイトル
      modal:true,           // モーダル表示
      width:300,            // 横幅(px)
      height:250,           // 縦幅(px)
      buttons: {            //ボタン
        "OK": function() {
          // ボタンクリック時に閉じる
          $(this).dialog("close");
        }
      }
    });
  });
});

$(function() {

$("#target_button").click(function() {

$("#target").dialog({

title:"Dialog title", // タイトル

modal:true, // モーダル表示

width:300, // 横幅(px)

height:250, // 縦幅(px)

buttons: { //ボタン

"OK": function() {

// ボタンクリック時に閉じる

$(this).dialog("close");

}

});

実行結果は以下のようになります。

See the Pen
jquery_UI2 by kskumd (@kskumd)
on CodePen.

sortable

ドラッグ＆ドロップで並び替えできるUIであるsortableを紹介します。

HTMLを以下に記載します。

<ul id="target">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
</ul>

</ul>

CSSは以下のように記述します。

#target li {
  list-style-type : none;
  padding:5px 10px;
  border-top:1px solid #84b2e0;
  border-bottom:1px solid #84b2e0;
}

#target li {

list-style-type : none;

padding:5px 10px;

border-top:1px solid #84b2e0;

border-bottom:1px solid #84b2e0;

}

jQueryは以下のように記述します。

$(function() {
  $("#target").sortable();
});

$(function() {

$("#target").sortable();

});

実行結果は以下のようになります。

See the Pen
jquery_UI3 by kskumd (@kskumd)
on CodePen.

draggable

ドラッグで移動できるUIであるdraggableを紹介します。

HTMLを以下に記載します。

<p id="target1">自由移動</p>
<p id="target2">横方向移動</p>
<p id="target3">縦方向移動</p>

<p id="target2">横方向移動</p>

<p id="target3">縦方向移動</p>

CSSは以下のように記述します。

p {
  width: 100px;
  height: 100px;
  background: orange;
}

p {

width: 100px;

height: 100px;

background: orange;

}

jQueryは以下のように記述します。

$(function() {
  // 自由移動
  $("#target1").draggable();
  // 横方向移動
  $("#target2").draggable({ axis: "x" });
  // 縦方向移動
  $("#target3").draggable({ axis: "y" });
});

$(function() {

// 自由移動

$("#target1").draggable();

// 横方向移動

$("#target2").draggable({ axis: "x" });

// 縦方向移動

$("#target3").draggable({ axis: "y" });

});

実行結果は以下のようになります。

See the Pen
jquery_UI4 by kskumd (@kskumd)
on CodePen.

autocomplete

入力項目の予測リストを表示するUIであるautocompleteを紹介します。

HTMLを以下に記載します。

jQueryのメソッドを入力してください：
<input id="target" type="search" size="20" maxlengh="50" />

1 2	jQueryのメソッドを入力してください： <input id="target" type="search" size="20" maxlengh="50" />

jQueryは以下のように記述します。

$(function() {
  // 候補リスト
  var funclist = [
    'text',
    'html',
    'prepend',
    'append',
    'after',
    'before',
    'wrap',
    'unwrap',
    'replaceWith',
    'remove',
    'reverse',
    'makeArray',
    'is',
    'filter',
    'has',
    'length',
    'insertAfter',
    'insertBefore',
    'parent',
    'find',
    'children',
    'eq',
    'clone',
    'sort',
    'not',
    'end',
    'empty',
    'toggleClass',
    'scrollTop',
    'scrollLeft',
    'show',
    'hide',
    'toggle',
    'get',
    'prev',
    'prevAll',
    'prevUntil',
    'next',
    'nextAll',
    'nextUntil',
    'siblings',
    'closest',
    'contents',
    'addBack',
    'addClass',
    'removeClass',
    'toggleClass',
    'css'
  ];

  // autocomplete
  $('#target').autocomplete({
    source: funclist, // データを指定
    autoFocus: true,  // リスト表示時に先頭にフォーカスするか
    delay: 500,       // リスト表示までのdelay時間
    minLength: 2      // autocompleteが機能する文字数
  });
});

$(function() {

// 候補リスト

var funclist = [

'text',

'html',

'prepend',

'append',

'after',

'before',

'wrap',

'unwrap',

'replaceWith',

'remove',

'reverse',

'makeArray',

'is',

'filter',

'has',

'length',

'insertAfter',

'insertBefore',

'parent',

'find',

'children',

'eq',

'clone',

'sort',

'not',

'end',

'empty',

'toggleClass',

'scrollTop',

'scrollLeft',

'show',

'hide',

'toggle',

'get',

'prev',

'prevAll',

'prevUntil',

'next',

'nextAll',

'nextUntil',

'siblings',

'closest',

'contents',

'addBack',

'addClass',

'removeClass',

'toggleClass',

'css'

];

// autocomplete

$('#target').autocomplete({

source: funclist, // データを指定

autoFocus: true, // リスト表示時に先頭にフォーカスするか

delay: 500, // リスト表示までのdelay時間

minLength: 2 // autocompleteが機能する文字数

});

実行結果は以下のようになります。

See the Pen
jquery_UI5 by kskumd (@kskumd)
on CodePen.

システム エンジニア: 動きがあることで非常に見栄えのするWebページができますね。

プロジェクト マネージャー: そうですね。今回は基本的なコードを紹介しました。他にも様々なコードがありますので実際に書いて理解を深めていきましょう。

まとめ

いかがでしたでしょうか。
jQuery UIを利用して動きのあるWebページを作成する方法として、datepicker：カレンダーから日付を選択、dialog：ダイアログを表示、sortable：ドラッグ＆ドロップで並び替え、draggable：ドラッグで移動、autocomplete：入力のオートコンプリート機能、について紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQuery UIで動きのあるWebページを作ってみよう！

jQuery UIで動きのあるWebページを作ってみよう！

datepicker

dialog

sortable

draggable

autocomplete

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

jQuery UIで動きのあるWebページを作ってみよう！

jQuery UIで動きのあるWebページを作ってみよう！

datepicker

dialog

sortable

draggable

autocomplete

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryの使い方とは？jQueryを正しく使いこなしてWebページ制作をしよう！

jQueryのfadeInの使い方は？fadeInというメソッドをマスターしよう！

ジェイクエリーとは？メリット・デメリット10選・導入する方法や記述方法を紹介

jQueryのon loadとは？jQueryのon loadは適切に使おう！

jQueryでAjax通信を行う方法とは？Ajax通信を正しく使いこなそう！