[Tutorial] Kategorien auf- und zuklappen in Tutorials
von
Merk
• ( Anfänger | Beiträge: 52 )
Dieses Tutorial beschreibt wie, ihr euren Usern die Möglichkeit bereitstellt einzelne Kategorien, die sie nicht interessiern, wegzuklappen.
Beispiel:
Alle Kategorien aufgeklappt
Kategorien 1 und 3 zugeklappt
Dazu muss folgender Code im Template Element "Forum Übersicht" ganz oben eingefügt werden:
{{categories.startint}}0{{categories.end}}
{{trennung.start}}nein{{trennung.end}}
{{ja.start}}ja{{ja.end}}
{{foren.start}}{{foren.end}}
{{category.startlist}}
{{zaehler.startint}}0{{zaehler.end}}
{{category:forum.startlist}}
{{zaehler.startint}}{{zaehler}}+1{{zaehler.end}}
{{category:forum.end}}
{{foren.start}}{{foren}}{{trennung==ja.start}}|{{trennung==ja.else}}{{trennung==ja.end}}{{category:link}}~{{zaehler}}{{foren.end}}
{{categories.startint}}{{categories}}+1{{categories.end}}
{{trennung.start}}ja{{trennung.end}}
{{category.end}}
<script language="javascript" type="text/javascript">
window.onload = verstecken;
var a = new Date();
a = new Date(a.getTime() +1000*60*60*24*365);
var categories = {{categories}};
function verstecken() {
if (navigator.appName == 'Microsoft Internet Explorer') {
var t = '{{foren}}';
t = t.split('|');
for ( var i = 0; j <= t.length-1; j++) {
t[j] = t[j].split('~');
for (var k = 1; k <= t[j][1]; k++) {
document.getElementById(t[j][0]+'='+ k).style.display = 'inline-block';
}
}
}
if(document.cookie) {
var s = document.cookie;
if (s.indexOf('Verstecken:') != -1) {
if (s.lastIndexOf('Verstecken:') != s.indexOf('Verstecken:')) {
s = s.substring(s.lastIndexOf('Verstecken:')+11, s.length);
}
else {
s = s.substring(s.indexOf('Verstecken:')+11, s.length);
}
var category = s.split('|');
for (var j = 0; j <= category.length-2; j++) {
category[j] = category[j].split('~');
}
var t = '{{foren}}';
t = t.split('|');
for ( var k = 0; k <= t.length-1; k++) {
t[k] = t[k].split('~');
}
for (var l = 0; l <= category.length-1; l++) {
for (var m = 0; m <= t[0].length; m++) {
if (category[l][0] == t[m][0]) {
category[l][1] = t[m][1];
}
}
}
for (var n = 0; n <= category.length-2; n++) {
for (var o = 1; o <= parseInt(category[n][1]); o++) {
var foren = o.toString(10);
document.getElementById(category[n][0]+'='+foren).style.display = category[n][2];
}
if (category[n][2] == 'none') {
document.getElementById(category[n][0]).src = 'http://www.bilder-hochladen.net/files/2h9n-t.png';
document.getElementById(category[n][0]).alt = '+';
}
else {
document.getElementById(category[n][0]).src = 'http://www.bilder-hochladen.net/files/2h9n-u.png';
document.getElementById(category[n][0]).alt = '-';
}
}
}
}
}
function ForenVerstecken(forum, foren, zaehler) {
var show = 'table-row';
if (navigator.appName == 'Microsoft Internet Explorer') {
show = 'inline-block'
}
var show2 = document.getElementById(forum+'=1').style.display;
if ( show2 == show) {
document.getElementById(forum).src = 'http://www.bilder-hochladen.net/files/2h9n-t.png';
document.getElementById(forum).alt = '+';
}
else {
document.getElementById(forum).src = 'http://www.bilder-hochladen.net/files/2h9n-u.png';
document.getElementById(forum).alt = '-';
}
for (var i = 1; i <= zaehler; i++) {
if ( show2 == show) {
document.getElementById(forum+'='+i).style.display = 'none';
}
else {
document.getElementById(forum+'='+i).style.display = show;
}
}
var cookie = document.cookie;
if (cookie.indexOf('Verstecken:') != -1) {
cookie = cookie.substring(0, cookie.indexOf('Verstecken:'));
}
foren = foren.split('|');
for (var j = 0; j <= foren.length - 1; j++) {
foren[j] = foren[j].split('~');
}
category = new Array();
for (var k = 0; k <= categories-1; k++) {
category[k] = new Array();
category[k][0] = foren[k][0];
category[k][1] = foren[k][1];
category[k][2] = document.getElementById(foren[k][0]+'=1').style.display;
}
cookie = 'Verstecken:';
for (var l = 0; l <= categories -1; l++) {
cookie = cookie + category[l][0] + '~' + category[l][1] + '~' + category[l][2] + '|';
}
document.cookie = cookie + '; expires=' + a.toGMTString() + ';';
}
</script>Außerdem muss etwas weiter unten das Blaue hinzugefügt werden:
{{category.startlist}}
{{zaehler.startint}}0{{zaehler.end}}
{{category:forum.startlist}}
{{zaehler.startint}}{{zaehler}}+1{{zaehler.end}}
{{category:forum.end}}
<tr>
<td colspan="{{colspan}}" class="icats"><a href="javascript: ForenVerstecken('{{category:link}}', '{{foren}}', {{zaehler}});"><img src="http://www.bilder-hochladen.net/files/2h9n-u.png" alt="-" id="{{category:link}}" border="0" width=13" height="13"></a> <a href="{{category:link}}">{{category:title}}</a></td>
</tr>
{{zaehler.startint}}0{{zaehler.end}}
{{category:forum.startlist}}
{{zaehler.startint}}{{zaehler}}+1{{zaehler.end}}
<tr id="{{category:link}}={{zaehler}}" style="display: table-row;">http://www.bilder-hochladen.net/files/2h9n-u.png ist die Adresse des bildes, das angezeigt wird, wenn die Foren sichtbar sind, z.B.
.http://www.bilder-hochladen.net/files/2h9n-t.png ist die Adresse des Bildes, das angezeigt wird, wenn die Foren eingeklappt sind, z.B.
.Bei eigenen Grafiken muss noch width=13" height="13" entsprechend angepasst werden.
Danke an alle User die mir in diesem Thread bei der Fehlerbehebung geholfen haben
Merk
