[RC1] Einklappbare Kategorien & Boxen

[DerPate]

MOD-Titel: jQuery Einklappbare Foren
MOD-Beschreibung:
Fügt Links zum auf- und zuklappen der Forenkategorien hinzu. Der Zustand wird dabei per Cookie gespeichert.

phpBB-Version: phpBB 3.0.4
phpBB-Styles: prosilver

Benötigt:
jquery
jquery-Cookie-Plugin

Einbau:

- Ordner 'js' im Forumverzeichnis anlegen
- Die beiden heruntergeladenen Datein speichern

ÖFFNE: includes/functions.php
SUCHE:

Code: Alles auswählen

		'SITE_DESCRIPTION'				=> $config['site_desc'],

DANACH EINFÜGEN:

Code: Alles auswählen

		'COOKIE_NAME' 					=> $config['cookie_name'],

prosilver

ÖFFNE: styles/prosilver/template/overall_header.html
SUCHE:

Code: Alles auswählen

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

DANACH EINFÜGEN: (jQuery Version ggf. anpassen)

Code: Alles auswählen

<script type="text/javascript" src="{ROOT_PATH}js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="{ROOT_PATH}js/jquery.cookie.js"></script>

SUCHE:

Code: Alles auswählen

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />

DAVOR EINFÜGEN:

Code: Alles auswählen

<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
	var id = [];
	var cookie = {
		get: false,
		name:'{COOKIE_NAME}_cb_{SCRIPT_NAME}{FORUM_ID}',
		value: []
	};
	
	cookie.get = $.cookie(cookie.name);
	if (cookie.get) {cookie.value = cookie.get.split(',');}
	
	$("[id^='colbox-switch-']").each(function()   {
		id.push($(this).attr("id").replace('colbox-switch-',''));
	});

	for (var i = 0; i < id.length; i++) {
		if ($.inArray(id[i],cookie.value) !== -1) {
			$('#colbox-switch-' + id[i]).addClass('cb_collapsed').text('[+]');
			$('#colbox-content-' + id[i]).hide();
		} else {
			$('#colbox-switch-' + id[i]).addClass('cb_expanded').text('[-]');
		}

		$('#colbox-switch-' + id[i]).click(function() {
			var thisid = $(this).attr("id").replace('colbox-switch-','');

			if ($(this).attr('class') == 'cb_collapsed') {
				$(this).removeClass('cb_collapsed').addClass('cb_expanded').text('[-]');
				$("#colbox-content-" + thisid).slideDown(200);
			} else {
				$(this).removeClass('cb_expanded').addClass('cb_collapsed').text('[+]');
				$("#colbox-content-" + thisid).slideUp(200);
			}
		});
	}
   
	$(window).unload(function() {
		var c = [];
		
		$('[id^="colbox-switch-"]').each(function() {
			if ($(this).hasClass('cb_collapsed')) {	c.push($(this).attr("id").replace('colbox-switch-','')); }
		});
		
		if (c.length) {$.cookie(cookie.name,c,{expires: 365});}
		else {$.cookie(cookie.name,null);}
	});
});
// ]]>
</script>

ÖFFNE: styles/prosilver/template/forumlist_body.html
SUCHE:

Code: Alles auswählen

<dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF -->

DANACH EINFÜGEN: (innerhalb der Zeile)

Code: Alles auswählen

<span id="colbox-switch-{forumrow.FORUM_ID}"></span>

SUCHE:

Code: Alles auswählen

<ul class="topiclist forums">

ERSETZE MIT:

Code: Alles auswählen

<ul id="colbox-content-{forumrow.FORUM_ID}" class="topiclist forums">

Optional, um den "Schalter" nach ganz rechts zu positionieren am Ende der common.css folgendes einfügen:

Code: Alles auswählen

.cb_collapsed, .cb_expanded {
	font-family: Courier;
	font-size: 1.2em;
	line-height: 1.2em;
	position:absolute;
	top:2px;
	right:5px;
	bottom: 4px;
}

subsilver2

ÖFFNE: styles/subsilver2/template/overall_header.html
SUCHE:

Code: Alles auswählen

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

DANACH EINFÜGEN: (jQuery Version ggf. anpassen)

Code: Alles auswählen

<script type="text/javascript" src="{ROOT_PATH}js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="{ROOT_PATH}js/jquery.cookie.js"></script>

<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
	var id = [];
	var cookie = {
		get: false,
		name:'{COOKIE_NAME}_cb_{SCRIPT_NAME}{FORUM_ID}',
		value: []
	};
	
	cookie.get = $.cookie(cookie.name);
	if (cookie.get) {cookie.value = cookie.get.split(',');}
	
	// fix 'last post' width
	$('th:eq(3)').css('width', $('th:eq(3)').width());

	$("[id^='colbox-switch-']").each(function() {
		id.push( $(this).attr("id").replace('colbox-switch-','') );
	});

	for (var i = 0; i < id.length; i++) {
		if ($.inArray(id[i],cookie.value) !== -1) {
			$('#colbox-switch-' + id[i]).addClass('cb_collapsed').text('[+]');
			$(".colbox-content-" + id[i]).each(function() {
				$(this).hide();
			});
		} else {
			$('#colbox-switch-' + id[i]).addClass('cb_expanded').text('[-]');
		}

		$('#colbox-switch-' + id[i]).click(function() {
			var thisid = $(this).attr("id").replace('colbox-switch-','');

			if ($(this).attr('class') == 'cb_collapsed') {
				$(this).removeClass('cb_collapsed').addClass('cb_expanded').text('[-]');
				$(".colbox-content-" + thisid).each(function() {
					$(this).slideDown(0);
				});
			} else {
				$(this).removeClass('cb_expanded').addClass('cb_collapsed').text('[+]');
				$(".colbox-content-" + thisid).each(function() {
					$(this).slideUp(0);
				});
			}
		});
	}
	
	$(window).unload(function() {
		var c = [];
		
		$('[id^="colbox-switch-"]').each(function() {
			if ($(this).hasClass('cb_collapsed')) {	c.push($(this).attr("id").replace('colbox-switch-','')); }
		});
		
		if (c.length) {$.cookie(cookie.name,c,{expires: 365});}
		else {$.cookie(cookie.name,null);}
	});
});
// ]]>
</script>

ÖFFNE: styles/prosilver/template/forumlist_body.html
SUCHE:

Code: Alles auswählen

	<!-- IF forumrow.S_IS_CAT -->

DANACH EINFÜGEN:

Code: Alles auswählen

	<!-- DEFINE $COLBOX_BUTTON = 'colbox-switch-{forumrow.FORUM_ID}' -->
	<!-- DEFINE $COLBOX_CONTENT = 'colbox-content-{forumrow.FORUM_ID}' -->

SUCHE:

Code: Alles auswählen

			<td class="cat" colspan="2"><h4>

DANACH EINFÜGEN: (innerhalb der Zeile)

Code: Alles auswählen

<span id="{$COLBOX_BUTTON}"></span>

SUCHE:

Code: Alles auswählen

	<!-- IF forumrow.S_NO_CAT -->

DANACH EINFÜGEN:

Code: Alles auswählen

	<!-- DEFINE $COLBOX_BUTTON = 'colbox-switch-{forumrow.FORUM_ID}' -->
	<!-- DEFINE $COLBOX_CONTENT = 'colbox-content-{forumrow.FORUM_ID}' -->

SUCHE:

Code: Alles auswählen

			<td class="cat" colspan="2"><h4>

DANACH EINFÜGEN: (innerhalb der Zeile)

Code: Alles auswählen

<span id="{$COLBOX_BUTTON}"></span>

SUCHE:

Code: Alles auswählen

		<tr">

ERSETZE MIT:

Code: Alles auswählen

		<tr class="{$COLBOX_CONTENT}">

Getestet mit: FF, IE7

Demo: http://www.phpbb.de/community/viewtopic ... 9#p1085829

[jerikool]

Demo? Hatte so eine ähnliche Modifikation bei phpbb.com getestet aber das hat meinen Style total verunstaltet.

[DerPate]

Eine Demo gibts z Zt nicht. Welchen Mod von phpBB.com hast du denn getestet? Ich kannte bis ich das hier zusammengeschrieben habe nur den [Beta] Collapsible Categories und fand den nicht so berauschend. Ich bin allerdings diese Woche zufällig auf Expand categories gestoßen, der im Prinzip das gleiche macht.

Vorteile/Nachteile von meinem zu dem Expand Categories: Über jquery kann ich dem auf- und zuklappen zB noch Animationen/Effekte verpassen, wie slideUp/Down, FadeIn/Out usw. was bei dem anderen erstmal nicht geht ... Nachteil momentan, benötigt eben jquery und der Java-Teil ist noch arges Gefrickel und lässt sich noch deutlich verkürzen (vorallem muss es nicht unbedingt innerhalb von <!-- BEGIN forumrow --><!-- END forumrow --> ablaufen). Je nachdem ob Intersse besteht, wird das noch optimiert ...

[mx-sports-zone]

Schon mal bei PHPBB3-magic gesehen, wie die das gelöst haben? Würde diese Variante besser finden.

[DerPate]

Mhh, ich find da gar nix zum einklappen ... oder meinst das stargate-Portal?

[mx-sports-zone]

Nein, ich meine schon das Portal von PHPBB3-Magic. Die haben ganz rechts neben jeder Forenüberschrift ein kleines [-] bzw. [+] zum Auf- und Zuklappen der Foren und Module. Kannst es ja mal probehalber selbst installieren, dann siehst du was ich meine. Ich habe nämlich gerade gesehen, dass diese Funktion auf deren Support-Board nicht aktiviert ist.

[mx-sports-zone]

So würde das Ganze dann aussehen:

Eingeklappt:
[ externes Bild ]

Aufgeklappt:
[ externes Bild ]

[DerPate]

Danke für die Screenshots. Wenns dir nur darum geht, dass die Schalter rechts stehen sollen, füg mal folgendes am Ende der common.css ein:

Code: Alles auswählen

.cb_collapsed, .cb_expanded {
	font-family: Courier;
	font-size: 1.2em;
	line-height: 1.2em;
	position:absolute;
	top:2px;
	right:5px;
	bottom: 4px;
}

(ggf. noch bisl anpassen ;) )

... und im Java-Teil

Code: Alles auswählen

.text(' anzeigen');

z.B. mit

Code: Alles auswählen

.text('[+]');

ersetzen. (und das ganze nat. noch fürs zuklappen)

[mx-sports-zone]

Super, danke. Hab's gefunden.

[mx-sports-zone]

Allerdings werden die Zeichen nicht ganz rechts angezeigt, sondern oberhalb in der Mitte. Könnte das damit zusammenhängen, dass ich das Forum auf 800px in der Breite begrenzt habe? Wenn ja, wo kann ich das ändern? Oder soll das so sein? o0

[ externes Bild ]