Problems getting Foundation 4 JS to work in WP

问题

I'm merging Foundation 4 with Bones to create a WP Starter theme. I had everything working fine with the JS from Foundation 3, but now that I'm trying to implement the Foundation 4 JS I'm running into some issues.

I followed the steps found in the Foundation 4 JS Documentation, but still had no luck. Here is the code I placed directly before the closing body tag (I know the correct way is to enqueue the script, but for testing I was just pasting it directly above the closing body tag):

<script>
document.write('<script src=http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>   

<script src="http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/foundation.min.js"></script>

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

I'm attempting to open a modal on this page, but as you can see, the modal never fires when you click the link. I notice some errors in the Javascript console, but I'm still new to JS so they are a bit over my head.

As I mentioned before, things were working fine with the Foundation 3 JS, which didn't require the call to initialize the function - it just seemed to work. Not sure if that makes a huge difference, but it's something I noticed that was different about the documentation for Foundation 4 JS compared to Foundation 3 JS.

Can anyone get me pointed in the right direction?

回答1:

It looks like the browser can't find Zepto (at least chrome can't).

It's looking for it here: http://mcfaddengavender.net/library/js/vendor/zepto.js but it returns a 404

Make sure you have your libraries set up in the appropriate directories!

回答2:

well after i commented, i got it to work lol. maybe this will help you or someone else.

it seems like the docs are a little bit confusing, i was only able to get plugin functionality from loading foundation/foundation.js and foundation-whatever-plugin.js in this sequence - loading just foundation.js did not work for me.

i'm using requirejs to load so i don't have to worry about paths, but for your purposes just make sure you're not having any paths issue and this load order should work. for troubleshooting purposes i'm bypassing modernizr / zepto detectors and just loading jquery straight.

 requirejs.config({

 baseUrl: "/path/to/scripts",
 paths:{
  jquery: 'vendor/jquery/jquery.min',
 },
 shim: {

    'foundation/foundation': { deps: ['jquery'] },
    'foundation/foundation.alerts': { deps: ['jquery'] },
    'foundation/foundation.clearing': { deps: ['jquery'] },
    'foundation/foundation.cookie': { deps: ['jquery'] },
    'foundation/foundation.dropdown': { deps: ['jquery'] },
    'foundation/foundation.forms': { deps: ['jquery'] },
    'foundation/foundation.joyride': { deps: ['jquery'] },
    'foundation/foundation.magellan': { deps: ['jquery'] },
    'foundation/foundation.orbit': { deps: ['jquery'] },
    'foundation/foundation.placeholder': { deps: ['jquery'] },
    'foundation/foundation.reveal': { deps: ['jquery'] },
    'foundation/foundation.section': { deps: ['jquery'] },
    'foundation/foundation.tooltips': { deps: ['jquery'] },
    'foundation/foundation.topbar': { deps: ['jquery'] },
    'vendor/jquery.maskedinput/jquery.maskedinput.min': { deps: ['jquery']},
    'vendor/chosen/chosen/chosen.jquery': { deps: ['jquery']},
    'vendor/tablesorter/js/jquery.tablesorter.min': { deps: ['jquery']},
    'vendor/tablesorter/addons/pager/jquery.tablesorter.pager.min': {
      deps: [
      'jquery', 
      'vendor/tablesorter/js/jquery.tablesorter.min'
      ]
    },
    'vendor/redactor-js/redactor/redactor.min': { deps: ['jquery']},
    'lib/jquery.passwordstrength': { deps: ['jquery']}

}

});

require(["jquery",
"foundation/foundation",
"foundation/foundation.alerts",
"foundation/foundation.clearing",
"foundation/foundation.cookie",
"foundation/foundation.dropdown",
"foundation/foundation.forms",
"foundation/foundation.joyride",
"foundation/foundation.magellan",
"foundation/foundation.orbit",
"foundation/foundation.placeholder",
"foundation/foundation.reveal",
"foundation/foundation.section",
"foundation/foundation.tooltips",
"foundation/foundation.topbar"
], function ($) {
  $(document).foundation();
});

来源：https://stackoverflow.com/questions/15180310/problems-getting-foundation-4-js-to-work-in-wp

标签

javascript

jquery

wordpress

zurb-foundation