phpBB.de

phpBB.de - Die deutsche phpBB-Community
https://www.phpbb.de/community/

[RC1] Einklappbare Kategorien & Boxen

https://www.phpbb.de/community/viewtopic.php?t=186912

Seite 1 von 10

[RC1] Einklappbare Kategorien & Boxen

Verfasst: 23.02.2009 00:14
von 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 :-?

Re: [DEV] Einklappbare Kategorien

Verfasst: 27.02.2009 15:34
von jerikool
Demo? Hatte so eine ähnliche Modifikation bei phpbb.com getestet aber das hat meinen Style total verunstaltet.

Re: [DEV] Einklappbare Kategorien

Verfasst: 27.02.2009 19:00
von 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 ...

Re: [DEV] Einklappbare Kategorien

Verfasst: 28.02.2009 09:00
von mx-sports-zone
Schon mal bei PHPBB3-magic gesehen, wie die das gelöst haben? Würde diese Variante besser finden. :oops:

Re: [DEV] Einklappbare Kategorien

Verfasst: 28.02.2009 10:37
von DerPate
Mhh, ich find da gar nix zum einklappen ... oder meinst das stargate-Portal?

Re: [DEV] Einklappbare Kategorien

Verfasst: 28.02.2009 11:33
von 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. :wink:

Re: [DEV] Einklappbare Kategorien

Verfasst: 28.02.2009 23:04
von mx-sports-zone
So würde das Ganze dann aussehen:

Eingeklappt:
[ externes Bild ]

Aufgeklappt:
[ externes Bild ]

Re: [DEV] Einklappbare Kategorien

Verfasst: 01.03.2009 14:36
von 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)

Re: [DEV] Einklappbare Kategorien

Verfasst: 01.03.2009 17:02
von mx-sports-zone
Super, danke. Hab's gefunden. ;)

Re: [DEV] Einklappbare Kategorien

Verfasst: 01.03.2009 17:15
von 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 ]
Alle Zeiten sind UTC+02:00
Seite 1 von 10

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de