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)在那一边打开侧边栏,可选值为leftright,默认值为left
var slideout = new Slideout({
  'panel': document.getElementById('main'),
  'menu': document.getElementById('menu'),
  'padding': 256,
  'tolerance': 70
});                
              

方法

  • Slideout.open();:打开侧边栏菜单,它发出beforeopenopen事件。
  • Slideout.close();:关闭侧边栏菜单,它发出beforecloseclose事件。
  • 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)