Foundation 滑块允许用户通过拖动来选取区间值:
滑块可以通过使用 <div class="range-slider" data-slider> 创建。在
<div> 内, 添加两个 <span> 元素: <span class="range-slider-handle"> 创建矩形滑块（蓝色背景），
<span class="range-slider-active-segment"> 是在滑块后的灰色横条，是滑块拖动区域。
注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS:
使用 .radius 和 .round 类来添加圆角滑块。使用 .disabled 类来禁用滑块：
使用 .vertical-range 类和 data-options="vertical: true;" 来创建垂直滑块:
默认情况下，滑块放在横条的中间 (数值为 "50")。可以通过添加 data-options="initial: num"
属性来修改默认值:
如果我们需要在滑块拖动时实时显示值，可以通过在
<div> 中添加 data-options="display_selector:#id" 属性且元素 id 值与滑块的 id 匹配，如下实例：
以下实例使用了 display_selector 和 initial 数据选项:
默认情况下，滑块滑动的增加减少的数量为 "1"。可以通过添加 data-options="step: num;" 属性来修改步长值。实例中设置为 25:
默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options start 和 end 来设置区间值。以下实例设置区间值为 "1" 到 "20":
以下使用为在网格中使用滑块：
以下实例使用 <input> 取代 <span> 来显示滑块的值:
大家好，我正在开发一个新的Rails应用程序，我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css，还有它的视觉效果；p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的，如果您对app/assets/stylesheets/
在安装nodejs、ruby、gitplusbower后尝试安装Foundation。我不断收到以下错误，但我不知道如何解决:找不到有效的gem'foundation'(>=0)，原因如下:无法从https://rubygems.org/下载数据-SSL_connectreturned=1errno=0state=SSLv3readservercertificateB:certificateverifyfailed(https://api.rubygems.org/latest_specs.4.8.gz)有什么想法吗？ 最佳答案 如
有没有办法检测Foundationgrid是否存在？使用Javascript处于“小”或“大”模式？ 最佳答案 是的，您可以创建这样的函数:varisLarge,isMedium,isSmall;isSmall=function(){returnmatchMedia(Foundation.media_queries['small']).matches&&!matchMedia(Foundation.media_queries.medium).matches;};isMedium=function(){returnmatchMedia
根据基金会的documentation:AfteryouhaveincludedtheFoundationJavaScript,justaddasimplecalltoinitializeallpluginsonyourpage.WerecommendthatyouinitializeFoundationattheendofthepage.$(document).foundation();我的应用使用WebPack，因此模块加载是异步。这意味着正文底部的经典脚本会在ui-view被模板填充之前运行。(使用Angular)。如果我将脚本放在底部，DOM会在被Foundation的脚本解析
我对Foundation6.4中的javascript失去了理智。我不知道这个Webpack是怎么回事。似乎有些库/插件可以工作，有些则不能。我的最新一期是plyr(https://plyr.io/)。我不明白为什么TweenMax可以100%正常工作而plyr.js却不行。我究竟做错了什么？这是我得到的错误..app.js:23026UncaughtReferenceError:plyr未定义这就是我的app.js的样子..import$from'jquery';importwhatInputfrom'what-input';window.$=$;window.jQuery=$;re
我们使用的是TeamFoundationServer2010，我们使用Jasmine在本地机器上运行了一些JavaScript单元测试。.我们正在使用基于工作流程的构建。有没有人在构建期间成功运行Jasmine测试？如果Jasmine测试失败，您可以中断构建吗？ 最佳答案 我看到的方法是使用CodePlex上可用的ChutzpahTestRunner:http://chutzpah.codeplex.com/这允许您从命令行运行Jasmine/QUnit测试，然后可以使用InvokeProcess事件轻松地将其与TFSBuild集成
我想使用javascript动态切换ZurbFoundationSwitch控件的状态。这是默认的ZurbFondation开关:OffOn演示here.它们基于thisproject，我相信。当我尝试使用jquery更改开关的状态时:$('#d1').attr('checked','checked');$('#d').removeAttr('checked');//SwitchON$('#d').attr('checked','checked');$('#d1').removeAttr('checked');//SwitchOFF它在Firefox中有效，但在Chrome中无效。在C
使用Foundation功能而不是jQueryCSS进行自动完成的最佳做法是什么？这是我的代码:http://jsfiddle.net/qhoc/88kfb/FieldsetInputLabel我只是不想在页面上包含另一个.css文件:所以我想我有两个问题:有没有办法使用Foundation或其他东西的dropdown？似乎dropdown仅适用于topbar并且它的css在该特定用例之外搞砸了。在Foundation中创建下拉菜单的“标准”方法是什么？请帮忙举个例子。因为我认为它要么是一堆rows，要么是dropdown的调整 最佳答案
我使用bower安装了Foundation6。每次我使用任何Foundation6-JavaScriptbasedplugin时，我都会在控制台中收到多个warning。确切的警告:TriedtoinitializemagellanonanelementthatalreadyhasaFoundationplugin.我的脚本包括如下所示:$(document).foundation();该警告由foundation.js中180行的以下代码触发://Foreachpluginfound,initializeit$elem.each(function(){var$el=$(this),o
我创建了三个plunkr来说明我的问题。我正在尝试创建一个AngularJS指令，它将初始化基础并将必要的javascript应用于加载的模板。起初我试图使用ngInclude将Foundation5导航栏添加到我网站的所有页面。当html直接应用于部分时，顶部栏按预期工作。当在指令中添加html时，例如ngInclude，顶部栏将失去其所有功能。我怀疑这是因为在指令添加模板后基础没有得到初始化。作为解决方案，我创建了一个自定义指令来初始化基础并编译html模板。以我的方式初始化基础会卡住应用程序。有人对此有解决方案吗？尝试在不借助AngularUI的情况下实现这一目标。示例1:HTM
