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的<nav>来作为侧边栏菜单。使用<main>元素来作为内容容器。
<nav id="menu"> <header> <h2>Menu</h2> </header></nav><main id="panel"> <header> <h2>Panel</h2> </header></main> |
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对象实例。
<script src="js/slideout.min.js"></script><script> var slideout = new Slideout({ 'panel': document.getElementById('panel'), 'menu': document.getElementById('menu'), 'padding': 256, 'tolerance': 70 });</script> |
配置参数
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);1slideout.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)
