纯javascript轻量级可嵌套的隐藏侧边栏插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

side-by-slide-panel是一款非常有用的纯javascript轻量级可嵌套的隐藏侧边栏插件。通过它可以快速的制作各种隐藏侧边栏效果，甚至可以将这些内容嵌套在一起。

使用方法

使用该插件需要在页面中引入fsp-sidepanel.js和fsp-sidepanel.css文件。

<link rel="stylesheet" href="path/to/fsp-sidepanel.css">
<script src="path/to/fsp-sidepanel.js"></script>

HTML结构

侧边栏的基本HTML结构如下。需要注意的是在主内容容器上要添加class sp-content。在侧边栏容器上要添加class fsp-sidepanel。对于右侧边栏，需要添加class fsp-sidepanel-right：

<div id="pageLeftSidepanel" class="fsp-sidepanel">
 <!-- 左侧边栏的内容 -->
</div>

<div id="pageRightSidepanel" class="fsp-sidepanel fsp-sidepanel-right">
 <!-- 右侧边栏的内容 -->
</div>

<div id="pageContent" class="fsp-content">
 <!-- 主内容区域 -->
</div>

初始化插件

完成上面的步骤之后可以下面的方法来使用这个侧边栏插件：

document.addEventListener('DOMContentLoaded', function () { // Execute after DOM as loaded
    fsp('#inner_demo1', '#mainSectionContent', '#innerLeftSidepanel').sidepanel({});
    fsp('#inner_demo2', '#mainSectionContent', '#innerRightSidepanel').sidepanel({
        side: 'right'
    });
});

API

用法说明

fsp(toggleSelector, contentAreaSelector, sidepanelSelector)

第一个参数是用于触发侧边栏切换的按钮元素选择器
第二个参数是主内容区域的选择器
第三个参数是侧边栏容器的选择器

方法

sidepanel(opts)：这是一个最主要的方法，返回一个新的实例，通过这个实例可以进行链式编程。opts是一个对象。唯一可用的参数是side，用于定义左右侧边栏。默认是左侧边栏：{side: 'left'}。你不一定要提供侧边栏的宽度，插件会自动计算。
toggle()：以编程的方式切换侧边栏。可以在一个对象实例上使用这个方法。例如你想创建一个默认是关闭的侧边栏：
```
fsp(...).sidepanel().toggle()  
```