Modo corretto per includere javascript personalizzato quando si utilizza Zurb Foundation

Question

Numerose volte mi sono imbattuto in problemi durante il tentativo di aggiungere il mio jQuery a un progetto Foundation.

Questo ha a che fare con il modo in cui Foundation usa "no-conflict"? Qual è la procedura corretta per aggiungere i propri script?

Ho provato a includere una chiamata a un file scripts.js dopo la chiamata a foundation.min.js ma alcune chiamate slideToggle molto semplici non sono affatto in esecuzione. Eppure quando rimuovo il riferimento a foundation.min.js tutto funziona bene.

Ho anche avuto problemi con i file di script esterni.

Qualche consiglio? Grazie.

Answer 1

Ho aggiunto il mio script js personalizzato alla fine dell'elenco di script prima del tag body di chiusura e prima di $ (document) .foundation() ;. L'ho anche memorizzato nella directory js/vendor. Nella mia pasta qui sotto, ho memorizzato tutto in una directory globale; basta cercare la tua directory js.

<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> 

Non hai menzionato se usi Zurb Foundation 4; se si nota che utilizza Zepto (invece di jQuery) per impostazione predefinita eccetto per i browser che non comprendono la chiamata proto. Se vedi che le funzioni di jQuery non funzionano, potresti voler commentare il codice che imposta Zepto invece di jQuery e poi prova. Cercare la seguente, anche vicino al fondo del documento:

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

sostituirlo con:

<!-- <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> 

e quindi assicurarsi di memorizzare i jquery.js nella cartella appropriata. Ancora una volta, sto memorizzando i miei file in una directory/globale.

Spero che questo aiuti!