gbChild v1.1
Mit gbChild können Sie jedes Element und deren Kinder (Child) unter Berücksichtung von Tag-Name, ID und Klasse mit Style-Sheets manipulieren. Somit können Sie nachträglich die Internetseite umformatieren, ohne den Quellcode umzustellen und das CSS neu anzupassen. Dabei können Sie ein Element und deren Kinder durch Tag-Name, ID oder Klasse in Ihrer Position gezielt ansprechen und die Formatierung ändern.
Mit Style-Sheets können Sie durch :first-child oder :last-child die Formatierung bestimmter Elemente auf der ersten oder letzten Position ändern. Das ist gut, aber gbChild geht hier ein Schritt weiter. Es hilft Ihnen z.B. jedes zweite, oder auch nur das dritte, oder nur das vierte und fünfte Element um zu formatieren.
Demo
Erste Liste mit class="list1 list". Hier wird der Hintergrund von jedem zweiten Eintrag eingefärbt und Eintrag 1 und 3 werden Fett dargestellt. Die Zusatz-Klasse "list" sorgt dafür, dass die erste Liste Grau eingerahmt wird.
- Ich bin der Eintrag mit der Nummer 1
- Ich bin der Eintrag mit der Nummer 2
- Ich bin der Eintrag mit der Nummer 3
- Ich bin der Eintrag mit der Nummer 4
- Ich bin der Eintrag mit der Nummer 5
- Ich bin der Eintrag mit der Nummer 6
Zweite Liste mit class="list1 list". Hier wird auch der Hintergrund von jedem zweiten Eintrag eingefärbt und Eintrag 1 und 3 werden Fett dargestellt. Die Zusatz-Klasse "list" sorgt dafür, dass die zweite Liste Orange eingerahmt und die Textausrichtung Rechts dargestellt wird.
- Ich bin der Eintrag mit der Nummer 1
- Ich bin der Eintrag mit der Nummer 2
- Ich bin der Eintrag mit der Nummer 3
Dritte Liste mit class="list2 list". Hier wird der Hintergrund vom ersten und letzten (firstlast) Eintrag eingefärbt. Die Zusatz-Klasse "list" sorgt dafür, dass in dieser Liste die Einträge Fett und Orange dargestellt werden.
- Ich bin der Eintrag mit der Nummer 1
- Ich bin der Eintrag mit der Nummer 2
- Ich bin der Eintrag mit der Nummer 3
- Ich bin der Eintrag mit der Nummer 4
- Ich bin der Eintrag mit der Nummer 5
- Ich bin der Eintrag mit der Nummer 6
Alle Listen mit class="list" und deren Kinder wurden zusätzlich mit margin, padding und list-style bearbeitet.
Einbinden
- Laden Sie die benötigt Daten » hier herunter.
- Binden Sie die JavaScript Dateien in Ihrer Seite ein.<script type="text/javascript" src="js/moo1.3.1_compile.js"></script>
<script type="text/javascript" src="js/gbchild_compile.js"></script> - Erstellen Sie ihre Optionen für die Elemente die formatiert werden sollen in einen Array (childData). In jedem Array-Eintrag wird die Elementbezeichnung, Position und Style Sheet Anweisungen in einen Objekt eingetragen. Danach übergeben Sie Ihre Optionen an die Klasse.<script type="text/javascript">
var childOpt = {
childData: [
{"childElement": ".list1 li", "childNumber": {"nThNr": 2, "setStyle": true}, "childStyle" : {"background": "#e1e1e1"}},
{"childElement": ".list1 li", "childNumber": [1,3], "childStyle" : {"font-weight": "bold"}},
{"childElement": ".list2 li", "childNumber": "firstlast", "childStyle" : {"background": "#e1e1e1"}},
{"childElement": "ul.list", "childNumber": "first", "childStyle" : {"border": "1px solid #e1e1e1"}},
{"childElement": "ul.list", "childNumber": 2, "childStyle" : {"border": "1px solid #ff4e00", "text-align": "right"}},
{"childElement": "ul.list", "childNumber": 3, "childStyle" : {"font-weight": "bold", "color": "#ff4e00"}},
{"childElement": "ul.list", "childNumber": "all", "childStyle" : {"padding": "0px", "margin": "4px 0 16px 28px", "margin-left": 0}},
{"childElement": "ul.list li", "childNumber": "all", "childStyle" : {"margin": "0px", "padding": "2px", "list-style": "none"}}
]
};
var myChild = new gbChild(childOpt);
</script>
Erläuterung
- childData
In diesem Array werden je Eintrag alle Einstellung für Elementbezeichnung, Position und Style Sheet Anweisungen eingetragen.
Z.B.childData: [{"childElement": ".list1 li", "childNumber": {"nThNr": 2, "setStyle": true}, "childStyle" : {"background": "#e1e1e1"}}] - childElement
Hier notieren Sie die Elemente, die formatiert werden sollen.
Z.B."childElement": ".list1 li" - childNumber
Dieser Eintrag bestimmt die Position der Elemente die formatiert werden sollen.
Dafür stehen Ihnen die folgenden vier Arten der Positionsermittlung zur Verfügung:
- Zahl
Eine Positions-Nummer für das Element, das formatiert werden soll.
Z.B."childNumber": 3 - Array
Ein Array mit mehreren Positions-Nummern für die Elemente, die formatiert werden sollen.
Z.B."childNumber": [1,3,4] - String
Bestimmung der Position durch ersten ("first"), letzten ("last"), ersten und letzten ("firstlast") oder alle ("all")
Z.B.
"childNumber": "firstlast" - Objekt
Jede X-te Position formatieren (ja oder nein). Das Objekt benötigt zwei Anweisungen nThNr: Zahl und setStyle: Boolesche Variable (true, flase).
Durch folgende Anweisung wird z.B. jeder zweite Eintrag formatiert:"childNumber": {"nThNr": 2, "setStyle": true}
Durch folgende Anweisung wird z.B. jedes Element bis auf jedes dritte formatiert:"childNumber": {"nThNr": 3, "setStyle": false}
- Zahl
- childStyle
Hier stehen Ihre Style Sheet Anweisungen in einem Objekt.
Z.B.
"childStyle" : {"border": "1px solid #ff4e00", "text-align": "right"}
Kommentare schreiben
2 Kommentare
gb media
02.03.2011 16:32:13
Hallo Erika,
danke für die Ergänzung.
Vieles ist mit CSS3 möglich, leider ist es noch kein Standard.
Ein Beispiel wäre gbReflection (http://www.gb-media.biz/de/downloads/gbreflection.html), das mir mit CSS3 besser gefällt.
Bei gbTrigo (http://www.gb-media.biz/de/downloads/gbtrigo.html) kommt die CSS3 Spiegelung zum Einsatz (Chrome und Safari zeigen es an).
Viele Grüße
Erika
28.02.2011 19:58:30
Hallo,
das hier vorgestellte ist inzwischen übrigends auf per CSS3 in modernen Browsern möglich, also z.B. siehe:
- http://reference.sitepoint.com/css/pseudoclass-nthchild
- http://www.css-cafe.de/css3_selekt_02.php
Viele Grüße,
Erika