.NET開発者のためのブログメディア
jQuery UIで動きのあるWebページを作ってみよう！
- SE
- jQuery UIとはそもそもどういったものでしょうか？
- PM
- 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.
- SE
- 動きがあることで非常に見栄えのするWebページができますね。
- PM
- そうですね。今回は基本的なコードを紹介しました。他にも様々なコードがありますので実際に書いて理解を深めていきましょう。
まとめ
いかがでしたでしょうか。
jQuery UIを利用して動きのあるWebページを作成する方法として、datepicker：カレンダーから日付を選択、dialog：ダイアログを表示、sortable：ドラッグ＆ドロップで並び替え、draggable：ドラッグで移動、autocomplete：入力のオートコンプリート機能、について紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)