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を以下に記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
jQueryは以下のように記述します。
1 2 3 4 5 |
$(function() { $('#target').datepicker({ dateFormat: 'yy年mm月dd日', // yyyy年mm月dd日 }); }); |
実行結果は以下のようになります。
See the Pen
jquery_UI1 by kskumd (@kskumd)
on CodePen.
dialog
ダイアログを表示できるUIであるdialogを紹介します。
HTMLを以下に記載します。
1 2 3 4 |
<div id="target" style="display:none;"> <p>message</p> </div> <input type="button" id="target_button" value="button" /> |
jQueryは以下のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(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を以下に記載します。
1 2 3 4 5 6 7 |
<ul id="target"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> <li>Item5</li> </ul> |
CSSは以下のように記述します。
1 2 3 4 5 6 |
#target li { list-style-type : none; padding:5px 10px; border-top:1px solid #84b2e0; border-bottom:1px solid #84b2e0; } |
jQueryは以下のように記述します。
1 2 3 |
$(function() { $("#target").sortable(); }); |
実行結果は以下のようになります。
See the Pen
jquery_UI3 by kskumd (@kskumd)
on CodePen.
draggable
ドラッグで移動できるUIであるdraggableを紹介します。
HTMLを以下に記載します。
1 2 3 |
<p id="target1">自由移動</p> <p id="target2">横方向移動</p> <p id="target3">縦方向移動</p> |
CSSは以下のように記述します。
1 2 3 4 5 |
p { width: 100px; height: 100px; background: orange; } |
jQueryは以下のように記述します。
1 2 3 4 5 6 7 8 |
$(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を以下に記載します。
1 2 |
jQueryのメソッドを入力してください: <input id="target" type="search" size="20" maxlengh="50" /> |
jQueryは以下のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
$(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.
エンジニア
マネージャー
まとめ
いかがでしたでしょうか。
jQuery UIを利用して動きのあるWebページを作成する方法として、datepicker:カレンダーから日付を選択、dialog:ダイアログを表示、sortable:ドラッグ&ドロップで並び替え、draggable:ドラッグで移動、autocomplete:入力のオートコンプリート機能、について紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)