我试图让基金会5的交换(使用HTML部分)工作,但部分内容没有加载.Foundation5,jQuery和Interchange位于
/bower_components/
index.html位于
/src/
small.html,medium.html和large.html部分位于
/src/app/nav/
以下是相关文件:
index.html 在</body>
*之前包含javascripts *
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery.cookie/jquery.cookie.js"></script>
<script src="bower_components/jquery-placeholder/jquery.placeholder.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.interchange.js"></script>
<!-- endbower -->
<!-- endbuild -->
交换-的test.html
<div data-interchange="[small.html, (small)], [medium.html, (medium)], [../large.html, (large)]">
<div data-alert class="alert-box secondary radius">
This is the default content.
</div>
</div>
app.scss
/* Define mobile styles */
@media only screen {
body {
background: red;
}
}
/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
body {
background: orange;
}
}
/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) {
body {
background: yellow;
}
}
关于这里有什么问题的任何想法?提前谢谢。
答案 0 :(得分:1)
我通过将$(document).foundation('interchange', 'reflow');
添加到我的 index.html 来解决了这个问题,并且我通过在文件名之前添加../app/nav/
来更改部分路径
<div data-interchange="[../app/nav/small.html, (small)], [../app/nav/medium.html, (medium)], [../app/nav/large.html, (large)]">
<div data-alert class="alert-box secondary radius">
This is the default content.
</div>
以下是关于基金会重排http://foundation.zurb.com/forum/posts/1712-bind-foundation-5-clearing-to-dynamically-loaded-images
的讨论