Benutzer-Werkzeuge

Webseiten-Werkzeuge


jquery_konfiguration

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.
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 TypoScript. Die Inhalte bekommen dann über ein eigenes 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);
  });
});
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
jquery_konfiguration.txt · Zuletzt geändert: 25/09/2019 21:14 von Thomas Berscheid