适合移动手机使用的隐藏滑动侧边栏插件

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);

  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)