So erstellen Sie reduzierbare Fenster mit jQuery in Dreamweaver
Das jQuery UI Akkordeon-Widget in Dreamweaver macht es einfach zusammenklappbaren Platten hinzuzufügen, die Website-Besucher ohne Aktualisieren der Web-Seite öffnen und schließen kann. Das jQuery-Funktion können Sie durch die Anzeige mehr Informationen auf weniger Raum in einem Browser-Fenster eine bessere Nutzung des Raumes auf einer Seite zu machen.
Sie können sehen, wie die Ziehharmonika zusammenklappbaren Platten, die die Namen, Foto und Habitatpräferenzen jedes Singvogel in dieser Art Website enthalten. Das Ergebnis ist, dass man leicht die Namen aller Vögel auf einer Seite zu sehen. Um die Beschreibung der Vögel zu sehen, muss ein Benutzer klicken Sie nur die Lasche an der Oberseite der Platte (wo der Vogelname angezeigt wird), und das Panel öffnet sofort.
Das Foto und die Beschreibung des Orange-gekrönte wobbelton ist offen, während die anderen auf der Seite geschlossen sind. Die Schönheit von jQuery ist, dass die Seite nicht neu geladen werden muss, für die Platten oder in der Nähe zu öffnen. Klicken Sie einmal auf eine Registerkarte und ein Panel öffnet sofort. Klicken Sie auf ein anderes Register, und das Fenster wird geöffnet, wie das zuvor geöffnete Platte schließt.
Klapp-Panels können Text und Bilder verwendet werden, um anzuzeigen sowie Multimedia-Dateien wie Audio-, Video- und Flash-Dateien.
Um ein Akkordeon-Panel (oder viele andere erweiterte Funktionen in Dreamweaver) sehen, wie es in einem Web-Browser angezeigt wird, müssen Sie die Live-Ansicht auf die Schaltfläche oben links im Dreamweaver-Arbeitsbereich klicken.
Nachdem Sie eine Reihe von Akkordeon-Panels mit dem jQuery UI-Menü in Dreamweaver erstellen, können Sie eine Reihe von Feldeinstellungen ändern Sie den Eigenschafteninspektor, indem Sie, wie in der Anleitung gezeigt, die folgen.
Führen Sie die folgenden Schritte, um ein Akkordeon-Panel-Set zu erstellen:
Setzen Sie den Cursor auf einer Seite, wo Sie die Akkordeon-Panels angezeigt werden soll.
Wählen Sie Einfügen-jQuery UI-Akkordeon, oder klicken Sie auf das Akkordeon-Element in der jQuery UI Insert-Panel.
Ein jQuery UI zusammenklappbar Akkordeon-Panel-Gruppe mit drei Platten auf der Seite erscheint.
Wählen Sie das Wort Abschnitt an der Spitze jeder Platte, und ersetzen Sie es mit dem Text, den Sie Tab-Bereich in das Gremium erscheinen soll.
Standardmäßig ist der Text in der Tab-Bereich Klartext, aber Sie können, die durch die entsprechende CSS-Regel ändern zu ändern oder die Formatierung der Text HTML-Tags verwenden, wie zum Beispiel die Überschriften-Tags.
Wählen Sie das Wort Inhalt Im Hauptbereich der jeder Platte, und geben Sie einen beliebigen Text oder Bilder, die Sie anzeigen möchten.
Sie können Text in ein Panel einfügen wie Sie Text irgendwo sonst auf der Seite einfügen würde. In ähnlicher Weise fügen Sie Bilder in Form von Tafeln genauso wie Sie auf einer Seite irgendwo sonst würde: Setzen Sie den Cursor in das Panel, wählen Sie Einfügen-Bild-Bild, und wählen Sie das GIF, JPEG oder PNG-Datei, die Sie anzeigen möchten. Sie können auch eine Photoshop-Datei auswählen, wenn Dreamweaver, um Bilder zu optimieren.
Wenn Sie Text in ein Panel einfügen, wählen Sie Bearbeiten-Inhalte einfügen, die Menge der Formatierung Sie in dem Text, den Sie in Dreamweaver einfügen zu erhalten möchten. Die Begrenzung der Menge der erhaltenen Formatierung kann auf mögliche Konflikte Stil abgeholzt.
Um die Feldeinstellungen ändern, klicken Sie auf die blaue jQuery Akkordeon Register am oberen Rand der Platten in den Designbereich.
Wenn Sie auf die blaue Registerkarte klicken, werden die Bedienfeld-Einstellungen im Eigenschafteninspektor. (Korrekt die blaue Registerkarte klicken kann tückisch sein, so stellen Sie sicher, dass Sie den blauen Bereich klicken.) Klicken Sie irgendwo sonst auf der Seite, und der Inspektor wieder auf die Standardeinstellungen.
Hinzufügen oder Entfernen von Platten die Platten-Feld im Eigenschafteninspektor.
Um ein Bedienfeld hinzuzufügen, klicken Sie auf das Pluszeichen (+) auf der rechten Seite des Panels Feld. Um ein Bedienfeld aus einem Akkordeon-Set zu entfernen, wählen Sie zunächst die Panel-Namens in der Panels Dropdown-Liste im Eigenschafteninspektor und klicken Sie dann auf das Minuszeichen (@@ min).
Sie können wieder eine andere Platte, indem Sie auf das Pluszeichen hinzufügen.
Ändern, wie Platten mit dem Event-Drop-Down-Menü geöffnet werden.
Die Event-Einstellungen steuern, ob die Platten öffnen, wenn ein Benutzer auf einem Panel-Register klickt (Klick) oder rollt ein Cursor über das Panel-Register (Mouseover).
Stellen Sie andere Optionen im Bedienfeld, wie gewünscht.
Die Akkordeon-Optionen im Eigenschafteninspektor sind optional und umfassen die Fähigkeit, einige oder alle Platten (Disable) und animieren die Art und Weise Platten öffnen und schließen (Animate Dropdown-Liste) zu deaktivieren.
Wählen Sie Datei-Speichern, um die seiten- speichern, wenn der Abhängige Dateien kopieren Dialogfeld angezeigt wird, klicken Sie auf OK, um alle zugehörigen Dateien zu generieren.
Für die Spry-Funktionen zu arbeiten, müssen Sie diese Dateien auf Ihren Webserver hochladen, wenn Sie die Webseite hochladen.
Um das Aussehen der Platte, wie die Schriftart oder Textfarbe zu ändern, bearbeiten Sie die entsprechende CSS-Regel.
Hinweis: Sie können nicht die entsprechenden Stile für ein Akkordeon-Panel bearbeiten, bis die Seite gespeichert wurde, und Dreamweaver die entsprechende CSS und javascript-Dateien erzeugt hat.
Um zu sehen, wie die Platten in einem Web-Browser angezeigt wird, klicken Sie auf das Globus-Symbol oben im Arbeitsbereich und wählen Sie den Browser, den Sie verwenden möchten, um die Seite anzuzeigen.
Wenn Sie Ihren Computer verwenden, eine Seite in der Vorschau anzeigen, die eine interaktive Funktion erfordert javascript oder eine andere Programmierung hat, werden einige Web-Browser, wie Internet Explorer, eine Warnung besagt angezeigt, dass Sie erlauben müssen ActiveX-Steuerelemente um die Seite anzuzeigen.
Dies ist eine Sicherheitswarnung, die nur angezeigt, wenn die Seite auf demselben Computer geöffnet wird, in dem die Seite gespeichert wird. Wenn Sie die Seite zu einem Web-Server veröffentlichen und dann über eine Internetverbindung anzeigen, wird dieser Fehler nicht für Sie oder Ihre Website-Besucher angezeigt.