ITコラム

jquery ui widget

jQuery

2018.07.23

jQuery【 jQuery UI 】widget 一覧

jQuery UI を利用する際に 重要な役割を担うのが widget( ウィジェット )です。
今回は、jQuery UI の widget について纏めてみます。

目次

 
1.widget とは
2.widget 一覧

1.widget とは

 
jQuery UI の widget( ウィジェット )は、ダイアログ等のコントロールを作成するために予め用意されているキットのようなイメージです。

widget の他にも、jQuery UI で予め用意されているものに interactions( インタラクション )や effects( エフェクト )があります。

interactions( インタラクション )
マウスベースの対話性を実現

draggable:要素のドラッグ機能を実現
droppable:要素のドロップ機能を実現
resizable:要素のリサイズを実現
selectable:複数要素を選択可能にする
sortable:要素のソート機能を実現

effects( エフェクト )
アニメーション効果が定義される等 jQuery で提供される effects 機能の上位機能を提供

color animation:色を変化させる
toggle class、add class、remove class、switch class:スタイルを変化させる
effect:各エフェクトを定義(blind、fade、slide等)
toggle:エフェクトの切り替え
hide、show:以上のエフェクト使用する

widget( ウィジェット )
コントロールを作成

accordion
autocomplete
button
datepicker
dialog
menu
progressbar
slider
spinner
tabs
tooltip

▲目次へ戻る

 

2.widget 一覧

 
主な widget は以下の通りです。
サンプルのコード等については、表中の各 widget 名をクリックして遷移先のページをご参照下さい。

accordion
 
必要に応じてコンテンツを開閉する widget


ヘッダー1

コンテンツの内容1
コンテンツの内容2
コンテンツの内容3

ヘッダー2

コンテンツの内容1
コンテンツの内容2
コンテンツの内容3

ヘッダー3

コンテンツの内容1
コンテンツの内容2
コンテンツの内容3

 

autocomplete
 
入力候補リストを表示して入力を補助する widget

星座名の中の一文字をひらがなで入力して下さい!

 

button
 
色々な HTML 要素に対してボタンを生成する widget

 
 

 

datepicker
 
カレンダーを表示する widget

 

dialog
 
メッセージ等を表示するダイアログを作成する widget

 

menu
 
階層メニューを作成する widget

 

progressbar
 
進捗状況等を表示するプログレスバーを作成する widget

 

slider
 
スライダーを作成する widget

 

spinner
 
スピナー( 数値を増減させるための上下ボタン )を作成する widget

 

tabs
 
折りたたみ機能等を持つタグを作成する widget

タブ1の内容

タブ2の内容

 

tooltip
 
ツールチップ( 吹き出し )を作成する widget

 

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.