jQuery UIウィジェットを使ったページの作成

[train simpleアドビ認定トレーニングセンター] [trainsimple.com Dreamweaver CC新機能からの抜粋] >> jQuery UIには広範なウィジェットがあります よく使用するアコーディオンやタブも含まれます Dreamweaverは旧spryウィジェットの代わりに 新たにjQueryウィジェットを採用しました jQueryウィジェットでフォームの入力を簡易化し ユーザ体験を高めましょう まず、widgets.htmlを表示します 空のHTMLドキュメントです 次に挿入パネルをクリックします メニューから「jQuery UI」を選択します jQuery UIウィジェットが表示されます 例えば、「Accordion」を選択すると、ドキュメントにウィジェットが配置されます コンテンツを変更するには 周囲の青色のボーダーを選択します プロパティインスペクターにオプションが表示されます パネル数、アニメーション方法 中に表示するアイコンなどを指定できます 実際に使ってみるとすぐに慣れるでしょう フォームに戻ります webブラウザーでこのページを表示すると 標準的なフォームであることがわかります CSSスタイリングで書式設定されています ユーザーが手入力を省略できるように jQueryウィジェットでカレンダーを挿入し 日付を選べるようにします カレンダーはHTML 5にもありますが jQueryは広範なブラウザーとデバイスに 対応しているため、フォーム入力等に適しています いったんブラウザーを閉じます フォーム内のテキストフィールドを選択します 選択したテキストフィールドを削除します 挿入パネルに「Datepicker」があります 選択すると、Datepickerがフォームに配置され プロパティパネルに設定が表示されます このページは米国内での閲覧を想定しているため ロケールはEnglishにします オプションで、Change Month（月の変更） Change Year(年の変更)、インラインを選択できます Min Dateは1日にします Max Dateは100日まで指定できるようにします 次に、Number Of Monthsを指定します ここではデフォルトの1か月を使用します 設定が完了したら、ファイルを保存します これをwebブラウザーで表示します テキストフィールドをクリックすると カレンダーが表示されます 日付を選択すれば、自動的に入力されます これで日付情報の入力が簡単にできます 最新機能のjQuery UIウィジェットを紹介しました [train simple] [アドビ認定トレーニングセンター www.trainsimple.com]