Slidebars是一款简单实用的手机App样式隐藏侧边栏特效jQuery插件。该侧边栏插件十分小巧，仅需1555字节的js文件和600字节的css文件。它使用CSS3动画来制作过渡效果，在不支持的浏览器中会使用jQuery.animate()方法来替代。

安装

可以通过bower来安装该侧边栏插件。

bower install Slidebars

使用方法

HTML结构

在使用这个隐藏侧边栏插件时，<meta>的设置应该如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
    maximum-scale=1.0, user-scalable=no">

你的页面内容需要放置在一个#sb-site的容器中。侧边栏的<div>中需要添加.sb-slidebar的class，如果要侧边栏在左边，则再添加一个sb-leftclass。

<div id="sb-site">
  <!-- 你的页面内容 -->
</div>

<div class="sb-slidebar sb-left">
  <!-- 左侧侧边栏的内容 -->
</div>

<div class="sb-slidebar sb-right">
  <!-- 右侧侧边栏的内容 -->
</div>
class类

你需要添加.sb-slidebar class到所有的侧边栏上。

然后你可以通过添加下面的class来设置不同类型的侧边栏。

  • .sb-left：设置侧边栏为左侧边栏。
  • .sb-right：设置侧边栏为右侧边栏。
  • .sb-static：设置侧边栏为不固定模式，它会随滚动条一起滚动。
  • .sb-style-push：侧边栏打开时会推动页面内容。
  • .sb-style-overlay：侧边栏打开时会遮罩页面内容。
  • .sb-width-thin：一个自适应宽度，比标准宽度小15%。
  • .sb-width-wide：一个自适应宽度，比标准宽度大15%。
  • sb-width-custom：要自定义侧边栏的宽度，需要添加.sb-width-custom class，并通过data-sb-width属性传入一个指定的宽度值。你可以传入一个固定的刻度值，也可以传入一个百分比值。例如： 
    <div class="sb-slidebar sb-left sb-width-custom" data-sb-width="15%">
  <!-- Your left Slidebar content. -->
</div>
  • .sb-momentum-scrolling：添加这个class可以使用原生的IOS平滑滚动。

class控制类：

下面的一些可选的class可用于控制侧边栏。

  • .sb-toggle-left：用于切换左侧边栏的状态。
  • .sb-toggle-right：用于切换右侧边栏的状态。
  • .sb-open-left：用于打开左侧边栏。
  • .sb-open-right：用于打开右侧边栏。
  • .sb-close：用于关闭所有的侧边栏。
动画class类

如果你想要侧边栏有滑动效果可以添加.sb-slide class。这对于固定定位的元素非常有用，例如顶部导航条。

辅助class类

该侧边栏插件有下面一些辅助class类。

  • html.sb-init：在侧边栏已经初始化并打开时会出现。
  • html.sb-active：侧边栏打开时会出现。
  • html.sb-active-left：左侧边栏打开时会出现。
  • html.sb-active-right：右侧边栏打开时会出现。
  • html.sb-android：在安卓浏览器2.x以上版本中使用该侧边栏时会出现。
  • html.sb-static：在安卓浏览器版本小于3或IOS浏览器版本小于5中会出现。
  • .sb-disable-close：在侧边栏的链接中添加这个class会在点击该链接时阻止关闭侧边栏。
初始化插件

在页面DOM元素加载完毕之后，可以通过$.slidebars()方法来初始化该侧边栏插件。

(function($) {
  $(document).ready(function() {
    $.slidebars();
  });
}) (jQuery);

也可以在初始化时传入一些配置参数：

(function($) {
  $(document).ready(function() {
    $.slidebars({
      siteClose: true, // true or false
      disableOver: 480, // integer or false
      hideControlClasses: true, // true or false
      scrollLock: false // true or false
    });
  });
}) (jQuery);

配置参数

  • siteClose：允许在点击页面时关闭侧边栏。默认值为true。
  • disableOver：禁止侧边栏超过指定的页面宽度。默认值为false。
  • hideControlClasses：当侧边栏宽度超过disableOver指定的值时，隐藏侧边栏的控制class。默认值为false。
  • scrollLock：在侧边栏打开时不允许页面内容滚动。默认值为false。

API

该侧边栏插件有一些API方法。你需啊哟在初始化的时候创建一个新的侧边栏实例对象。

  • .slidebars.open(side)：打开指定的侧边栏。例如：.open('left')或.open('right')。
  • .slidebars.toggle(side)：切换指定的侧边栏。例如：.toggle('left')或.toggle('right')。
  • .slidebars.close()：关闭所有打开的侧边栏。
  • .slidebars.init：如果侧边栏被正确初始化并且处于打开状态返回true。
  • .slidebars.active(side)：如果指定的侧边栏处于打开状态返回true。
  • .slidebars.destroy(side)：从DOM中移除侧边栏，需要指定side：.destroy('left')或.destroy('right')。

下面是一个例子：

<script>
  (function($) {
    $(document).ready(function() {
      var mySlidebars = new $.slidebars();
      $('.my-button').on('click', function() {
        mySlidebars.slidebars.open('left');
      });
      $('.my-other-button').on('click', function() {
        mySlidebars.slidebars.toggle('right');
      });
      $('.my-third-button').click(mySlidebars.slidebars.close);
    });
  }) (jQuery);
</script>