jQuery响应式隐藏滑动侧边栏插件

flyPanels是一款非常实用的响应式隐藏滑动侧边栏jQuery插件。该侧边栏菜单插件可以兼容包括IE9在内的所有现代浏览器。可以用它来做侧边栏菜单，联系表单或搜索面板组件等等。

安装

可以使用bower来安装该侧边栏插件。

bower install flyPanels --save                
              

在页面中引入jQuery和jquery.flyPanels.js以及flyPanels.css文件。

<!-- You'll need jquery -->
<script src="js/jquery.min.js"></script>
<script src="jquery.flyPanels.js"></script>

<!-- Some basic CSS is required of course -->
<link rel="stylesheet" href="css/flyPanels.css">                
              

使用方法

基本HTML结构

该隐藏滑动侧边栏的基本HTML结构如下：

<div class="flypanels-container preload">
  <div class="offcanvas flypanels-left">
    <div class="panelcontent" data-panel="default">
      <p>panel content goes here</p>
    </div>
  </div>
  <div class="flypanels-main">
    <div class="flypanels-topbar">
      <a class="flypanels-button-left icon-menu" data-panel="default" href="#"></a>
      <a class="flypanels-button-right icon-menu" data-panel="default" href="#"></a>
    </div>
    <div class="flypanels-content">
      你的页面内容放置在这里...
    </div>
  </div>
  <div class="offcanvas flypanels-right">
    <div class="panelcontent" data-panel="default">
      <p>panel content goes here</p>
    </div>
  </div>
</div>      
              

多内容面板HTML结构

你可以使用data-panel属性设置多个不同的隐藏侧边栏面板，在按下不同的按钮时触发不同的面板。

<div class="flypanels-container preload">
  <div class="offcanvas flypanels-left">
    <div class="panelcontent" data-panel="default">
      <p>左边默认面板</p>
    </div>
    <div class="panelcontent" data-panel="more">
      <p>左边附加面板</p>
    </div>
  </div>
  <div class="flypanels-main">
    <div class="flypanels-topbar">
      <a class="flypanels-button-left icon-menu" data-panel="default" href="#"><i class="fa fa-bars"></i></a>
      <a class="flypanels-button-left icon-menu" data-panel="more" href="#"><i class="fa fa-gears"></i></a>
      <a class="flypanels-button-right icon-menu" data-panel="default" href="#"><i class="fa fa-bars"></i></a>
    </div>
    <div class="flypanels-content">
      你的页面内容放这里...
    </div>
  </div>
  <div class="offcanvas flypanels-right">
    <div class="panelcontent" data-panel="default">
      <p>右边默认面板</p>
    </div>
  </div>
</div>                
              

使用树形菜单面板

如果你需要使用树形菜单面板，需要在配置参数中将treeMenu的初始化选项设置为true，同时添加必要的HTML结构。

jQuery(document).ready(function($) {
  $(document).ready(function(){
    $('.flypanels-container').flyPanels({
      treeMenu: {
        init: true
      }
    });
  });
});                
              

<div class="flypanels-container preload">
  <div class="offcanvas flypanels-left">
    <div class="panelcontent" data-panel="treemenu">
      <nav class="flypanels-treemenu">
        <ul>
          <li class="haschildren"><a href="#"><span class="link">Example menu item</span> <span class="expand">2<i class="fa icon"></i></span></a>
            <ul>
              <li class="haschildren"><a href="#"><span class="link">Example menu item</span> <span class="expand">2<i class="fa icon"></i></span></a>
                <ul>
                  <li class="haschildren"><a href="#"><span class="link">Example menu item</span> <span class="expand">2<i class="fa icon"></i></span></a>
                    <ul>
                      <li class="haschildren"><a href="#"><span class="link">Example menu item</span> <span class="expand">2<i class="fa icon"></i></span></a>
                        <ul>
                          <li><a href="#"><span class="link">Example menu item</span></a></li>
                          <li><a href="#"><span class="link">Example menu item</span></a></li>
                        </ul>
                      </li>
                      <li><a href="#"><span class="link">Example menu item</span></a></li>
                    </ul>
                  </li>
                  <li><a href="#"><span class="link">Example menu item</span></a></li>
                </ul>
              </li>
              <li><a href="#"><span class="link">Example menu item</span></a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="flypanels-main">
    <div class="flypanels-topbar">
      <a class="flypanels-button-left icon-menu" data-panel="treemenu" href="#"><i class="fa fa-bars"></i></a>
      <a class="flypanels-button-right icon-menu" data-panel="default" href="#"><i class="fa fa-gears"></i></a>
    </div>
    <div class="flypanels-content">
      你的页面内容放这里...
    </div>
  </div>
  <div class="offcanvas flypanels-right">
    <div class="panelcontent" data-panel="default">
      <p>panel content goes here</p>
    </div>
  </div>
</div>                
              

用于作为搜索面板组件

要使用搜索面板组件，需要在配置参数中将search的初始化选项设置为true，同时添加必要的HTML结构。

jQuery(document).ready(function($) {
  $(document).ready(function(){
    $('.flypanels-container').flyPanels({
      search: {
        init: true,
        saveQueryCookie: true
      }
    });
  });
});                
              

<div class="flypanels-container preload">
  <div class="offcanvas flypanels-left">
    <div class="panelcontent" data-panel="default">
      <p>panel content goes here</p>
    </div>  
  </div>
  <div class="flypanels-main">
    <div class="flypanels-topbar">
      <a class="flypanels-button-left icon-menu" data-panel="default" href="#"><i class="fa fa-bars"></i></a>
      <a class="flypanels-button-right icon-menu" data-panel="search" href="#"><i class="fa fa-search"></i></a>
    </div>
    <div class="flypanels-content">
      Your page content goes here...
    </div>
  </div>
  <div class="offcanvas flypanels-right">
    <div class="panelcontent" data-panel="search">
      <div class="searchbox" data-searchurl="json/searchresult.json?search=true">
        <input type="text" />
        <a href="#" class="searchbutton"></a>
      </div>
      <div class="resultinfo" style="display:none">
        You search for "<span class="query">lorem ipsum</span>" resulted in <span class="num">5</span> hits.
      </div>
      <div class="errormsg" style="display:none">
        Something went wrong, please refresh the page and try again.
      </div>

      <div class="loading" style="display:none"><div class="loader"></div><span>Searching...</span></div>
      <nav class="flypanels-searchresult" style="display:none"></nav>
    </div>
  </div>
</div>                
              

初始化插件

$(document).ready(function(){
  $('.flypanels-container').flyPanels();
});                
              

配置参数

下面是该隐藏侧边栏插件的配置参数：

options: {
  treeMenu: {
    init: false,
    expandHandler: 'span.expand'
  },
  search = {
    init: false,
    saveQueryCookie: false
  },
  onInit: function () {},
  onLoad: function () {},
  onOpenLeft: function () {},
  onOpenRight: function () {},
  onCloseLeft: function () {},
  onCloseRight: function () {},
  onDestroy: function () {}
};                
              

• treeMenu：
  • init：Boolean，是否初始化属性菜单。
  • expandHandler：String，打开和关闭元素子按钮时的点击事件。
• search：
  • init：Boolean，是否初始化搜索面板组件。
  • saveQueryCookie：Boolean，使用将搜索结果记录在cookie中以记住最后的搜索结果。
• onInit：侧边栏插件初始化后的回调函数。
• onLoad：侧边栏插件被调用之后的回调函数。
• onOpenLeft：屏幕左边的隐藏侧边栏被打开后的回调函数。
• onOpenRight：屏幕右边的隐藏侧边栏被打开后的回调函数。
• onCloseLeft：屏幕左边的隐藏侧边栏被关闭后的回调函数。
• onCloseRight：屏幕右边的隐藏侧边栏被关闭后的回调函数。
• onDestroy：在侧边栏插件被销毁时的回调函数。