标签: zurb-foundation-6
显示幻灯片编号orbit.js基础6 zurb
我目前正在使用Foundation 6中的orbit.js滑块,而没有看到显示幻灯片编号的选项.
你能就此提出建议或分享一些例子吗？
谢谢!
推荐指数
解决办法
查看次数
浏览器同步服务器 - 需要不同的路径到html和css进行重新加载
问题是我的index.html不会从姐妹文件夹加载css文件.我尝试了各种Browsersync选项,但都没有.
进入我的第二天试图解决这个问题.我正在使用Flask框架中的Python,它的工作方式类似于Laravel等.我的任务管理器是Gulp,前端框架是Foundation 6.我是Flask和Gulp的新手.几年前我曾经和Laravel一起使用Grunt和Livereload,然后scss和浏览器重新加载.内存消失了.
我的文件结构应该是典型的Flask,只是这里的相关文件夹:
-root
-app
-static
-css
-js
-templates (html files)
-foundation (scss files and framework)
Browsersync似乎是设计的,所以你必须在html文件下有css.我已经在/ root和/ app文件夹中使用index.html进行了测试,但它确实有效.但是,我需要/想要/ templates中的html.
在/app/templates/index.html中:
<link rel="stylesheet" href="../static/css/app.css">
我在根和/基础中使用Browsersync和Gulp.js文件的命令行.
如果我使用"app/templates"设置它,那么Browsersync服务器将从/ templates提供html,但它无法找到css.如果我将/ static/css移动到/ templates中,则在浏览器中很好地呈现正确的index.html文件.所以Browsersync适用于旧的预应用框架布局.它只是无法处理姐妹文件夹的路径.
gulp.task('serve', ['scss'], function() {
browserSync({
server: "app"
});
gulp.watch(src.css, ['scss']);
gulp.watch(src.html).on('change', reload);
});
我考虑过他们的代理选项,但到目前为止还找不到解决方案.我没有在网上找到很多设置示例,没有一个是有用的.
现在我只是使用Foundation 6对应用程序的html页面进行桌面布局,并且没有设置开发服务器,只是我的MBP上的一个文件夹.
有任何想法吗？请 :-)
推荐指数
解决办法
查看次数
基础6中的面板不呈现
这里可能缺少简单的东西.我试图让面板渲染,但它只是没有为我显示.有什么我错过了吗？
我是否把div = panel放入或不放入,没有任何区别.它看起来和之前或之后一样.
愚蠢的问题,但我必须从Web服务运行这些渲染吗？
我使用命令行提示安装了基础6.
谢谢!
<!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>Site Demo</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h1>Title</h1>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
<a href="#">One</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div …推荐指数
解决办法
查看次数
向下钻取菜单的自定义文本"返回"按钮[基础6]
虽然我知道我可以使用数据后退按钮来更改我的下钻菜单上的文本,是否可以更改它们以反映下钻的父母是什么？
例如,下钻菜单的工作原理如下:
我希望它能像这样运作:
我希望这是有道理的,让我知道我是否可以澄清.感谢您提供的任何见解.
推荐指数
解决办法
查看次数
如何让ZURB Foundation 6.4.1与Angular 4一起使用？
我试图让ZURB Foundation 6.4.1与Angular 4一起工作,但我失败了.
我正在按照本教程http://shermandigital.com/blog/zurb-foundation-with-angular-cli/进行操作,但它仅适用于Foundation 6.3.
谢谢您的帮助.
推荐指数
解决办法
查看次数
如何为一个特定页面添加JavaScript？
我在我的项目中使用Zurb Foundation,非常方便.但我很困惑,我怎么能添加自己的JavaScript,这只是在加载该页面时的特定页面的DOM.
我在页面的部分中使用了第三方图表库,我必须使用一些JavaScript初始化图表容器.这些JavaScripts无法组合到final中,app.js因为其他页面不包含图表容器div.那么任何人都可以给我一些建议吗？
编辑:以下是我的项目结构.
src/
??? assets
? ??? img
? ? ??? x.jpg
? ??? js
? ? ??? app.js
? ? ??? draw.js
? ? ??? xcharts.js
? ??? scss
? ??? app.scss
? ??? news.scss
? ??? _settings.scss
??? data
??? layouts
? ??? default.html
??? pages
? ??? news.html
? ??? template.html
??? partials
? ??? news-header.html
??? styleguide
??? index.md
??? template.html
我尝试在我的图表容器之后添加我的JavaScript代码,但我不能,因为它使用了jQuery.Assuming我的JavaScript是draw.js.gulp将自动合并draw.js到app.js每个页面.如果我只包括draw.js …
推荐指数
解决办法
查看次数
莫代尔关闭的基金会火灾事件？
我在我的应用程序中使用基础显示通过AJAX发送信息.一切正常,但在模态结束时我想改变一些文字.当模态与Foundation 6关闭时,如何触发函数？任何帮助都会很棒,我目前的代码如下:
$("#share_modal").foundation('reveal', 'close', function() {
alert("closed");
});
我收到了错误
未捕获的ReferenceError:很抱歉,'reveal'不是此元素的可用方法.
但我所指的元素是 .reveal
<div class="reveal" id="share_modal" data-reveal data-options="closeOnClick:true; closeOnEsc: true;">
<div class="row">
推荐指数
解决办法
查看次数
用Laravel的Elixir(Gulp)编译Zurb Foundation 6
所以我试图在我的Laravel项目中引入并编译Foundation 6,但我似乎错过了我的gulpfile.js中的一些东西,以便它按预期工作.
首先我使用下载包
凉亭安装基础 - 网站 - 保存
没问题.
然后我在我的gulpfile.js中有这个
elixir(function(mix) {
mix.sass(
'../bower_components/foundation-sites/scss/**/*.scss'
);
mix.copy(
'resources/assets/bower_components/jquery/dist/jquery.min.js',
'public/js/jquery.min.js'
);
mix.copy(
'resources/assets/bower_components/foundation-sites/dist/foundation.min.js',
'public/js/foundation.min.js'
);
mix.copy(
'resources/assets/bower_components/what-input/what-input.min.js',
'public/js/what-input.min.js'
);
});
(是的,我知道我可以结合复制命令,我会.)
当我吞下一口气时,一切看起来都不错.
vagrant@homestead:~/Code/Kreddat$ gulp
[14:34:42] Using gulpfile ~/Code/Kreddat/gulpfile.js
[14:34:42] Starting 'default'...
[14:34:42] Starting 'sass'...
Fetching Sass Source Files...
- resources/assets/bower_components/foundation-sites/scss/**/*.scss
Saving To...
- public/css/app.css
[14:34:44] Finished 'default' after 1.61 s
[14:34:44] gulp-notify: [Laravel Elixir] Sass Compiled!
[14:34:44] Finished 'sass' after 2.38 s
[14:34:44] Starting 'copy'...
Fetching Copy Source Files...
- resources/assets/bower_components/jquery/dist/jquery.min.js
Saving …推荐指数
解决办法
查看次数
Same Foundation 6的多个触发器显示模式导致关闭时不需要的滚动
我有一个带有单个Foundation 6 Reveal模式的登陆页面.模态包含页面的联系表单.因此,该模式可以由出现在页面上不同位置的几个按钮触发.所有按钮都应打开相同的"联系表单"模式.
单击任何按钮确实打开模式没有问题.但是,当我们关闭模态时 - 通过单击模态内的"关闭"按钮,或者通过点击键盘上的"Esc" - 页面会自动滚动到页面上最后一个按钮的位置,该按钮是模态.似乎在'close'上模态强制视口滚动到DOM中的最后一个触发器!
显然,这是不受欢迎的行为 - 因为大多数时候访问者不会通过点击最后一个按钮打开模态...
CodePen说明了这个问题:https://codepen.io/icouto/pen/QgJzoJ
代码摘要:
<!-- first trigger button -->
<p><button id="btn1" class="button" data-open="exampleModal1">Click me for a modal</button></p>
<!-- lots of filler text to make the page long -->
<p>lorem ipsum dolor sit amet, etc. etc. etc. </p>
<!-- second trigger button -->
<p><button id="btn2" class="button" data-open="exampleModal1">Click me for a modal</button></p>
<!-- modal window -->
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p …modal-dialog autoscroll zurb-foundation zurb-reveal zurb-foundation-6
推荐指数
解决办法
查看次数
100％宽度的响应式桌子
这是代码：
<div class="row">
<div class="large-12 columns">
<table class="scroll wide">
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Forth</td>
</tr>
</table>
</div>
</div>
的CSS
.wide { width: 100%; }
这是小提琴：
https://jsfiddle.net/emilcieslar/zc37ydys/
如您所见，只要页面的宽度小于表的宽度，就有4列和滚动类使表可滚动。但是，如果我想使桌子的宽度为100％，它保持不变，就不会拉伸。我可以看到table标签本身是拉伸的，但是内部却没有拉伸。这是由于表正在显示：块引起的，但是必须是显示：块，否则它将无法滚动（在水平轴上）。如何在仍保持响应状态的同时实现100％宽度的表格？
推荐指数
解决办法
查看次数
基础 - 坚持不在小屏幕上工作
我有一个粘性导航,适用于所有尺寸,我想在导航滚动下有一个div棒(它将是过滤器以过滤页面上的帖子).
http://mindtools.io/rob-test-mobile/
所以"这就是STICKY"h1坚持大中型,但不是很小.有什么明显的东西我在这里不见了吗？为什么这不适合小尺寸？
谢谢!
推荐指数
解决办法
查看次数
标签 统计
javascript ×3
gulp ×2
html ×2
jquery ×2
angular ×1
autoscroll ×1
browser-sync ×1
css ×1
flask ×1
homestead ×1
laravel ×1
modal-dialog ×1
orbit ×1
panel ×1
sass ×1
sticky ×1
zurb-reveal ×1