问题
I asked a previous question earlier about flash messages and how to customize them, but I could really use some clarification about what these files are?
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alert.js"></script>
What are they and why do I need them? Foundation makes it sound as if it was already included.Am I supposed to put code in them, my rails app doesn't have a vendor directory or jquery.js
回答1:
As you probably know Foundation is a responsive CSS/JavaScript framework for deploying mobile and desktop ready sites quickly. Foundation provides a large CSS rule set that manages the look of your site, but in order to provide the responsive functionality it requires the use of JavaScript.
Foundation Javascript was designed to work with jQuery right out of the gate. You simply need to include the following in the <head> section of your page.
Additionally you may want to use Modernizr as it acts as a shim for HTML5 elements that older browsers may not recognize, and provides detection for mobile devices.
<script src="/js/vendor/modernizr.js"></script>
The above is NOT REQUIRED by recommended. It is pretty lightweight and really just sits there. The JQuery is used for all the heavy lifting Foundation has to do. It is REQUIRED for any of the functionality of Foundation. The look comes from CSS but the functionality comes from JavaScript
<script src="/js/vendor/jquery.js"></script>
You just need to have JQuery version 1.10 or higher loaded on your page BEFORE the foundation.js library. You can use a CDN for it such as this one to avoid maintaining a copy locally.
Once that is done you simply need to load the Foundation Javascript Library. These are all the functions that are used by Foundation. They are seperated as follows for convenience and portability.
You can EITHER load each plugin individually, or include foundation.min.js, which automatically loads the Foundation Core and all Javascript plugins.
If you use this version then you only need to load the single file for full functionality.
<script src="/js/foundation.min.js"></script>
The following version (non-minified) will load the core functionality only. This is basically the grid re-sizing and utility functions.
<script src="/js/foundation.js"></script>
Just that file is slightly quicker to load and has slightly less overhead then the minified version so this option is commonly used when you only need the core functionality.
To extend on the non-minified and add the additional functions like the Topbar, Alerts, Dropdowns and so forth you have to load their respective Javascript files which add that functionality to the core Javascript
<script src="/js/foundation.alert.js"></script>
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>
With my deployments I typically setup JQuery and Modernizer via a CDN and use a local copy of foundation.min.js. This way I have everything I need now and in the future in the single included file. It is not that big and way easier then going with the I'm only gonna load what I need when I need it route.
Also to make sure Foundation runs on your page you will want to include the following right before the closing tag:
<script>
$(document).foundation();
</script>
I hope this has cleared up any confusion, and feel free to PM me or post comments if you need any further help deploying Foundation. I have been using it for a while and it is my new favorite Framework.
来源：https://stackoverflow.com/questions/23316486/what-does-jquery-js-foundation-js-and-foundation-alert-js-do