Designing Your Page Rund ein jQuery UI Thema

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

Wählen Sie einfach aus einem der vorgefertigten Designs, oder passen Sie die Einstellungen Ihren Wünschen entsprechend anpassen 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önnten diese vorgefertigten Thema, das Sie auch als Ausgangspunkt für ein neues Design zu dienen. Let's manipulieren ein Thema herunterzuladen in eine Grund-Website mit den Tabs und Akkordeon.

Cleaning House

Wir werden die Registerkarten Widget für unsere wichtigsten Content-Bereich der Website zu nutzen, und das Akkordeon für die Seitenleiste. Ein guter erster Schritt wäre, um die Ordner zu erhalten organisiert und starten Sie dann die Beseitigung zusätzlichen Code aus der HTML-und CSS-Dateien.

Ich begann durch die erneute Benennung der demo.html Datei index.html und der CSS-Datei style.css.

Dann entfernte ich alle CSS von der CSS-Datei, die mit anderen als den Tabs und das 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 eine globale Reset verwenden. Sauberkeit wird hier am Haus.

Dann haben die gleiche Aufgabe in der HTML-Datei, die Beseitigung aller Code, der nicht Grundstruktur oder einen Teil des Tabs oder Akkordeon. Hier ist, was meine Seite aussieht, wenn Reinigung:

Struktur

Die Reiter machen durchaus Sinn, als Haupt-Content-Bereich einer Website zu nutzen. Jede der Registerkarten können Sie im Grunde einen anderen Bereich der Website. Zunächst einmal können wickeln Sie die gesamte Website in einem div mit der ID-Seite wickeln, damit wir es Mitte setzen und eine feste Breite. Dann, da sowohl die Laschen und Akkordeon sind bereits in Umhüllung div's, können wir sie mit CSS Ziel gesetzt statische Breiten und schweben sie auf beiden Seiten. Dies ist, was die CSS könnte folgendermaßen aussehen:

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

Nun ist die Registerkarten nehmen mehr aus einem Haupt-Inhalte suchen und das Akkordeon ist wie ein Kasten. Jeder Reiter kann wie ein anderer Teil der Site-Funktion, aber es ist eine sehr coole dynamische Art und Weise, um es seit dem Wechsel-Seiten wird keine Seite geladen überhaupt benötigen!

Hier ist, was meine Seite aussieht, wenn ein bisschen der Umstrukturierung:

Konkretisierung Inhalt

Let's get, dass Standard-Content von dort und beginnen Einstecken in unseren eigenen Sachen. Nun, das ist noch eine Demo, damit ich die meisten, dass Lorem Ipsum stuff ... überlassen wir aber nun einen Blick, nachdem ich in ein paar Grafiken zu werfen und einige Plugin realistischer Inhalt:

Final

Die ganze Seite dauerte etwa 20 Minuten zusammen zu werfen. Es ist kein Meisterwerk mit allen Mitteln, aber es ist ein guter Anfang für einen schönen und sauberen Ort suchen. Goes zu zeigen, wie schnell Sie kann es losgehen Erstellen von Web-Seiten und sogar unter cool dynamische Funktionalität durch jQuery und die UI-themeroller.

VIEW DEMO

Download-Dateien