Foundation 6 JS不在Rails项目中工作

时间:2017-04-10 04:26:53

标签: javascript css ruby-on-rails zurb-foundation

正如标题所说我对基础6有问题让它运转起来。我到处搜索并尝试各种可能的方法让它工作但我仍然没有这样做。

我安装了foundation-rails gem并按照正确的指示操作,但仍然无法正常工作。 Css工作正常问题是我无法切换标签。

的application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .
$(document).foundation();

Application.scss.sass

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *=require foundation_and_overrides
@import "foundation_and_overrides"

以下是我的 foundation_and_overide.scss

@charset 'utf-8';

@import 'settings';
@import 'foundation';


// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
//
// @import 'motion-ui/motion-ui';

// We include everything by default.  To slim your CSS, remove components you don't use.

@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
//
// @include motion-ui-transitions;
// @include motion-ui-animations;

我希望有人可以为这个问题找到答案。我卡在这里。

1 个答案:

答案 0 :(得分:1)

由于没有人回答我的问题并向我投票,我自己找出解决方案。它可以帮助那些像我一样有问题的人。

问题是因为基础js与jquery和turbolink冲突。

在app / assets / javascript / foundation.coffee中创建新文件

添加以下代码:

setup = ->

  $(document).foundation();

$ ->

  console.log "Loading page...!  " + Date.now()%10000

  setup()

  document.addEventListener "turbolinks:load", () ->

  console.log "turbolinks:load "  + Date.now()%10000

    setup()

感谢您查看此问题!