jQuery UI を利用する際に 重要な役割を担うのが widget（ ウィジェット ）です。
今回は、jQuery UI の widget についてまとめて解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
jQuery UI の widget（ ウィジェット ）は、ダイアログ等のコントロールを作成するために予め用意されているキットのようなイメージです。
widget の他にも、jQuery UI で予め用意されているものに interactions（ インタラクション ）や effects（ エフェクト ）があります。
| interactions（ インタラクション ） |
|---|
|
マウスベースの対話性を実現
・draggable：要素のドラッグ機能を実現 |
| effects（ エフェクト ） |
|
アニメーション効果が定義される等 jQuery で提供される effects 機能の上位機能を提供
・color animation：色を変化させる |
| widget（ ウィジェット ） |
|
コントロールを作成
・accordion |
主な widget は以下の通りです。
サンプルのコード等については、表中の各 widget 名をクリックして遷移先のページをご参照下さい。
| accordion |
| 必要に応じてコンテンツを開閉する widget ヘッダー１
コンテンツの内容１
コンテンツの内容２ コンテンツの内容３ ヘッダー２
コンテンツの内容１
コンテンツの内容２ コンテンツの内容３ ヘッダー３
コンテンツの内容１
コンテンツの内容２ コンテンツの内容３
|
| autocomplete |
| 入力候補リストを表示して入力を補助する widget
星座名の中の一文字をひらがなで入力して下さい！
|
| button |
| 色々な HTML 要素に対してボタンを生成する widget
|
| datepicker |
| カレンダーを表示する widget
|
| dialog |
| メッセージ等を表示するダイアログを作成する widget
|
| menu |
| 階層メニューを作成する widget
|
| progressbar |
| 進捗状況等を表示するプログレスバーを作成する widget
|
| slider |
| スライダーを作成する widget
|
| spinner |
| スピナー（ 数値を増減させるための上下ボタン ）を作成する widget
|
| tabs |
| 折りたたみ機能等を持つタグを作成する widget
|
| tooltip |
| ツールチップ（ 吹き出し ）を作成する widget
|
jQuery UI の widget まとめについて、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.
