イトウ先生のTipsnoteDreamweaver CC・jQuery UI

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

イトウ先生のTipsnote:目次

【 Dreamweaver CCの新機能 〜 jQuery UI 〜 】 

今週は、Dreamweaver CCの新機能の中から、jQuery UIの新機能をご紹介します。
Dreamweaver CCでは、新たにjQuery UIの挿入に対応しました。この機能によって、これまで使用していたボタンやチェックボックスなどを、美しいjQueryのインターフェイスに容易に置き換えて使用できるようになります。
Dreamweaver上でjQuery UIを使用するために、特にJavaScriptやjQueryそのものの知識は必要なく、使用したい箇所に必要なUIを選択して挿入するだけ、となり、jQueryの設置に必要な様々な関連ファイルも、htmlを保存するだけで全てローカルサイトに自動的に保存される、という、FLASHコンテンツを挿入するときと同じ感覚で使用することが可能です。
それでは、Dreamweaver CCで使用可能な、jQueryUIのいくつかをご紹介したいと思います。

Spryは削除され、jQueryUIに

jQueryUIの前にまず、Dreamweaver CS6まで搭載されていたSpryは削除されました。既存ページのSpryコンテンツを変更することは可能ですが、新しいSpryコンテンツをDreamweaver CCで追加することはできなくなっています。

DWCC005

jQueryUI Accordion

まずは、挿入したい箇所にカーソルを入れ、挿入パネルまたは挿入メニューから、jQueryUIを選択します。

DWCC000

jQueryUIの中でも、divやp要素の表示として使用するのがAccordionやTabsになりますが、これまでのSpryアコーディオンに代わる機能としては、jQueryUIのAccordionを使用するといいでしょう。
jQueryUI Accordionの編集作業は、Spryと同じ感覚で使用できるかと思います。デザインビューの中で各パネル内を編集する場合は、パネルの上にマウスカーソルを添えて、目のアイコンが表示されたらクリックで選択し、各パネル内を操作します。

DWCC003

保存時には依存ファイルも自動的に保存されますが、jQuery-min.jsなどはローカルに保存されるため、jQueryサイトとCDNで直接つなぐ場合にはscriptタグを書き換えるといいでしょう。

DWCC004

jQueryUI Tabs

非常に有名ですが、上段下段にリストを使用したタブパネルです。編集はAccordionと同じで、編集するタブにマウスカーソルをのせて、目のアイコンをクリックで切り替えていきます。showメソッドとhideメソッドの値は、プロパティパネルから編集することが可能です。

DWCC007

jQueryUI Datepicker

Datepickerはフォーム等での日付を自動入力するUIで、ブロック型のカレンダーを返します。この機能は、Chromeなどの一部のブラウザではすでに、HTML5のみのマークアップでもこのカレンダーを返すようになっていますが、jQueryUIを使用することでブラウザを問わずこのカレンダーを返すことが可能になります。ロケールでカレンダーの言語指定が可能です。

DWCC008

jQueryUI Dialog

ブラウザのウインドウ内にダイアログボックスを返すUIです。divでマークアップされるため、divの中に、ダイアログ内で表示したい内容を入れておくことでダイアログボックスを返します。プロパティパネルで幅高さ等のサイズ情報の他、Positionで表示位置を指定しておくことが可能で、デフォルトのPositionはcenterになっています。

DWCC010

DWCC011

その他、SliderやButton、Radio Buttonなど、いくつかのjQueryUIが搭載されていますので、既存のページコンテンツとjQueryUIを差し替えて使ってみると、美しいjQueryUIをすぐに設置することが可能になるかと思いますので、ぜひ試してみてください。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop 2020の使い方・基本 | Illustrator 2020の使い方・基本 |
| Photoshop 2020の使い方・画像補正編 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects 2020の使い方・基本 | AfterEffects 2020の使い方・実践1 |
| Premiere Pro 2020の使い方・基本 |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |