zurb-foundation-6 | 易学教程

Foundation 6 Accordion Not Working

阅读更多关于 Foundation 6 Accordion Not Working

问题 Could you please help on below Foundation 6 Accordion sameple code where I could not able get it worked. I am not sure what I am missing. Also, I kept all js and css files are in the same directory. <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="jquery.js"></script> <script src="foundation.js"></script> <script src="foundation.accordion.js"></script> <link rel="stylesheet" href="foundation

Sticky '_calc' is not an available method for this element

阅读更多关于 Sticky '_calc' is not an available method for this element

问题 I'm trying to invoke the recalculation of the sticky header when using Foundation 6. However everything i attempt returns We're sorry, '_calc' is not an available method for this element Here's the declaration of the sticky element: <div id="sticky-container" data-sticky-container> <div id="sticky" data-sticky data-margin-top="0" data-top-anchor="the-table" data-btm-anchor="footer:bottom" style="width: 100%"> I've tried: $('.sticky:visible').foundation('_calc', true); $('#sticky-container')

How to pass the jQuery element inside a function - syntax

阅读更多关于 How to pass the jQuery element inside a function - syntax

问题 I need to pass jQuery as an argument in the first two functions, or the code inside initialiseSticky will not work. It does work for document.ready but not for ajaxComplete , my syntax is probably not good at all... jQuery(function($) { console.log('document ready- sticky'); initialiseSticky($); }); $(document).ajaxComplete(function ($) { console.log('ajax complete- sticky'); initialiseSticky($); }(jQuery)); function initialiseSticky($) { //my code } Before I edited, the function with all the

Foundation 6 data-responsive-menu parameters

阅读更多关于 Foundation 6 data-responsive-menu parameters

问题 I'm building a responsive navigation with foundation 6, integrated in wordpress. I'd like to use data-responsive-menu attribute in order to trigger the drilldown plugin on small screens. Easy. The problem is that I don't want any of the other plugins on the other screen sizes. The documentation gives this example: <ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown"> But this trigger drilldown plugin on small screens and dropdown on bigger ones. If I use only "drilldown"

Work needed to upgrade Zurb Foundation v5 to v6.2

阅读更多关于 Work needed to upgrade Zurb Foundation v5 to v6.2

问题 What & how much work is required to upgrade Foundation 5 to 6.2? Our dev shop is taking over development of an existing F5 project. Seems the front-end layout is 80% complete, though we'll likely transition into JSX to little will be untouched. I need help in weighing if F6.2 is worth the extra hassle, since the client is budget-limited. Zurb's F6 announcement lists only a few lower priority advantages (A11y, fewer classes). Flexbox might be helpful, small Foundation CSS is less of a concern

Can't get Orbit Carousel to work in Foundation 6.2.0

阅读更多关于 Can't get Orbit Carousel to work in Foundation 6.2.0

问题 I'm been trying for the life of me to get a basic Orbit carousel to work but it just isn't happening. Can anyone see where I'm going wrong? I've tried various alternatives and had a look at the documentation but am getting nowhere: Code below: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Orbit Test</title> <link rel="stylesheet

How to globally import Javascript library in Angular2 Typescript project?

阅读更多关于 How to globally import Javascript library in Angular2 Typescript project?

问题 I'm trying to figure out how to propertly import an external library in my Angular2 projects. As you can see reading other answers about this matter, there is a bit of confusion about it, and even Angular2 documentation have no info about it. In addition, any search on Google leads to old results related to alpha or beta version of Angular2. I'm trying to import Foundation and jQuery libraries. I need the first to use some Foundation code, and i need the second to make Foundation JS code to

How to add JavaScript just for one specific page?

阅读更多关于 How to add JavaScript just for one specific page?

问题 I'm using Zurb Foundation in my project and it is very convenient. But I'm confused that how can I add my own JavaScript which is just for a specific page's DOM when that page is loading. I used a third-party chart lib in a page's partial and I must initial the chart container with some JavaScript. These JavaScripts can not be combined to the final app.js because other pages don't contain the chart container div . So can any one give me some advice? Edit: The following is my project structure

ngOnDestroy and $('#element').foundation('destroy');

阅读更多关于 ngOnDestroy and $('#element').foundation('destroy');

问题 I'm trying to implement a Sticky Magellan in my Angular2 application. Once I leave the view I want to remove the plugin, because otherwise I get problems when I'm revisiting the view. So I'm using: ngOnDestroy(): void { $('#element').foundation('destroy'); } Which results in: Error: Uncaught (in promise): ReferenceError: We're sorry, 'destroy' is not an available method for this element. ReferenceError: We're sorry, 'destroy' is not an available method for this element. at jQuery.fn.init

Can't get Orbit Carousel to work in Foundation 6.2.0

阅读更多关于 Can't get Orbit Carousel to work in Foundation 6.2.0

I'm been trying for the life of me to get a basic Orbit carousel to work but it just isn't happening. Can anyone see where I'm going wrong? I've tried various alternatives and had a look at the documentation but am getting nowhere: Code below: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Orbit Test</title> <link rel="stylesheet" href="css/foundation.css" /> <link rel="stylesheet" href="css/app.css" /> </head> <body> <div class=