问题标签 [zurb-foundation-5]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
2450 浏览

alert - Zurb Foundation 5 关闭带有个人按钮的警报框

我想将警报框“扩展”为具有例如确认框或提示框,但我也想继续使用回调函数关闭以将信息存储在数据库中。

我的警报框的结构可能是这样的:

我遇到的问题是.alert-box-close班级如何像班级一样工作.close

感谢您的帮助

0 投票
0 回答
1105 浏览

ruby-on-rails - 带有 simple_form gem 的 Foundation 5 开关

我正在尝试实现与此http://foundation.zurb.com/docs/components/switch.html 不太相似的结果?使用 Foundation 5 开关类

我遇到的问题是 simple_form 创建了一个具有相同名称的隐藏输入,所以当我使用以下代码时,我没有达到预期的结果

我得到了以下HTML

0 投票
2 回答
10111 浏览

jquery - Foundation 5 Datepicker 失败,还是我

好的,我正在使用 SASS 运行 FOundation 5 我在这里下载了 Peter Beno 的 Datepicker:

https://github.com/najlepsiwebdesigner/foundation-datepicker

现在我知道它说它是为 Foundation 4 制作的,但我看不出它为什么不能在 Foundation 5 中工作。是的,javascript 有点过头了,但这就是我使用别人的日期选择器的原因.

以下是我在 Foundation 5 中实现这个日期选择器的步骤。

1)我将其重命名foundation-datepicker.js为foundation.datepicker.js 并将其包含在JS 包中。我的页面现在正在加载这个脚本。

2)重命名foundation-datepicker.css_datepicker.scss并将其包含在sass 文件夹中。它现在被吸入我缩小的 css 文件中,我检查了。

然后我在我的页面上使用了这个代码:

从 asp.net mvc 输出到这个:

我也在调用 jQueryui 之后添加了这个

这是文档页面,如果他可以帮助我在 Foundation 5 中进行这项工作,我会对其进行更新并使他更加清楚。

http://foundation-datepicker.peterbeno.com/example/example.html

我在 Mozilla 中对其进行了测试,以避免 Chromes 糟糕的日期选择器。我究竟做错了什么。它最有可能与 Foundation 5 冲突吗?是否有另一个我可以使用的日期选择器有点类似,它是基于 jQueryUI 的,并不糟糕。

0 投票
2 回答
4461 浏览

orbit - Zurb Foundation 中的 Orbit Slider 在我检查元素之前无法工作

使用带有 Orbit 滑块的 Zurb Foundation 5 来构建我的网站。我在模式中设置了一个滑块,但它只显示图像的顶部和幻灯片导航,直到我检查元素,然后整个滑块显示出来。帮助?

网站在这里: http ://www.parker-gibson.com/testing/foundation/index.html 当您单击“这就是我所做的”部分中的第一个图像时,会显示有问题的滑块。提前致谢!相关代码如下...

0 投票
2 回答
7885 浏览

html - Zurb Foundation 网格将最后一列向左移动

我正在尝试找出一种在不破解网格的情况下利用网格的好方法。

我想要做的是small-4顶行中的三个宽网格(也就是每个网格),然后是第二行,我希望列匹配但只有两个small-4元素。

通常,答案是先做一个small-4,然后做一个,small-8但因为输入设置width: 100%为此对我不起作用。

有什么开箱即用的方法吗?我知道偏移量,但这仅适用于设置为向右移动的项目。

目前有两个small-4div,右 div 向右浮动,这意味着它与上面的不对齐。我可以添加一个额外的small-4,但我想遵循这方面的最佳实践。

这是我的代码,因此您可以了解我的意思:

0 投票
1 回答
418 浏览

javascript - Zurb Foundation Hashtag 在 URL 书签或反向链接上显示模式

我正在使用 ZURB Foundation 5 以及他们的 JS 脚本“Reveal Modal”。我想做的是能够在 URL 中的 URL 主题标签上显示模式。

触发

显示模式

虽然 a href 中不需要主题标签,但其背后的原因是,当.no-js被使用display:none时,display:block这意味着当没有检测到 java 脚本时链接最少做某事。

我需要的解决方案

现在因为我<a href>在显示模式框时在 URL 更新中使用主题标签,虽然这不是问题,但我想要一个解决方案,如果有人添加书签或与主题标签共享链接,框自动显示本身。

例如,如果我单击Bits and Bobs,则 url 将sitename.com/#bits-n-bobs显示模态。我想要的是当有人在使用主题标签访问该页面时将域与主题标签链接起来时,它会使用 JavaScript 打开显示模式,而无需单击

我想这是用 JavaScript 做的相当容易的事情,但它是我最薄弱的领域之一,感谢任何帮助或至少为我指明正确的方向。

0 投票
2 回答
1444 浏览

html - Zurb Foundation 5:网格列堆叠

我是基础新手,我只有关于如何使用网格的基本概念。

在移动/小屏幕上查看时,我有这 3 列需要堆叠(参见“移动”图像)。 手机屏幕

在大屏幕上应该是这样的:

非手机屏幕

这是我当前的代码。这不是我想要的,我开始感到困惑。

0 投票
2 回答
2659 浏览

css - 基础5格行嵌套负边距

我在 Zurb Foundation 5 中遇到了这个奇怪的问题。每当我在行内嵌套行时,它都会产生负边距,将其从网格中抛出。这是我的代码的示例标记:

这是该基金会产生的代码:

我如何防止这种行为?我的标记是否有问题,或者我应该覆盖基础 scss(但我不想覆盖默认样式)。

0 投票
0 回答
18 浏览

responsive-design - 基金会响应不能正常工作?

我正在使用基金会的最新版本(5.4.5)。我创建了一个在底部显示滚动条的网页。我已经添加了所有三种类型的列类(largemediumsmall,但是在使用较小的设备访问该站点时遇到了问题。帮助我和任何想法?

我的问题图片:

在此处输入图像描述

0 投票
1 回答
107 浏览

media-queries - 在 Foundation 5 上使用媒体查询交换内容

谢谢你的协助。

我正在使用 Foundation 5,但我似乎无法弄清楚如何正确交换内容。

对于移动分辨率,我设计了 10 个手风琴,并在重复的 index.html 文件中创建了适用于桌面分辨率的垂直选项卡。在foundation 5 文档中,有关使用交换内容的详细信息是特定于图像的,对于更大的分辨率,图像会变得可交互。

如何设置我的代码,以便我可以在移动设备和桌面上的垂直选项卡上显示手风琴?

如果有人可以提供帮助,将不胜感激。

谢谢,

标记