Prawidłowy sposób dołączania niestandardowego javascript podczas korzystania z Zurb Foundation

Question

Wiele razy natknąłem się na problemy podczas próby dodania własnego jQuery do projektu Foundation.

Czy ma to jakiś związek ze sposobem, w jaki Fundacja używa "braku konfliktu"? Jaka jest poprawna procedura dodawania własnych skryptów?

Próbowałem dołączyć wywołanie do pliku scripts.js po wywołaniu pliku foundation.min.js, ale niektóre bardzo proste wywołania funkcji SlideToggle nie są w ogóle uruchomione. Jednak po usunięciu odwołania do foundation.min.js wszystko działa poprawnie.

Mam również problemy z zewnętrznymi plikami skryptów.

Jakieś wskazówki? Dziękuję Ci.

Answer 1

Dodałem mój niestandardowy skrypt js na sam koniec listy skryptów przed zamykającym tagiem, a przed $ (document) .foundation() ;. Przechowałem go także w katalogu js/vendor. W poniższym pliku zapisałem wszystko w katalogu globalnym; po prostu poszukaj własnego katalogu 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> 

Nie wspomniałeś o tym, jeśli używasz Zurb Foundation 4; jeśli zauważysz, że używa Zepto (zamiast jQuery) domyślnie, z wyjątkiem przeglądarek, które nie rozumieją połączenia proto. Jeśli widzisz, że funkcje jQuery nie działają, możesz skomentować kod, który ustawia Zepto zamiast jQuery, a następnie test. Spójrz na następujących, także w dolnej części dokumentu:

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

Wymień że z:

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

a następnie upewnij się, aby zapisać jquery.js w odpowiednim folderze. Ponownie przechowuję moje pliki w katalogu/global.

Nadzieję, że pomaga!