问题标签 [zurb-foundation]

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 回答
4366 浏览

tooltip - 使用 ZURB Foundation 作为工具提示——新创建的 DOM 元素不绑定到工具提示“悬停”事件

我的具体用例是我使用 .net 回发来显示一个更新面板,其中包含与它们相关联的工具提示的元素。我已经在页面上初始化了 ZURB Foundation(提供工具提示)脚本,第一页的工具提示效果很好。回发后,我想*重新*初始化脚本,以便将这些新的工具提示项绑定到“悬停”事件。

通用用例是以任何方式添加启用工具提示的新元素的任何情况。

在我看来,“悬停”绑定是在页面初始化到现有的“.has-tip”元素集合时完成的,但是正在处理未来的.has-tip 元素的存在。

我想做以下事情: a) 重新初始化工具提示插件并搜索新的 .has-tip 元素以附加“悬停”事件。

已经尝试了许多不同的方法来尝试重新初始化,但是

似乎是最有希望的,因为它成功调用了脚本中的 init 方法,但没有将悬停事件绑定到新的 .has-tip 元素。

0 投票
2 回答
3574 浏览

ajax - 在 zurb 基础中,我可以在“显示”弹出窗口中插入一个表格吗?

以及如何在弹出窗口和调用弹出窗口的页面之间传输数据?我想在 zurb 基础的弹出窗口“显示”中为用户注册做一个 ajax 表单。你认为可能吗?

0 投票
4 回答
1113 浏览

javascript - 有没有办法将初始化函数传递给 Orbit 幻灯片?

我解决了我原来的问题,但我想知道是否有更优雅的解决方案。我正在使用 Foundation 的 Orbit 创建幻灯片。这不是简单的幻灯片,它是一个幻灯片,其中每张幻灯片都定义了一个数据标题,并且在这个数据标题中有需要加载模式对话框的 HTML。

如果您使用 Foundation,您会立即考虑使用 Reveal 库来调出模态对话框,我会的,但要求使用 prettyPhoto。(这些是要求。)问题是数据标题中的元素不受原始初始化调用的影响:

$("a[rel^='prettyPhoto']").prettyPhoto();

我需要做的是确保在加载每个数据标题时对其进行初始化。好吧,这就是问题所在。我已经通过使用 afterSlideChange 事件解决了幻灯片转换的问题,但问题是第一张幻灯片。我需要为显示的第一张幻灯片调用此方法。

这是解决此问题的代码:

有没有更好的方法来做到这一点而不必复制该代码。我应该自己定义一个“initializeSlide”事件,还是有一些我只是想念的答案?

0 投票
1 回答
973 浏览

image - 重叠图像的 Zurb Orbig 滑块内容

它是网格中的单个图像,位于所有其他图像之上,老实说,我不知道为什么并且需要一些帮助。

这是仅在加载页面时发生的事情。

我正在使用 Zurb Foundation Orbit 滑块,我的页面包含这样的部分:

负责设置滑动部分的javascript是这样的:

我一直得到的是第一个网格上的第二个图像被第二个网格上的第二个图像替换。意思是,当我加载页面时,nAppIcon 不显示,而是显示工具提示图标。

然后,如果我单击滑块上的箭头进行导航,所有这些都会消失,并且所有图标都永远在适当的位置,不再重叠。

0 投票
1 回答
831 浏览

jquery - 使用 jQuery Isotope 时显示模态定位错误

我在几个项目中遇到了这个问题,两次都将 jQuery Isotope 与 Zurb Foundation 结合使用,特别是用于显示模式的 Reveal 插件。

http://www.budeblog.com

在以模式启动的视频中,z-index 似乎不正确,并且以某种方式相对于其父容器定位,而不是像预期的行为那样呈现在全屏覆盖的中心。此外,一些后续项目仍会显示在叠加层的顶部。在引入同位素之前,覆盖层正常工作。

我添加了“animationEngine: jQuery”以确保不使用 CSS 过渡。

此刻愣住了。欢迎任何想法,谢谢。

0 投票
2 回答
4663 浏览

sass - 使用 compass 配置 zurb foundation-sass - 你如何让它工作并在项目中使用它?

我是 sass 和 zurb 基础的新手(我过去曾通过 codekit 使用过 bootstrap/less)并且一直在尝试使用 sass 版本foundation-sass,但无法成功配置它 - 通过命令行使用 zurb 的 gem 或通过使用代码包。

如果我配置 gem:

  1. 只要我通过以下方式加载所有基础组件,基础就可以工作@import "ZURB-foundation";

  2. 但是,如果我尝试通过取消注释来单独加载组件,@import "zurb/buttons";我会看到错误:"Undefined variable: "$default-color"- 但是变量和 mixin 文件在哪里?

  3. 此外,基础 scss 文件存放在哪里,以便您可以自定义设计,而无需使用 apps.scss 覆盖所有内容?

如果我采取另一条路线并尝试使用 mac 应用程序代码包:

  1. 我收到 /zurb/ 目录不存在的错误(它不存在) - 这似乎与上面的第 3 点有关 - 当您创建一个新的 compass-foundation 项目时,似乎没有任何基础文件存在你的项目文件夹。

如果我然后通过 github 下载 Foundation-sass:

  1. 所有文件都是 sass 格式而不是 scss

  2. 尽管您可以在调用时修改 compass mixin,但是如何在不修改其原始文件的情况下修改 Foundation 的样式表文件 - 或者您应该编辑它们的文件?

我还没有找到任何我理解的关于所有东西应该如何组合在一起的信息,所以希望这里的人可能知道。

顺便说一句,我没有将它与 ruby​​ 项目一起使用 - 只是试图纯粹为前端工作进行设置。

任何帮助将非常感激。

干杯

0 投票
2 回答
2988 浏览

html - 试图在 zurb 基础中居中嵌套列

我正在使用 Zurb 基础,我试图将嵌套列居中,但由于某种原因我无法理解,它没有居中。任何人都可以对此有所了解吗?

谢谢!

0 投票
2 回答
925 浏览

html - 响应式“网格”?

我有一项令人羡慕的任务是“改造”一个网站以使其具有响应性,并获得了 Zurb 基础 980px 网格。我有点迷茫我应该如何让我现有的网站适应这个 - 我是否必须完全重新设计它以使元素与新网格对齐?我知道该站点将按比例缩放,并且在某些断点处将隐藏一些元素并为其他元素加载新的 CSS - 但这是我没有得到的网格?

0 投票
1 回答
6558 浏览

jquery - Bootstrap scrollspy 工作很奇怪

嗨,我在基础框架中使用 Bootstrap Scrollspy。

到目前为止,我设法让 scrollspy 工作,但不像它应该的那样。

scrollspy 正确更改导航的状态,但不完全更改指定的 div。

scrollspy 应该更改导航的第一个 div 容器运行良好,但随后容器的偏移量增加,最后 scrollspy 更改它在 nomansland 中的状态,而不是在 div 顶部。

当站点加载时,scrollspy 显示最后一个导航条目而不是第一个?

我想这是基于百分比的布局。你怎么看?

你可以在这里找到开发页面:

http://dekonstruktiv.ch/static_sheggendorn/

感谢您的帮助

0 投票
1 回答
205 浏览

html - 可定制的导航/故障排除

在 HTML5 和一般编码方面,我是一个完整的初学者......我一直在使用 Zurb Foundation 进行原型设计,并使用以下代码进行导航。它的工作原理是在尺寸缩小时(例如缩小浏览器或在移动设备上打开)按钮而不是文本出现。

唯一的问题是,我希望导航与左上角放置的徽标在同一行中排列,并且布局彼此水平。现在,导航元素作为简单的链接文本堆叠在一起。这是样式表可编辑的特征吗?关于从哪里开始或自定义导航需要什么代码的任何建议?移动版 ul 类是不是基本上把我的代码弄乱了?(删除它不会在全尺寸版本中产生任何差异......)非常感谢!到目前为止,搜索并没有产生太多...