Designing Your Seite Rund ein jQuery UI Theme

Die Freisetzung von jQuery UI 1,5 brachte die ThemeRoller , die eine schnelle und einfache Möglichkeit zum Anpassen und lade dir einen Satz von jQuery "Widgets" für den Einsatz auf einer Webseite ist.

Einfach aus einem der vorgefertigten Themen wählen, oder passen Sie die Einstellungen Ihren Wünschen entsprechend und laden Sie das Thema. Ihr Download wird alle notwendigen Dateien, um für alle diese Widgets zu arbeiten, und eine Demo-Datei mit allen von ihnen auf einer Seite.

In der Tat könnte diese vorgefertigten Thema, das Sie gut dienen als Ausgangspunkt für ein neues Design. Lassen Sie uns manipulieren Sie ein Design herunter in einen Basis-Website mit den Tabs und Akkordeon.

Reinigung Haus

Wir werden die Registerkarten-Widget für unsere Haupt-Content-Bereich der Website, und dem Akkordeon für die Sidebar verwenden. Ein guter erster Schritt wäre, um Ihre Ordner organisiert und starten Sie dann das Entfernen zusätzlicher Code aus den HTML-und CSS-Dateien.

Ich begann durch Umbenennung der Datei index.html demo.html und der CSS-Datei style.css zu.

Dann entfernte ich alle die CSS von der CSS-Datei, die mit etwas anderem als den Tabs und dem Akkordeon zu tun hatte. Es gibt eine Menge zusätzlicher Müll in der Standard-CSS-Datei, einschließlich setzt auf Tonnen von Elementen, die nicht wirklich brauchen, wenn Sie einen globalen Reset verwenden. Sauberes Haus am Willen hier.

Dann tun Sie das Gleiche in der HTML-Datei, die Beseitigung aller Code, der nicht grundlegende Struktur oder ein Teil der Registerkarten oder Akkordeon. Hier ist, was meine Seite wie nach Aufräumen aussieht:

Struktur

Die Registerkarten sind sinnvoll, um als Haupt-Content-Bereich einer Website zu nutzen. Jede der Registerkarten lassen sich im Wesentlichen ein anderer Bereich der Website sein. Zunächst einmal lässt wickeln Sie die gesamte Website in einem div mit der ID-Seite zu wickeln, so können wir es Mitte und stellen Sie eine feste Breite. Dann, da sowohl die Registerkarten und Akkordeon sind bereits in DIV ist, können wir sie gezielt mit CSS, setzen statische Breiten und schweben sie auf beiden Seiten. Dies ist, was die CSS aussehen könnte:

#page-wrap { width: 900px; margin: 0 auto; } #accordion { width: 280px; float: right; } #tabs { width: 600px; float: left; } 

Jetzt sind die Tabs werden auf mehr von einem Hauptinhalt Blick nehmen und das Akkordeon ist wie eine Seitenleiste. Jeder Reiter kann wie eine andere Bereich der Website zu funktionieren, nur es ist eine sehr coole dynamische Art und Weise, es zu tun seit dem Einschalten Seiten wird keine Seite laden überhaupt benötigen!

Hier ist, was meine Seite wie nach ein bisschen Umstrukturierung aussieht:

Konkretisierung Inhalt

Lassen Sie uns diesen Standard-Content von dort zu starten und Einstecken in unseren eigenen Sachen. Nun, das ist immer noch eine Demo, damit ich die meisten, dass Lorem Ipsum Zeug verlassen ... Aber jetzt werfen Sie einen Blick werfen, nachdem ich in ein paar Grafiken und einige Plugin realistischer Inhalt:

Finale

Das ganze Seite dauerte etwa 20 Minuten, um zusammen zu werfen. Es ist kein Meisterwerk mit allen Mitteln, aber es ist ein guter Anfang auf einem schön und sauber aussehende Webseite. Geht zu zeigen, wie schnell Sie loslegen Erstellen von Web-Seiten und sogar mit kühlen dynamische Funktionalität durch jQuery UI und der ThemeRoller.

DEMO

Dateien herunterladen