DreamweaverでjQueryを使用して折りたたみパネルを作成する方法 - ダミー

DreamweaverのjQuery UIアコーディオンウィジェットは、サイト訪問者がWebページを更新せずに開いたり閉じたりできる折りたたみ可能なパネルを簡単に追加できます。このjQuery機能を使用すると、ブラウザウィンドウ内のより少ないスペースに多くの情報を表示して、ページ上のスペースをより有効に活用できます。

この自然のウェブサイトで、アコーデオン折りたたみパネルに各歌詞の名前、写真、および生息環境の好みがどのように含まれているかを見ることができます。その結果、1ページにすべての鳥の名前が簡単に表示されます。すべての鳥の説明を表示するには、鳥の名前が表示されているパネルの上部にあるタブをクリックするだけで、パネルが即座に開きます。

<！ - 1 - >

オレンジ色のひばりの写真と説明は開いていますが、他のページは閉じています。 jQueryの美しさは、パネルを開いたり閉じたりするためにページを再ロードする必要がないことです。タブを一度クリックすると、パネルが即座に開きます。別のタブをクリックすると、以前に開いたパネルが閉じられるとそのパネルが開きます。

<！ - 2 - >

折りたたみ可能なパネルは、テキスト、イメージ、およびオーディオ、ビデオ、Flashファイルなどのマルチメディアファイルを表示するために使用できます。

アコーディオンパネル（またはDreamweaverの他の多くの高度な機能）をWebブラウザに表示するには、Dreamweaverワークスペースの左上にあるライブビューボタンをクリックする必要があります。

<！ - 3 - >

DreamweaverでjQuery UIメニューを使用して一連のアコーディオンパネルを作成した後、次の手順に従って、プロパティインスペクタを使用してパネル設定の数を変更できます。

アコーディオンパネルセットを作成するには、次の手順に従います。

アコーディオンパネルを表示するページにカーソルを置きます。
「挿入」→「jQuery UI」→「アコーディオン」を選択するか、「jQuery UI挿入」パネルの「アコーディオン」項目をクリックします。

3つのパネルを持つjQuery UI折りたたみアコーディオンパネルグループがページに表示されます。
各パネルの上部にある単語セクションを選択し、パネルのタブ領域に表示するテキストに置き換えます。

デフォルトでは、タブ領域のテキストはプレーンテキストですが、対応するCSSルールを変更するか、見出しタグなどのHTMLタグを使用してテキストを書式設定することで変更できます。
各パネルのメインエリアでコンテンツという単語を選択し、表示するテキストを入力します。

ページにテキストを貼り付けるのと同じように、パネルにテキストを貼り付けることができます。同様に、ページのどこかにあるように、パネルに画像を挿入します。パネルにカーソルを置き、挿入→画像→画像を選択し、表示するGIF、JPEG、またはPNGファイルを選択します。Dreamweaverを使用してイメージを最適化する場合は、Photoshopファイルを選択することもできます。

テキストをパネルに貼り付けるときは、編集→形式を選択を選択して、Dreamweaverに貼り付けるテキストに保存する書式の量を選択します。フォーマットの量を制限しておくと、潜在的なスタイルの競合を減らすことができます。
パネル設定を変更するには、デザイン領域のパネルの上部にある青いjQueryアコーディオンタブをクリックします。

青色のタブをクリックすると、パネルの設定がプロパティインスペクタに表示されます。（青色のタブを正しくクリックするのは難しいかもしれませんので、青色の領域をクリックしてください）ページ上の他の場所をクリックすると、インスペクタはデフォルト設定に戻ります。
プロパティインスペクタのパネルフィールドを使用してパネルを追加または削除します。

パネルを追加するには、パネルフィールドの右側にあるプラス記号（+）をクリックします。アコーディオンセットからパネルを削除するには、まず、プロパティインスペクタのパネルドロップダウンリストでパネル名を選択し、マイナス記号（@@ min）をクリックします。

もう一度プラス記号をクリックして別のパネルを追加できます。
[イベント]ドロップダウンメニューを使用してパネルを開く方法を変更します。

イベント設定は、ユーザーがパネルタブをクリック（クリック）したときにパネルを開くか、パネルタブ上でカーソルをロールする（マウスオーバー）かを制御します。
必要に応じて他のパネルオプションを設定します。

プロパティインスペクタのアコーディオンオプションは任意であり、パネルの一部または全部を無効にする（Disable）パネルの開閉方法をアニメーション化する（Animateドロップダウンリスト）機能が含まれています。
ファイル→保存を選択してページを保存します。 [依存ファイルのコピー]ダイアログボックスが表示されたら、[OK]をクリックしてすべての関連ファイルを生成します。

Spry機能を使用するには、Webページをアップロードするときに、これらのファイルをWebサーバーにアップロードする必要があります。
フォントの面やテキストの色など、パネルの外観を変更するには、対応するCSSルールを編集します。

メモ： ページが保存され、Dreamweaverによって対応するCSSおよびJavaScriptファイルが生成されるまで、アコーディオンパネルの対応するスタイルを編集することはできません。
パネルがWebブラウザでどのように表示されるかを確認するには、ワークスペースの上部にある地球儀アイコンをクリックし、ページをプレビューするために使用するブラウザを選択します。

JavaScriptや他のプログラミングが必要なインタラクティブな機能を持つページをプレビューするときに、Internet Explorerを含むいくつかのWebブラウザには、ActiveXコントロールがページを表示できるようにする必要があるという警告が表示されます。

これは、ページが保存されている同じコンピュータでページが開かれた場合にのみ表示されるセキュリティ警告です。ページをWebサーバーに公開してインターネット接続経由で表示すると、このエラーはユーザーまたはサイト訪問者には表示されません。