Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Theme bei welchen die Unterseiten mit Ajax geladen werden
#1
Theme bei welchen die Unterseiten mit Ajax geladen werden

Der Vorteil dieses Theme ist das es nur ein Menu in der Index.html gibt. Also wenn an dem Menu etwas geänder wird, muss es nicht auch auf allen Unterseiten geändert werden, da diese ja über ajax dynamisch jeladen werden.

Die Browser-Unterstützung ist auch sehr gut. Allerdings wird de IE erst ab Version 10 ünterstützt. siehe caniuse.com
Demo

- laden der Unterseiten erfolgt über:
Javascript
  1.     /* Inhalt mit Ajax laden */
  2.     $("a.ajax-link").click(function () {
  3.  
  4.         $("*").removeClass("active")
  5.         $("div.dropdown-menu").removeClass("show")
  6.         $("a.ajax-link").removeClass("active")
  7.         $(this).addClass("active")
  8.         
  9.         var url = $(this).attr('href');
  10.  
  11.         /* alten Inhalt ausblenden */
  12.         $("#main").animate({
  13.             opacity: "0",
  14.             filter: "alpha(opacity=0)"
  15.         }, 300, function () {
  16.  
  17.             /* Neuen Inhalt laden */
  18.             $("#main").load(url, function () {
  19.                 /* neuen Inhalt einblenden */
  20.                 $("#main").animate({
  21.                     opacity: "1",
  22.                     filter: "alpha(opacity=100)"
  23.                 });
  24.             });
  25.         });
  26.  
  27.         /* geöffnetes Dropdown Menu schließen*/
  28.         $("div .dropdown-menu").css("display", "none")
  29.  
  30.         return false;
  31.     });



Die Navigation

HTML5
  1.     <nav class="navbar navbar-expand-md navbar-dark bg-nav  fixed-top">
  2.         <div class="container">
  3.             <a class="navbar-brand" href="#"><img src="img/logo.png" height="40px" /></a>
  4.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  5.                 <span class="navbar-toggler-icon"></span>
  6.             </button>
  7.  
  8.             <div class="collapse navbar-collapse" id="navbarsExampleDefault">
  9.  
  10.                 <ul class="navbar-nav ml-auto">
  11.                     <li class="nav-item active">
  12.                         <a class="nav-link ajax-link" href="home.html" id="m_home">Home</a>
  13.                     </li>
  14.                     <li class="nav-item">
  15.                         <a class="nav-link ajax-link" href="about.html" id="m_about">About</a>
  16.                     </li>
  17.                     <li class="nav-item">
  18.                         <a class="nav-link ajax-link" href="kontakt.html" id="m_kontakt">Kontakt</a>
  19.                     </li>
  20.  
  21.                     <li class="nav-item dropdown">
  22.                         <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rechtliches</a>
  23.                         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
  24.                             <a class="dropdown-item ajax-link" href="impressum.html">Impressum</a>
  25.                             <a class="dropdown-item ajax-link" href="datenschutz.html">Datenschutzerklärung</a>
  26.                             <a class="dropdown-item ajax-link" href="kontakt.html" id="m_kontakt">Kontakt</a>
  27.  
  28.                         </div>
  29.                     </li>
  30.  
  31.                 </ul>
  32.             </div>
  33.         </div>
  34.     </nav>




Container in welchen die Seiten geladen werden
HTML5
  1.     <!-- Ajax container -->
  2.     <main id="main" role="main" class="container">
  3.  
  4.     </main>



Inhalt.html
HTML5
  1. <div class="text-center mt-5 pt-5">
  2.     <h1>About</h1>
  3.     <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  4. </div>




Angehängte Dateien
.rar   Inhalte_mit_Ajax_laden.rar (Größe: 205,54 KB / Downloads: 1)
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
eigene CSS für Firefox Browser
Last Post: Tapo
14.06.2019 13:47
» Replies: 2
» Views: 26
Frames?
Last Post: Daniel26
14.06.2019 08:31
» Replies: 4
» Views: 178
Bootstrap 4 Tutorials
Last Post: The-Error
07.06.2019 01:00
» Replies: 1
» Views: 4258

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 245
» Latest member: Vikingscum
» Forum threads: 217
» Forum posts: 891

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

>