Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
jquery_konfiguration [24/09/2018 13:12]
Thomas Berscheid
jquery_konfiguration [25/09/2019 21:14] (aktuell)
Thomas Berscheid [JavaScript für Mega Menu]
Zeile 16: Zeile 16:
     })     })
   });  ​   });  ​
 +
 +===== 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);​
 +    });
 +  });
 +
  
  • jquery_konfiguration.1537787559.txt.gz
  • Zuletzt geändert: 24/09/2018 13:12
  • von Thomas Berscheid