Wie die Grundseitenlayout in CSS3 zu definieren

Das jQuery UI-Layout-Plug-in für CSS3 macht es unglaublich einfach, verschiedene Arten von Layouts für Ihre Website zu erstellen, ohne viel Zeit zu verbringen. Die Layouts können alle Arten von interessanten Features, wie zum Beispiel die Fähigkeit enthalten, um Partitionen dynamisch ändern. Stimmt; kann der Benutzer wählen, wie jeder Abschnitt einer Seite, um auf den Inhalt von Interesse zu konzentrieren, zu machen.

Die Beispiele auf der Website kann sehr komplex sein, aber es lohnt sich, sie zu überprüfen in jQuery UI-Layout-Plug-in. Dieses Plug-in können Sie erstaunlich funktionellen Stellen mit sehr wenig Programmierung erstellen helfen. Natürlich ist ein einfacheres Beispiel immer willkommen.

Dieses Beispiel zeigt die einfachste Layout, das Sie mit diesem Plug-in erstellen. Der Ausgangspunkt ist eine Referenz auf das Plug-in-Bibliothek hinzuzufügen. Dies ist ein Fall, in dem Sie müssen nichts herunterladen. (Können Sie finden komplette Code für dieses Beispiel in dem Kapitel 06 Layout-Ordner von der herunterladbaren Code wie Layout.HTML.)

Um die Scheiben für dieses Beispiel verwendet zu erstellen, definieren Sie

Tags für Norden, Süden, Osten, Westen und in der Mitte Scheiben. Von allen Scheiben, ist im mittleren Bereich die einzige, die erforderlich ist.

Center
Nördlich
 
Süd
Osten
 
West

Beachten Sie, dass jede Scheibe einen bestimmten Klassenwert hat damit verbunden. Um eine Scheibe an einem bestimmten Ort zu erstellen, müssen Sie die zugehörige vordefinierte Klasse. Andernfalls wird die Layout-Plug-in wird das nicht erkennen

als Scheibe. Das Objekt in jedem
definiert den Inhalt für die Scheibe.

Das Beispiel erfordert auch den Einsatz eines Skripts, die Scheiben mit dem Plug-in zu verknüpfen. Das folgende Skript ist alles, was Sie brauchen in diesem Beispiel funktionsfähig zu machen.

Die Argumente, die Sie auf das Layout () Funktion das Aussehen der Scheiben bestimmen. Das applyDemoStyles Argument stellt die einfachste Layout-Methode.

bild0.jpg

Sie können zwei Aufgaben mit dem Beispiel auszuführen. Beachten Sie die dunkle Fläche in der Mitte jeder Zeile, die Scheiben zu trennen. Diese dunklen Bereich klicken, wird dieses Bereich zu schließen. Beim Anklicken wird wieder das Fenster wieder zu öffnen. Wenn Sie den Mauszeiger über eine der Leitungen bewegen, verwandelt er sich in einen Pfeil mit zwei Spitzen. Dieser Pfeil können Sie die Scheibe die Größe je nach Bedarf.

Ähnliche

Menü