[gelöst] Layoutbereiche dynamisch einblenden oder ausblenden
Ich bin auf der Suche nach einer Möglichkeit Inhalstbereiche dynamisch ein- oder ausblenden zu können.
Habe eine Seite, die ich mit recht vielen Zusatzfunktionen für den Besucher bestückt habe. Diese Zusatzfunktionen befinden sich alle in der rechten Spalte.
Nun möchte ich eine Möglichkeit schaffen, diese rechte Spalte per Klick auf einen Link oder Button ein- oder auszublenden, für die, welche die Funktionsleiste stört oder nicht brauchen.
Es gäbe da jetzt verschiedene Ansätze.
1. Entweder das Standard-Seitenlayout überschreiben, mit einer Version, in der die rechte Spalte einfach nicht vorhanden ist.
2. Das Einbinden oder Ausklammern eines zusätzlichen Stylesheets in dem ich einfach
Code:
#right .inside { display: none; }
verwende
3. oder das ganze dynamisch mit JavaScript + Cookie (mootools?)
4. Den Kompletten Seitenbaum kopieren und ein anderes Layout verwenden (kommt nicht in Frage :D )
Vielleicht gibt es ja schon eine Lösung dafür. Ansonsten müsste ich mal versuchen, meine erste Contao-Extension zu schreiben.
[gelöst] mit MooTools FX.slide
Habe das ganze jetzt mit mootools FX.slide gelöst.
Folgendes Script habe ich in das Seitenlayout integriert (ist die abgespeckte Version aus dem Original mootools FX.Slide Demo). Somit wird der Inhalsbereich bei jedem Seitenaufruf wieder versteckt, weil der Status nicht gesichert wird. Habe das Script mit dem mootools HASH.cookie erweitert um den Status zu sichern und bei der Initialisierung des FX.slide abgefragt in welchem Status sich der toggle befindet (2. Codebeispiel) Die Lebensdauer des cookies gibt man mit duration in Sekunden an.
1. Codebeispiel ohne Merker
Code:
<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function() {
var status = {
'true': 'schließen',
'false': 'öffnen'
};
//--horizontal
var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'}).hide();
$('h_toggle').addEvent('click', function(e){
e.stop();
myHorizontalSlide.toggle();
});
// When Horizontal Slide ends its transition, we check for its status
// note that complete will not affect 'hide' and 'show' methods
myHorizontalSlide.addEvent('complete', function() {
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
});
/* ]]> */
</script>
2. Codebeispiel mit Merker (cookie)
Code:
window.addEvent('domready', function() {
var pagecookie = new Hash.Cookie('pagecookie', {duration: 3600});
var status = {
'true': 'schließen',
'false': 'öffnen'
};
//--horizontal
if ( true == pagecookie.get('toolbar') )
{
var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'}).hide();
}
else
{
var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});
}
// show current status in toggle link
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
// switch
$('h_toggle').addEvent('click', function(e){
e.stop();
myHorizontalSlide.toggle();
pagecookie.set('toolbar', myHorizontalSlide.open );
});
// When Horizontal Slide ends its transition, we check for its status
// note that complete will not affect 'hide' and 'show' methods
myHorizontalSlide.addEvent('complete', function() {
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
});
Dann habe ich noch das Template 'fe_page' an der Stelle modifiziert, wo die rechte Spalte angezeigt wird, sofern vorhanden.
Code:
<?php if ($this->right): ?>
<div id="right">
<a id="h_toggle" href="#">Toolbar <span id="horizontal_status">öffnen</span></a>
<div id="horizontal_slide">
<div class="inside">
<?php echo $this->right; ?>
</div>
</div>
</div>
<?php endif; ?>
