jQuery【jQuery UI】widget一覧
jQuery UI を利用する際に 重要な役割を担うのが widget（ ウィジェット ）です。
今回は、jQuery UI の 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
コンテンツの内容１
コンテンツの内容２
コンテンツの内容３
コンテンツの内容１
コンテンツの内容２
コンテンツの内容３
コンテンツの内容１
コンテンツの内容２
コンテンツの内容３
|
| autocomplete |
入力候補リストを表示して入力を補助する widget
星座名の中の一文字をひらがなで入力して下さい！
|
| button |
色々な HTML 要素に対してボタンを生成する widget
|
| datepicker |
カレンダーを表示する widget
|
| dialog |
メッセージ等を表示するダイアログを作成する widget
|
| menu |
階層メニューを作成する widget
|
| progressbar |
進捗状況等を表示するプログレスバーを作成する widget
|
| slider |
スライダーを作成する widget
|
| spinner |
スピナー（ 数値を増減させるための上下ボタン ）を作成する widget
|
| tabs |
折りたたみ機能等を持つタグを作成する widget
|
| tooltip |
ツールチップ（ 吹き出し ）を作成する widget
|
▲目次へ戻る
3. まとめ
jQuery UI の widget まとめについて、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」
▲目次へ戻る
