マニュアルキャンセル

Dreamweaver での jQuery UI Widget と Mobile Widget の使用

検索

最終更新日 : 2021年4月28日

jQuery UI Widget と Mobile Widget を使用して Dreamweaver Web プロジェクトにアプリケーションのような機能を追加する方法について説明します。コードを記述することなく、アコーディオン、タブ、スライダー、自動補完の各ボックスを挿入します。

Widget は、DHTML や JavaScript などの言語で記述され、Web ページに挿入して実行できる小規模な Web アプリケーションです。Widget の最大の利点は、Web ページでデスクトップの操作性を複製できることです。

アコーディオン、タブ、日付選択、スライダー、自動補完などの jQuery UI Widget を利用して、Web 上でデスクトップの操作性を実現できます。

たとえば、タブ Widget を使用して、デスクトップアプリケーションのダイアログボックスのタブ機能を複製できます。

また、Dreamweaver には、モバイル Web アプリでよく使用されるフォームエレメントなどの機能の作成に使用できる jQuery Mobile Widget のコレクションも用意されています。例えば、jQuery Mobile Widget を使用して、モバイルフレンドリなフォームエレメント（テキスト領域、チェックボックスなど）を追加することができます。

jQuery Widget の挿入

jQuery Widget を挿入すると、次のものが自動的にコードに追加されます。

すべての依存ファイルへの参照
Widget 用の jQuery API を含むスクリプトタグ追加 Widget は同じスクリプトタグに追加されます。

jQuery Widget について詳しくは、http://jqueryui.com/demos/ を参照してください。

注意：

jQuery 効果の場合、jquery-1.8.24.min.js ファイルは効果を追加したときに自動的に含まれるため、このファイルへの外部参照は追加されません。

ページ上の Widget を挿入する位置にカーソルがあることを確認します。
「挿入／jQuery UI」を選択し、挿入する Widget を選択します。

挿入パネルを使用した場合、Widget は挿入パネルの「jQuery UI」セクションに表示されます。

jQuery Widget を選択すると、そのプロパティがプロパティパネルに表示されます。

ライブビューで、または jQuery Widget をサポートするブラウザで、jQuery Widget をプレビューできます。

jQuery Widget の変更

変更する Widget を選択します。
プロパティパネルで、プロパティを変更します。

例えば、タブ Widget にタブを追加するには、Widget を選択し、プロパティパネルで「+」をクリックします。

モバイル jQuery Widget の挿入

jQuery Mobile Widget を使用するには、まず、挿入／jQuery Mobile／ページを選択して jQuery Mobile ページを定義する必要があります。

jQuery Mobile ファイルダイアログボックスが表示されます。

jQuery Mobile ファイルダイアログボックス
jQuery Mobile ファイルダイアログボックスのデフォルト設定を変更するか、パス設定をデフォルト値のままにして「OK」をクリックします。
表示されたページダイアログボックスで、ID フィールドに名前を入力し、モバイルページにヘッダーおよびフッターセクションを設けるかどうかに基づいてヘッダーおよびフッターの横のチェックボックスをオンまたはオフにします。

ページダイアログボックス
Dreamweaver に表示されたページで、ヘッダー、コンテンツ、フッターを、モバイルページで使用するテキスト、画像などのエレメントに置き換えます。

注意：

小さいモバイル画面に合うように短いテキストや小さい画像を使用することをお勧めします。
必要に応じて、jQuery Mobile Widget を追加します。
デバイスでページをプレビューします。

詳しくは、複数のデバイスでの Dreamweaver Web ページのプレビューを参照してください。
jQuery Mobile ページとすべての関連ファイルを保存します。