2016-06-20 4 views
0

Ich möchte Materialise Framework verwenden, aber ich bin nicht in der Lage, seine JAVASCRIPT Komponente zu verwenden, die Wellen-Taste funktioniert, aber der Rest von allen funktioniert nicht, ich suchte im Internet und fand zuerst Anruf jquery vor materialisieren, aber das löste nicht mein Problem ..Javascript Komponente funktioniert nicht von Materialize

Das ist meine index.html Seite und meine Init.js ist

<html> 
    <head> 
     <link rel="stylesheet" href="CSS/materialize.min.css"> 
     <script src="js/jquery.js"></script> 
     <script src="js/materialize.js"></script> 
     <script src="js/init.js"></script> 
    </head> 
    <body> 
     <nav> 
      <ul class="right hide-on-med-and-down"> 
       <li><a href="#!">First Sidebar Link</a></li> 
       <li><a href="#!">Second Sidebar Link</a></li> 
      </ul> 
      <ul id="slide-out" class="side-nav"> 
       <li><a href="#!">First Sidebar Link</a></li> 
       <li><a href="#!">Second Sidebar Link</a></li> 
      </ul> 
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
     </nav> 
    </body> 
</html> 


(function ($) { 
    $(function() { 

     // Initialize collapse button 
     $(".button-collapse").sideNav(); 
     // Initialize collapsible (uncomment the line below if you use the dropdown variation) 
     //$('.collapsible').collapsible(); 
     $('.button-collapse').sideNav('show'); 

    }); // end of document ready 
})(jQuery); 
// end of jQuery name space 

ich jquery.js nennt zuerst als materialize.js aber es funktioniert nicht.

+0

Irgendwelche Konsolenfehler? – DaniP

+0

Kannst du eine Geige hinzufügen? Das hilft, das Problem herauszufinden. –

+0

Bitte geben Sie Ihre Codes in jsfiddle ein. – iyyappan

Antwort

0

Der Code versandt arbeitet:

(function($) { 
    $(function() { 
    // Initialize collapse button 
    $(".button-collapse").sideNav(); 
    // Initialize collapsible (uncomment the line below if you use the dropdown variation) 
    //$('.collapsible').collapsible(); 
    $('.button-collapse').sideNav('show'); 
    }); // end of document ready 
})(jQuery); // end of jQuery name space 

https://jsfiddle.net/jzob32ed/

So die jquery Version verwenden Sie? materialisieren? Irgendein anderer Rahmen, der mit jQuery in Konflikt steht? Können Sie in Ihrer Frage die Konsolenausgabe einwerfen?

+0

Version von meinem jquery ist 1.3.2 –

+0

Und Version von materialize ist v0.97.5 –

+0

Ok ich denke, es ist Ihre jquery Version, wenn ich mich gut erinnere materialisiert ist kompatibel mit jquery> 2 –

0

Hier ist eine Fiddle, die Sie durch eine grundlegende Struktur einer Navbar mit einem Slide-out auf dem Kippschalter des Hamburger-Symbols führt. Ich habe jQuery 2.2.0 und Materialise 0.97.5 verwendet.

JSFiddle

Javascript:

(function ($) { 
    $(function() { 
    $('.button-collapse').sideNav({ 
     menuWidth: 300, // Default is 240 
     closeOnClick: true 
    ); 
     $('.collapsible').collapsible(); 
    }); 
})(jQuery); 

Markup (HTML):

<nav> 
    <ul class="hide-on-med-and-down"> 
    <li><a href="#!">First Sidebar Link</a></li> 
    <li><a href="#!">Second Sidebar Link</a></li> 
    </ul> 
    <ul id="slide-out" class="side-nav fixed"> 
     <li class="bold"><a href="#!" class="">First Sidebar Link</a></li> 
     <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li> 
    </ul> 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
</nav> 

Hoffnung, das hilft!

+0

Problem war mit Version, wenn jquery jetzt ich CDN Verbindung verwendete es funktioniert. Vielen Dank –