|
|||
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'); }); 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; } }); Also irgendetwas mit Code:
$('.sideboxContainer').each(function() { // }); 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 23:58 Uhr) Grund: Lösung. |
Sponsored Links |
Stichwörter |
cookie, jquery, toggle |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Jquery toggle() Problem mit children element | Niels85 | Javascript & Ajax | 0 | 22.11.2010 18:47 |
jquery cookie plugin, expiration time? | sepp88 | Javascript & Ajax | 5 | 16.03.2010 20:31 |
Funktion togglen und als Cookie speichern? | sepp88 | Javascript & Ajax | 4 | 24.02.2010 17:36 |
div umgibt checkbox..jquery toggle um checkbox zu checken? | sepp88 | Javascript & Ajax | 7 | 12.01.2010 22:26 |
SESSION / COOKIE - Konflikte | poppihasi | Serveradministration und serverseitige Scripte | 1 | 23.12.2007 14:29 |