.net column
.NET開発者のためのブログメディア

データベースの整理

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

2021年03月17日

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を以下に記載します。

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

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

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

dialog

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

HTMLを以下に記載します。

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

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

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

sortable

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

HTMLを以下に記載します。

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

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

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

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

draggable

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

HTMLを以下に記載します。

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

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

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

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

autocomplete

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

HTMLを以下に記載します。

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

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

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

SE
動きがあることで非常に見栄えのするWebページができますね。

PM
そうですね。今回は基本的なコードを紹介しました。他にも様々なコードがありますので実際に書いて理解を深めていきましょう。

まとめ

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags