1. fundation 环境搭建 + 初始module
1.第一种使用环境：css
<!DOCTYPE
html
>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
< html class= "no-js" lang= "en" >
< head >
< meta charset= "utf-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title >Foundation 5 </ title >
< link rel= "stylesheet" href= "../css/normalize.css" >
< link rel= "stylesheet" href= "../css/foundation.css" >
<link rel="stylesheet" href="../css/app.css"> // 自己的css样式，命名 必须要 app.css
< script src= "../js/vendor/modernizr.js" ></ script >
</ head >
< body >
< script src= "../js/vendor/jquery.js" ></ script >
< script src= "../js/foundation.min.js" ></ script >
< script >
$( document). foundation();
</ script >
</ body >
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
< html class= "no-js" lang= "en" >
< head >
< meta charset= "utf-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title >Foundation 5 </ title >
< link rel= "stylesheet" href= "../css/normalize.css" >
< link rel= "stylesheet" href= "../css/foundation.css" >
<link rel="stylesheet" href="../css/app.css"> // 自己的css样式，命名 必须要 app.css
< script src= "../js/vendor/modernizr.js" ></ script >
</ head >
< body >
< script src= "../js/vendor/jquery.js" ></ script >
< script src= "../js/foundation.min.js" ></ script >
< script >
$( document). foundation();
</ script >
</ body >
</html>
2.第二种使用环境：sass
1.第三种使用环境：App
2. js 控制左右两侧菜单 动态效果
1.
有一系列控件是否单击“
单击
"菜单的“链接”将关闭菜单
<script>
$(
document).
foundation({
offcanvas : {
// Sets method in which offcanvas opens.
// [ move | overlap_single | overlap ]
offcanvas : {
// Sets method in which offcanvas opens.
// [ move | overlap_single | overlap ]
open_method: 'overlap',
// 控制左侧菜单的效果 ： move 整体移动 | overlap_single 仅一个菜单显示 | overlap 两个菜单同时显示
// Should the menu close when a menu link is clicked?
// [ true | false ]
// [ true | false ]
close_on_click : false
// true: 单击“单击”菜单的“链接”将关闭菜单。 false : 点击左侧链接无任何动作
}
});
});
</script>
2.有一系列的事件，你可以绑定到触发回调：侧边导航栏不再弹出
①
<script>
$(document).on('open.fndtn.offcanvas', '[data-offcanvas]', function () {
var off_canvas_wrap = $(this);
});
$(document).on('close.fndtn.offcanvas', '[data-offcanvas]', function () {
var off_canvas_wrap = $(this);
});
</
script
>
$(document)
.on('open.fndtn.offcanvas', '[data-offcanvas]', function() {
$('html').css('overflow', 'hidden');
})
.on('close.fndtn.offcanvas', '[data-offcanvas]', function() {
$(
'html').
css(
'overflow',
'auto');
})
</script>
3.侧边导航栏默认状态： 显示/隐藏
$('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right'); // 向右移动，显示左侧菜单栏
$('.off-canvas-wrap').foundation('offcanvas', 'hide', 'move-left'); // ==默认状态，都不显示
$(
'.off-canvas-wrap').
foundation(
'offcanvas',
'toggle',
'move-right'); // 向右移动
扫一扫
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
