Geek asks and answers

The correct way to enable custom javascript when using Zurb Foundation

Many times now I run into problems when trying to add my own jQuery to a Foundation project.

Is this related to how the Foundation uses “no conflict”? What is the correct procedure for adding your own scripts?

I tried to include the scripts.js file call after the foundation.min.js method call, but some very simple slideToggle calls do not work at all. But when I remove the link to foundation.min.js, everything works fine.

I also had problems with external script files.

Any tips? Thank.

+5
source share
1 answer

js script body $(document).foundation();. js/vendor. ; 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>

, Zurb Foundation 4; , Zepto ( jQuery), , proto. , jQuery , , Zepto jQuery, . , :

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

:

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

jquery.js . , .

, !

+4

More articles:


All Articles