Statistiken

Benutzer
2
Beiträge
18
Anzahl Beitragshäufigkeit
37546

Wer ist online

Aktuell sind 15 Gäste und keine Mitglieder online

Eigene Inhalte Logo

Eigene Inhalte Info

Diese Web-Präsentation ist zu Testzwecken mit Joomla! 3.x, Bootstrap 2 und eigenem JavaScript installiert. Sie soll aufzeigen was mit Joomla! 3.x und Bootstrap 2 möglich ist, evtl. Fehler aufzeigen, und helfen dafür Lösungen zu finden. Es ist eine reine Demoseite und dient ausschließlich zur Veranschaulichung.

Tabs Beispiel

 

Tab 1

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen.

Tab 2

Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. Natürlich nur dann, wenn sich alle an diese Standards halten. Das gilt für Browser wie Firefox, Opera, Safari und den Internet Explorer ebenso wie für die Darstellung in Handys. Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt.

Tab 3

Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel! Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.

Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.

 


Aufbau im Beitrag für Bootstraps nav nav-tabs

Für den Aufbau in einem Beitrag ist es sehr hilfreich sich einen html-Editor wie zB. Notepad++ zur Hilfe zu ziehen, um dort den Quellcode zu schreiben. Dieser wird dann später in den Beitrag über copy-Funktion, bei ausgeschaltetem WYSIWYG (What You See Is What You Get) über den Button "Editor an/aus", eingefügt. Natürlich kann man es auch direkt im Beitrags-Editor schreiben, doch hat man dort nicht immer die gewünschte Übersicht über den Quell-Code wie ich finde.

 

HTML

Möchte man Bootstrap dazu bringen, das Tab Layout geschlossen mit einem Rahmen und abgerundeten Ecken, sowie Box-Schatten (wie hier im Beispiel siehe Tabs oben) darzustellen, bedarf es dem Style bei der UL, und in der Class tab-content. In der tab-content Class mus dann noch die Class well (von Bootstrap) mit aufgenommen werden. Damit brauchen wir dann nicht die schon vorhandenen Styles für border, border-radius, box-shadow, etc. in die template.css schreiben. Wer das trotz dessen gern möchte und den Style dort hin auslagern möchte, kann die class well weg lassen, und alles über die ID und Class in die template.css schreiben.

 <div>
    <ul id="tablist-1" class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content well">
        <div id="tab1" class="tab-pane fade in active">
            <h3>Tab 1</h3>
            <p>Inhalt des ersten Tabs</p>
        </div>
        <div id="tab2" class="tab-pane fade">
            <h3>Tab 2</h3>
            <p>Inhalt des zweiten Tabs</p>
        </div>
        <div id="tab3" class="tab-pane fade">
            <h3>Tab 3</h3>
            <div class="row-fluid">
                <p class="span6">Inhalt des dritten Tabs mit 2 Spalten</p>
                <p class="span6">Inhalt des dritten Tabs mit 2 Spalten</p>
            </div>
        </div>
    </div>
</div>

CSS

Falls der Style ausgelagert wird in die template.css, und nicht direkt im Beitrags-Editor stehen soll für diese Layout Version (siehe Erklärung im HTML Tab), folgendes in die css.

 ul#tablist-1 {
border-bottom: none;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;
}
.tab-content {
padding: 10px;
border:1px solid #DDDDDD;
background-color: #FFFFFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow0 1px 3px rgba(0, 0, 0, 0.055);
-moz-box-shadow0 1px 3px rgba(0, 0, 0, 0.055);
box-shadow0 1px 3px rgba(0, 0, 0, 0.055);
/* etc. was ihr noch haben wollt */
}

Javascript

 Wird über das Framework Bootstrap gesteuert.

Kommentar schreiben

Bitte habt dafür Verständnis, dass erst nach Sichtung der Einträge eure Einträge freigestellt werden, und auch erst dann sichtbar für alle sind.


Sicherheitscode
Aktualisieren