slideout是一款非常实用的适合移动手机使用的隐藏滑动侧边栏js插件。它没有任何依赖,代码简洁,压缩后的代码只有2KB大小。它使用CSS3 transforms 和 transitions来制作侧边栏的滑动效果。它的特点还有:
没有任何框架的依赖。
代码简单,结构清晰。
自带原生滚动条。
易于定制。
使用CSS transforms 和 transitions来制作动画效果。
文件体积小,压缩后只有2KB大小。
安装
你可以使用下面的任何一个包管理来安装该侧边栏插件。
$ npm install slideout
$ spm install slideout
$ bower install slideout.js
$ component install mango/slideout
使用方法
HTML结构
该滑动侧边栏的HTML结构非常简单。你可以使用一个带#menu的来作为侧边栏菜单。使用元素来作为内容容器。
Menu
Panel
CSS样式
下面是该滑动侧边栏的基本CSS样式。
body {
width: 100%;
height: 100%;
}
.slideout-menu {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 0;
width: 256px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: none;
}
.slideout-panel {
position:relative;
z-index: 1;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
初始化插件
在页面中引入Slideout.js,然后创建一个新的slideout对象实例。
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
配置参数
Slideout(options)
创建一个新的Slideout对象实例。
options:(Object)在新对象实例中的参数对象。
options.panel:(HTMLElement)包含页面内容的DOM元素,默认为.slideout-panel。
options.menu:(HTMLElement)侧边栏DOM元素,默认值为.slideout-menu。
[options.duration]:(Number)打开/关闭侧边栏的时间,单位毫秒,默认值为300。
[options.fx]:(String)打开和关闭侧边栏时的CSS动画的easing效果,默认值为ease。
[options.padding]:(Number)默认值为256。
[options.tolerance]:(Number)默认值为70。
[options.touch]:(Boolean)设置为false时禁用移动触摸事件,默认值为true。
[options.side]:(String)在那一边打开侧边栏,可选值为left或right,默认值为left。
var slideout = new Slideout({
'panel': document.getElementById('main'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
方法
Slideout.open();:打开侧边栏菜单,它发出beforeopen和open事件。
Slideout.close();:关闭侧边栏菜单,它发出beforeclose和close事件。
Slideout.toggle();:切换侧边栏菜单。
Slideout.isOpen();:如果侧边栏菜单打开返回true,否则返回false。
Slideout.enableTouch();:允许通过touch事件来打开侧边栏菜单。
Slideout.disableTouch();:禁止通过touch事件来打开侧边栏菜单。
Slideout.on(event, listener);
slideout.on('open', function() { ... });
Slideout.once(event, listener);
slideout.once('open', function() { ... });
Slideout.off(event, listener);
slideout.off('open', listener);
Slideout.emit(event, ...data);
slideout.emit('open');
事件
一个Slideout对象实例会发出下面的一些事件:
beforeclose
close
beforeopen
open
translate
Slideout对象实例只有在通过touch事件打开和关闭菜单时才发出translate事件。
slideout.on('translate', function(translated) {
console.log(translated); // 120 in px
});
浏览器兼容
Chrome (IOS, Android, desktop)
Firefox (Android, desktop)
Safari (IOS, Android, desktop)
Opera (desktop)
IE 10+ (desktop)