Accordions - Direktes anspringen und aufklappen: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K (Kategorie hinzugefügt)
(Lösung bei standardmäßig geschlossenen Accordions)
Zeile 46: Zeile 46:
 
         }
 
         }
 
       });       
 
       });       
 +
    });
 +
  })(jQuery);
 +
</script>
 +
</source>
 +
 +
 +
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.
 +
 +
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>
 +
<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');
 +
      };
 +
      $('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') )
 +
        { index.click(); }
 +
      });
 
     });
 
     });
 
   })(jQuery);
 
   })(jQuery);
 
</script>
 
</script>
 
</source>
 
</source>

Version vom 10. Februar 2014, 10:34 Uhr

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-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>


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.

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):

<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');
      };
      $('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') )
        { index.click(); }
      });
    });
  })(jQuery);
</script>
Ansichten
Meine Werkzeuge

Contao Community Documentation

... aber beim nächsten Mal nehm ich einfach den Catalog... da hab ich weniger Arbeit mit.

MacKP
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge