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)