Accordions - Direktes anspringen und aufklappen: Unterschied zwischen den Versionen
Aus Contao Community Documentation
(Die Seite wurde neu angelegt: „ == Lösung für j_accordion (jQuery) == Um Accordions direkt zu verlinken reicht es eigentlich die ID des Headers mit anzugeben: z.B. seite.html#ui-accordion-1…“) |
Anke (Diskussion | Beiträge) K |
||
| (2 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | + | [[Category:Dev_Snippets]] | |
== Lösung für j_accordion (jQuery) == | == Lösung für j_accordion (jQuery) == | ||
| + | === mit Standardoptionen (erstes Accordion geföffnet) === | ||
Um Accordions direkt zu verlinken reicht es eigentlich die ID des Headers mit anzugeben: | Um Accordions direkt zu verlinken reicht es eigentlich die ID des Headers mit anzugeben: | ||
| Zeile 9: | Zeile 10: | ||
Wenn es nicht das erste Accordion ist, so ist dieses jetzt noch geschlossen. Wenn man nun noch eine Kopie des Templates j_accordion anlegt und folgenden Code nutzt, wird das Accordion auch aufgeklappt. | Wenn es nicht das erste Accordion ist, so ist dieses jetzt noch geschlossen. Wenn man nun noch eine Kopie des Templates j_accordion anlegt und folgenden Code nutzt, wird das Accordion auch aufgeklappt. | ||
| − | |||
<source lang=j> | <source lang=j> | ||
<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script> | <script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script> | ||
| Zeile 45: | Zeile 45: | ||
index.click(); | index.click(); | ||
} | } | ||
| + | }); | ||
| + | }); | ||
| + | })(jQuery); | ||
| + | </script> | ||
| + | </source> | ||
| + | |||
| + | === mit der Option "active: false" (alle Accordions geschlossen) === | ||
| + | Wurde die Option "active: false" hinzugefügt, damit alle Bereiche beim Laden der Seite geschlossen sind, sorgt die folgende Version dafür, dass das Accordion mit angesprochenen ID | ||
| + | geöffnet wird: | ||
| + | |||
| + | <source lang=j> | ||
| + | <script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script> | ||
| + | <script> | ||
| + | (function($) { | ||
| + | $(document).ready(function() { | ||
| + | $(document).accordion({ | ||
| + | // Put custom options here | ||
| + | heightStyle: 'content', | ||
| + | header: 'div.toggler', | ||
| + | collapsible: true, | ||
| + | active: false | ||
| + | }); | ||
| + | var activate = function(tog) { | ||
| + | var tgs = $('div.toggler'); | ||
| + | tgs.removeClass('active'); | ||
| + | tog.addClass('active'); | ||
| + | tgs.next('div.accordion').attr('aria-hidden', 'true'); | ||
| + | tog.next('div.accordion').attr('aria-hidden', 'false'); | ||
| + | scrollToTop(tog); | ||
| + | }; | ||
| + | $('div.toggler').focus(function(e) { | ||
| + | $('div.toggler').attr('tabindex', 0); | ||
| + | $(this).attr('tabindex', -1); | ||
| + | }).blur(function() { | ||
| + | $(this).attr('tabindex', 0); | ||
| + | }).click(function() { | ||
| + | activate($(this)); | ||
| + | }).keypress(function(event) { | ||
| + | if (event.keyCode == 13) activate($(this)); | ||
| + | }); | ||
| + | var scrollToTop = function(tog) { | ||
| + | $('html, body').animate({scrollTop: $(tog).offset().top}, 200); | ||
| + | }; | ||
| + | |||
| + | // direkt anspringen über Anker(ID) | ||
| + | $('div.toggler').each(function(el, index){ | ||
| + | if (window.location.href.split('#')[1] == $(index).attr('id') ) | ||
| + | { index.click(); } | ||
}); | }); | ||
}); | }); | ||
Aktuelle Version vom 11. Februar 2014, 01:09 Uhr
Lösung für j_accordion (jQuery)
mit Standardoptionen (erstes Accordion geföffnet)
Um Accordions direkt zu verlinken reicht es eigentlich die ID des Headers mit anzugeben:
z.B. seite.html#ui-accordion-1-header-1
ui-accordion-1-header-1 ist dabei die des anzuspringenden Headers
Wenn es nicht das erste Accordion ist, so ist dieses jetzt noch geschlossen. Wenn man nun noch eine Kopie des Templates j_accordion anlegt und folgenden Code nutzt, wird das Accordion auch aufgeklappt.
<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script> <script> (function($) { $(document).ready(function() { $(document).accordion({ // Put custom options here heightStyle: 'content', header: 'div.toggler', collapsible: true }); var activate = function(tog) { var tgs = $('div.toggler'); tgs.removeClass('active'); tog.addClass('active'); tgs.next('div.accordion').attr('aria-hidden', 'true'); tog.next('div.accordion').attr('aria-hidden', 'false'); }; $('div.toggler').focus(function(e) { $('div.toggler').attr('tabindex', 0); $(this).attr('tabindex', -1); }).blur(function() { $(this).attr('tabindex', 0); }).click(function() { activate($(this)); }).keypress(function(event) { if (event.keyCode == 13) activate($(this)); }); // direkt anspringen über Anker(ID) $('div.toggler').each(function(el, index){ if (window.location.href.split('#')[1] == $(index).attr('id') && el > 0) { index.click(); } }); }); })(jQuery); </script>
mit der Option "active: false" (alle Accordions geschlossen)
Wurde die Option "active: false" hinzugefügt, damit alle Bereiche beim Laden der Seite geschlossen sind, sorgt die folgende Version dafür, dass das Accordion mit angesprochenen ID geöffnet wird:
<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script> <script> (function($) { $(document).ready(function() { $(document).accordion({ // Put custom options here heightStyle: 'content', header: 'div.toggler', collapsible: true, active: false }); var activate = function(tog) { var tgs = $('div.toggler'); tgs.removeClass('active'); tog.addClass('active'); tgs.next('div.accordion').attr('aria-hidden', 'true'); tog.next('div.accordion').attr('aria-hidden', 'false'); scrollToTop(tog); }; $('div.toggler').focus(function(e) { $('div.toggler').attr('tabindex', 0); $(this).attr('tabindex', -1); }).blur(function() { $(this).attr('tabindex', 0); }).click(function() { activate($(this)); }).keypress(function(event) { if (event.keyCode == 13) activate($(this)); }); var scrollToTop = function(tog) { $('html, body').animate({scrollTop: $(tog).offset().top}, 200); }; // direkt anspringen über Anker(ID) $('div.toggler').each(function(el, index){ if (window.location.href.split('#')[1] == $(index).attr('id') ) { index.click(); } }); }); })(jQuery); </script>
