Korrekte Art, benutzerdefiniertes Javascript bei der Verwendung von Zurb Foundation einzubinden

Question

Viele Male bin ich auf Probleme gestoßen, als ich versuchte, meine eigene jQuery zu einem Foundation-Projekt hinzuzufügen.

Hat das etwas mit der Art und Weise zu tun, in der Foundation "keinen Konflikt" verwendet? Was ist das korrekte Verfahren zum Hinzufügen eigener Skripte?

Ich habe versucht, einen Aufruf zu einer scripts.js-Datei nach dem Aufruf von foundation.min.js, aber einige sehr einfache SlideToggle-Aufrufe werden überhaupt nicht ausgeführt. Doch wenn ich den Verweis auf foundation.min.js lösche, funktioniert alles einwandfrei.

Ich hatte auch Probleme mit externen Skriptdateien.

Irgendwelche Tipps? Vielen Dank.

Answer 1

Ich fügte meine benutzerdefinierte js-Skript an das Ende der Liste der Skripts vor dem schließenden body-Tag und vor dem $ (document) .foundation();. Ich habe es auch im Verzeichnis js/vendor gespeichert. In meiner Paste habe ich alles in einem globalen Verzeichnis gespeichert; Suchen Sie einfach nach Ihrem eigenen js-Verzeichnis.

<script src="global/js/vendor/jquery.js"></script> 
<script src="global/js/foundation/foundation.js"></script> 

<script src="global/js/foundation/foundation.alerts.js"></script> 

<script src="global/js/foundation/foundation.clearing.js"></script> 

<script src="global/js/foundation/foundation.cookie.js"></script> 

<script src="global/js/foundation/foundation.dropdown.js"></script> 

<script src="global/js/foundation/foundation.forms.js"></script> 

<script src="global/js/foundation/foundation.joyride.js"></script> 

<script src="global/js/foundation/foundation.magellan.js"></script> 

<script src="global/js/foundation/foundation.orbit.js"></script> 

<script src="global/js/foundation/foundation.placeholder.js"></script> 

<script src="global/js/foundation/foundation.reveal.js"></script> 

<script src="global/js/foundation/foundation.section.js"></script> 

<script src="global/js/foundation/foundation.tooltips.js"></script> 

<script src="global/js/foundation/foundation.topbar.js"></script> 

<!-- My Custom Script!!!! --> 
<script src="global/js/vendor/custom.js"></script> 

<script> 
    $(document).foundation(); 
</script> 
</body> 
</html> 

Sie haben nicht erwähnt, wenn Sie Zurb Foundation 4 verwenden; Wenn Sie dann beachten, dass es Zepto (anstelle von jQuery) standardmäßig verwendet, außer für Browser, die den proto Aufruf nicht verstehen. Wenn Sie sehen, dass jQuery-Funktionen nicht funktionieren, möchten Sie vielleicht den Code auskommentieren, der Zepto anstelle von jQuery einrichtet und dann testet. Achten Sie auf die folgenden, auch in der Nähe der Unterseite des Dokuments:

<script> 
document.write('<script src=' + 
('__proto__' in {} ? 'global/js/vendor/zepto' : 'global/js/vendor/jquery') + 
'.js><\/script>') 
</script> 

ersetzen, mit:

<!-- <script> 
document.write('<script src=' + 
('__proto__' in {} ? 'global/js/vendor/zepto' : 'global/js/vendor/jquery') + 
'.js><\/script>') 
</script> --> 

<script src="global/js/vendor/jquery.js"></script> 

Und dann stellen Sie sicher, die jquery.js in den entsprechenden Ordner zu speichern. Auch hier speichere ich meine Dateien in einem/globalen Verzeichnis.

Hoffe, dass hilft!