zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jQuery Toggle und Cookie

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.04.2010, 16:26
Nub Nub ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.11.2007
Beiträge: 2
Nub befindet sich auf einem aufstrebenden Ast
Standard jQuery Toggle und Cookie

THEMA ERLEDIGT. Lösung unten im Nachtrag 2.

Palim Palim,

ich habe auf meiner Seite mehrere Boxen, welche sich ein- und ausklappen lassen. Nun möchte ich den Status, ob minimiert / maximiert in einem Cookie speichern, so dass sich der Status gemerkt wird. Ich habe zwar schon viel gesucht, aber entweder haben die Lösungen nur für eine Box funktioniert und nicht für mehrere oder sie haben sich nicht mit meinem Code vertragen bzw. ich habe es nicht geschafft, diesen entsprechend umzubauen. Daher hoffe ich nun hier auf Hilfe, ich stelle den Code mal "sauber" hierein, also ohne verkorksten Versuch meinerseits:

HTML-Code:
<div id='sidebarSortable'>
                    <div class='sideboxContainer' id='item1'>
                        <div class='sideboxHeader'>Kategorie 1</div>
                        <div class='sideboxContent'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                    </div>
                    
                    <div class='sideboxContainer' id='item2'>
                        <div class='sideboxHeader'>Kategorie 2</div>
                        <div class='sideboxContent'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                    </div>
                </div>
Code:
$('.sideboxContainer').find('.sideboxHeader').prepend("<span class='ui-icon ui-icon-minusthick'></span>").end().find('.sideboxContent');
$('.sideboxHeader .ui-icon').click(function(){
    $(this).toggleClass('ui-icon-minusthick').toggleClass('ui-icon-plusthick');
    $(this).parents('.sideboxContainer:first').find('.sideboxContent').toggle('slow');
});
Ganz liebe Grüße,

Nachtrag: In Anlehnung an einen anderen Thread hier habe ich das folgendermaßen erst einmal abgeändert:

Code:
if($.cookie('showbox'))
{
    $('.sideboxContainer').find('.sideboxHeader').prepend("<span class='ui-icon ui-icon-plusthick'></span>");
    $('.sideboxContainer').find('.sideboxContent').css('display', 'none');
} else {
    $('.sideboxContainer').find('.sideboxHeader').prepend("<span class='ui-icon ui-icon-minusthick'></span>");
}

$('.sideboxHeader .ui-icon').click(function(){
    if ($(this).hasClass('ui-icon-plusthick')) {
        $(this).removeClass('ui-icon-plusthick').addClass('ui-icon-minusthick');
        $(this).parents('.sideboxContainer:first').find('.sideboxContent').slideDown('slow');
        $.cookie('showbox', null);
        return false;
    } else {
        $(this).removeClass('ui-icon-minusthick').addClass('ui-icon-plusthick');
        $(this).parents('.sideboxContainer:first').find('.sideboxContent').slideUp('slow');
        $.cookie('showbox', 'hide', { expires: 7 });
        return false;
    }
});
So funktioniert das auch für eine Box. Aber ich muss das ja flexibel für mehrere Boxen lösen. Ich bin bereits über each() gestolpert, die Frage ist nur, wie ich das richtig anwende.

Also irgendetwas mit

Code:
$('.sideboxContainer').each(function() {
    //
});
Vielleicht weiß ja jemand etwas. =)

Nachtrag 2: Nach weiterem Versuchen habe ich es tatsächlich noch geschafft. Die Lösung:

Code:
$('.sideboxContainer').each(function() {
    if($.cookie('showbox' + $(this).attr('id'))){
        $(this).find('.sideboxHeader').prepend("<span class='ui-icon ui-icon-plusthick'></span>");
        $(this).find('.sideboxContent').css('display', 'none');
    } else {
        $(this).find('.sideboxHeader').prepend("<span class='ui-icon ui-icon-minusthick'></span>");
    }
});

$('.sideboxHeader .ui-icon').click(function(){
    if ($(this).hasClass('ui-icon-plusthick')) {
        $(this).removeClass('ui-icon-plusthick').addClass('ui-icon-minusthick');
        $(this).parents('.sideboxContainer:first').find('.sideboxContent').slideDown('slow');
        $.cookie('showbox' + $(this).parents('.sideboxContainer:first').attr('id'), null);
        return false;
    } else {
        $(this).removeClass('ui-icon-minusthick').addClass('ui-icon-plusthick');
        $(this).parents('.sideboxContainer:first').find('.sideboxContent').slideUp('slow');
        $.cookie('showbox' + $(this).parents('.sideboxContainer:first').attr('id'), 'hide', { expires: 7 });
        return false;
    }
});

Geändert von Nub (25.04.2010 um 22:58 Uhr) Grund: Lösung.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
cookie, jquery, toggle

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Jquery toggle() Problem mit children element Niels85 Javascript & Ajax 0 22.11.2010 17:47
jquery cookie plugin, expiration time? sepp88 Javascript & Ajax 5 16.03.2010 19:31
Funktion togglen und als Cookie speichern? sepp88 Javascript & Ajax 4 24.02.2010 16:36
div umgibt checkbox..jquery toggle um checkbox zu checken? sepp88 Javascript & Ajax 7 12.01.2010 21:26
SESSION / COOKIE - Konflikte poppihasi Serveradministration und serverseitige Scripte 1 23.12.2007 13:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:25 Uhr.