Erstellen Sie zusammenklappbare Panels mit jQuery in Dreamweaver - dummies

Das jQuery UI-Akkordeon-Widget in Dreamweaver erleichtert das Hinzufügen von zusammenklappbaren Fenstern, die von Websitebesuchern geöffnet und geschlossen werden können, ohne die Webseite zu aktualisieren. Mit dieser jQuery-Funktion können Sie den Platz auf einer Seite besser nutzen, indem Sie mehr Informationen auf weniger Platz in einem Browserfenster anzeigen.

Sie können sehen, wie die faltbaren Panele des Akkordeons den Namen, das Foto und die Lebensraumvorlieben jedes Singvogels in dieser Naturwebsite enthalten. Das Ergebnis ist, dass Sie leicht die Namen aller Vögel auf einer Seite sehen können. Um die Beschreibung eines Vogels anzuzeigen, muss ein Benutzer nur auf die Registerkarte oben im Fenster klicken (wo der Name des Vogels erscheint) und das Fenster wird sofort geöffnet.

Das Foto und die Beschreibung für den orange-gekrönten Trällerer ist geöffnet, während die anderen auf der Seite geschlossen sind. Das Schöne an jQuery ist, dass die Seite nicht neu geladen werden muss, damit die Panels geöffnet oder geschlossen werden können. Klicken Sie einmal auf eine Registerkarte und ein Fenster wird sofort geöffnet. Klicken Sie auf eine andere Registerkarte, und diese Anzeige wird geöffnet, wenn das zuvor geöffnete Fenster geschlossen wird.

Zusammenklappbare Bedienfelder können zum Anzeigen von Text und Bildern sowie von Multimediadateien wie Audio-, Video- und Flash-Dateien verwendet werden.

Um ein Akkordeonfenster (oder viele andere erweiterte Funktionen in Dreamweaver) in einem Webbrowser anzuzeigen, klicken Sie oben links im Dreamweaver-Arbeitsbereich auf die Schaltfläche Livebild.

Nachdem Sie eine Reihe von Akkordeonbedienfeldern mit dem Menü jQuery-Benutzeroberfläche in Dreamweaver erstellt haben, können Sie eine Reihe von Bedienfeldeinstellungen mithilfe des Eigenschafteninspektors ändern, wie in den folgenden Anweisungen gezeigt.

Führen Sie die folgenden Schritte aus, um ein Akkordeonbedienfeld zu erstellen:

Setzen Sie den Cursor auf eine Seite, auf der die Akkordeonbedienfelder angezeigt werden sollen.
Wählen Sie Einfügen → jQuery-Benutzeroberfläche → Akkordeon, oder klicken Sie im jQuery-Bedienfeld "Benutzeroberfläche" auf "Akkordeon".

Auf der Seite wird eine zusammenklappbare Akkordeon-Panelgruppe jQuery UI mit drei Panels angezeigt.
Wählen Sie das Wort Abschnitt oben in jedem Feld aus und ersetzen Sie es durch den Text, der im Registerkartenbereich angezeigt werden soll.

Standardmäßig ist der Text im Bereich "Tab" ein einfacher Text. Sie können dies jedoch ändern, indem Sie die entsprechende CSS-Regel ändern oder den Text mit HTML-Tags formatieren, z. B. mit den Überschriften-Tags.
Wählen Sie das Wort Inhalt im Hauptbereich jedes Bedienfelds aus und geben Sie beliebigen Text oder Bilder ein, die angezeigt werden sollen.

Sie können Text in ein Fenster einfügen, so als würden Sie Text irgendwo anders auf der Seite einfügen. In ähnlicher Weise fügen Sie Bilder wie an einer beliebigen anderen Stelle auf einer Seite in Panels ein: Platzieren Sie den Cursor im Bedienfeld, wählen Sie Einfügen → Bild → Bild, und wählen Sie die GIF-, JPEG- oder PNG-Datei aus, die Sie anzeigen möchten.Sie können auch eine Photoshop-Datei auswählen, wenn Sie Dreamweaver zum Optimieren von Bildern verwenden möchten.

Wenn Sie Text in ein Bedienfeld einfügen, wählen Sie Bearbeiten → Inhalte einfügen, um den Formatierungsgrad festzulegen, den Sie in dem Text beibehalten möchten, den Sie in Dreamweaver einfügen. Die Beschränkung der erhaltenen Formatierung kann potenzielle Stilkonflikte reduzieren.
Um die Bedienfeldeinstellungen zu ändern, klicken Sie auf die blaue jQuery Accordion-Registerkarte am oberen Rand der Bedienfelder im Designbereich.

Wenn Sie auf die blaue Registerkarte klicken, werden die Bedienfeldeinstellungen im Eigenschafteninspektor angezeigt. (Ein korrektes Klicken auf den blauen Tabulator kann schwierig sein. Stellen Sie daher sicher, dass Sie auf den blauen Bereich klicken.) Klicken Sie irgendwo anders auf der Seite, und der Inspektor kehrt zu seinen Standardeinstellungen zurück.
Fügen Sie im Eigenschafteninspektor mithilfe des Felds "Panels" Panels hinzu oder entfernen Sie sie.

Klicken Sie zum Hinzufügen eines Panels auf das Pluszeichen (+) rechts neben dem Feld Panels. Um ein Bedienfeld aus einem Akkordeon-Set zu entfernen, wählen Sie zuerst den Bedienfeldnamen in der Dropdown-Liste Bedienfelder im Eigenschafteninspektor aus und klicken dann auf das Minuszeichen (@@ min).

Sie können ein weiteres Panel hinzufügen, indem Sie erneut auf das Pluszeichen klicken.
Ändern Sie, wie Panels geöffnet werden, indem Sie das Dropdown-Menü Ereignis verwenden.

Die Ereigniseinstellungen steuern, ob die Fenster geöffnet werden, wenn ein Benutzer auf eine Fensterlasche klickt (Klicken) oder einen Mauszeiger über die Registerkarte des Bedienfelds bewegt (Mouseover).
Stellen Sie andere Bedienfeldoptionen wie gewünscht ein.

Die Akkordeonoptionen im Eigenschafteninspektor sind optional und enthalten die Möglichkeit, einzelne oder alle Bereiche zu deaktivieren (Deaktivieren) und die Art und Weise zu animieren, wie Bereiche geöffnet und geschlossen werden (Dropdown-Liste Animate).
Wählen Sie Datei → Speichern, um die Seite zu speichern. Wenn das Dialogfeld "Abhängige Dateien kopieren" angezeigt wird, klicken Sie auf "OK", um alle zugehörigen Dateien zu erstellen.

Damit die Spry-Funktionen funktionieren, müssen Sie diese Dateien auf Ihren Webserver hochladen, wenn Sie die Webseite hochladen.
Um das Erscheinungsbild des Bedienfelds zu ändern, z. B. die Schriftart oder Textfarbe, bearbeiten Sie die entsprechende CSS-Regel.

Hinweis: Sie können die entsprechenden Stile für ein Akkordeonfenster erst bearbeiten, nachdem die Seite gespeichert wurde und Dreamweaver die entsprechenden CSS- und JavaScript-Dateien generiert hat.
Um zu sehen, wie die Fenster in einem Webbrowser angezeigt werden, klicken Sie auf das Globussymbol oben im Arbeitsbereich und wählen Sie den Browser aus, den Sie für die Vorschau der Seite verwenden möchten.

Wenn Sie Ihren Computer zur Vorschau einer Seite verwenden, die über eine interaktive Funktion verfügt, die JavaScript oder eine andere Programmierung erfordert, zeigen einige Webbrowser, einschließlich Internet Explorer, eine Warnung an, dass ActiveX-Steuerelemente die Seite anzeigen müssen.

Dies ist eine Sicherheitswarnung, die nur angezeigt wird, wenn die Seite auf demselben Computer geöffnet wird, auf dem die Seite gespeichert wurde. Wenn Sie die Seite auf einem Webserver veröffentlichen und dann über eine Internetverbindung anzeigen, wird dieser Fehler für Sie oder Ihre Websitebesucher nicht angezeigt.