Accordions - Direktes anspringen und aufklappen: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Lösung bei standardmäßig geschlossenen Accordions)
K
 
Zeile 1: Zeile 1:
 
[[Category:Dev_Snippets]]
 
[[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 51: Zeile 51:
 
</source>
 
</source>
  
 
+
=== mit der Option "active: false" (alle Accordions geschlossen) ===
Ist das Accordion mit der Option "active: false" so eingestellt, dass alle Bereiche beim Laden der Seite geschlossen sind, führt die obige Lösung dazu, dass das Accordion mit der angesprochenen ID am oberen Seitenrand angezeigt wird (wie ein aufgerufener Anker) - es bleibt jedoch gechlossen.
+
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:  
Mit dem nachfolgenden Code wird das Accordion mit der angesprochenen ID geöffnet (allerdings wird das geöffnete Accordion damit nicht an den oberen Seitenrand gescrollt):
+
  
 
<source lang=j>
 
<source lang=j>
Zeile 74: Zeile 73:
 
         tgs.next('div.accordion').attr('aria-hidden', 'true');
 
         tgs.next('div.accordion').attr('aria-hidden', 'true');
 
         tog.next('div.accordion').attr('aria-hidden', 'false');
 
         tog.next('div.accordion').attr('aria-hidden', 'false');
 +
scrollToTop(tog);
 
       };
 
       };
 
       $('div.toggler').focus(function(e) {
 
       $('div.toggler').focus(function(e) {
Zeile 85: Zeile 85:
 
         if (event.keyCode == 13) activate($(this));
 
         if (event.keyCode == 13) activate($(this));
 
       });
 
       });
 
+
var scrollToTop = function(tog) {
 +
        $('html, body').animate({scrollTop: $(tog).offset().top}, 200);
 +
      };
 +
 
       // direkt anspringen über Anker(ID)
 
       // direkt anspringen über Anker(ID)
 
       $('div.toggler').each(function(el, index){
 
       $('div.toggler').each(function(el, index){
 
         if (window.location.href.split('#')[1] == $(index).attr('id') )
 
         if (window.location.href.split('#')[1] == $(index).attr('id') )
 
         { index.click(); }
 
         { index.click(); }
       });
+
       });    
 
     });
 
     });
 
   })(jQuery);
 
   })(jQuery);
 
</script>
 
</script>
 
</source>
 
</source>

Aktuelle Version vom 10. Februar 2014, 23: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>
Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich habe eine Anpassungsgeschichte angepasst.

Leo Feyer
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge