Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


jquery_konfiguration [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== jQuery Konfiguration ======
 +
 +
 +Hier ein paar Beispiele.
 +
 +===== Accordion Effekt =====
 +
 +  
 +  $(document).ready(function(){
 +    $("#accordion").accordion({
 +      collapsible:!0,
 +      active:0,
 +      event:"click",
 +      heightStyle:"content",
 +      animate: {duration:"2000",easing:"swing"}
 +    })
 +  });  
 +
 +===== Scrollicon Konfiguration =====
 +
 +Das Scrollicon ermöglicht dem Besucher, zum Beginn der Seite zu springen. Dazu wird eine Schaltfläche generiert, die an einem Platz über der Seite schwebt. 
 +\\ [[css_beispiele#pfeile_nach_unten|Hier finden Sie das CSS dazu]].
 +  
 +  $(document).ready(function(){
 +    $(".scrollicon").click(function(){
 +      return $("html, body").animate({scrollTop:0},500),!1})
 +    });
 +  });
 +  
 +===== JavaScript für Mega Menu===== 
 +
 +Bootstrap 4 erlaubt die Einbindung eines Mega Menus, mit dem Inhalte für eine Navigation responsiv für mehrere Ebenen und mit individuellem Layout erstellt werden können. Dazu ist die Einbindung dieses kurzen JavaScripts notwendig. Der Aufbau der Navigation geht über ein [[bootstrap_4_navigation#megamenu_mit_bootstrap_4|TypoScript]]. Die Inhalte bekommen dann über ein eigenes [[css_bootstrap_4_navigation#css_fuer_megamenu_mit_bootstrap_4|Style Sheet]] ihr Layout.
 +
 +  $(document).ready(function() {
 +    $(".megamenu").on("click", function(e) {
 +      e.stopPropagation();
 +    });
 +  });  
 +===== Inhalt öffnen und verstecken =====
 +
 +
 +  $(document).ready(function () {
 +    $(".liste_inhalt:visible").hide();
 +    $(".liste_titel").mouseover(function () {
 +      $(".liste_inhalt").show();
 +    });
 +    
 +    $(".liste_fuss").click(function () {
 +      $(".liste_inhalt:visible").hide();
 +    });
 +  });
 +
 +===== Inhalt mit Sliding öffnen =====
 +  
 +  $(document).ready(function () {
 +    $(".div_neu_content:visible").hide();
 +    
 +    $(".div_neu_div").mouseover(function () {
 +      $(".div_neu_content:visible").hide();
 +      $(this).next("div").slideToggle(200);
 +    });
 +    
 +    $(".div_neu_titel").mouseleave(function () {
 +      $(".div_neu_content:visible").hide(200);
 +    }); 
 +  });
 +  
 +  
 +===== CSS Klassen hinzufügen und entfernen =====
 +
 +Wenn man nicht einzelne CSS Attribute bearbeiten will, kann man auch Styles zuweisen bzw. entfernen
 +  
 +  $(document).ready(function () {
 +    $(".div_tab_titel").mouseover(function () {
 +      $(".div_tab_titel").removeClass('div_tab_titel_hover'); 
 +      $(this).addClass('div_tab_titel_hover'); 
 +    });  
 +  });  
 +===== Tabs am Ende jeder Seite =====
 +
 +In diesem Fall werden einzelne CSS Attribute geändert.
 +
 +  $(document).ready(function () {
 +    $("#content").slideToggle(1);
 +    
 +    ## Titel beim MouseOver formatieren
 +    ## Einzelne Style Attribute überschreiben
 +    $(".div_tab_titel").mouseover(function () {
 +      $(".div_tab_titel").css('background-color', '#2d80a8');
 +      $(".div_tab_titel").css('border-bottom-color', '#2d80a8');
 +      $(".div_tab_titel").css('color', '#ffffff');
 +      $(this).css('background-color', '#efefe7');
 +      $(this).css('color', '#2d80a8');
 +      $(this).css('border-bottom-color', '#efefe7');
 +    });
 +        
 +    ## Inhalte der Tabs bei MouseOver anzeigen
 +    $("#tab[dang='0']").mouseover(function() {
 +      $(".div_tab_content:visible").hide();
 +      $("#content[dings='0']").slideToggle(1);
 +    });
 +    $("#tab[dang='1']").mouseover(function() {
 +      $(".div_tab_content:visible").hide();
 +      $("#content[dings='1']").slideToggle(1);
 +    });
 +    $("#tab[dang='2']").mouseover(function() {
 +      $(".div_tab_content:visible").hide();
 +      $("#content[dings='2']").slideToggle(1);
 +    });
 +    $("#tab[dang='3']").mouseover(function() {
 +      $(".div_tab_content:visible").hide();
 +      $("#content[dings='3']").slideToggle(1);
 +    });
 +  });
 +