当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/08/03 来源:互联网 浏览: 关键词:响应式 jquery 菜单导航 侧边栏 
jQuery响应式隐藏滑动侧边栏插件 jQuery响应式隐藏滑动侧边栏插件
阿里云

简要教程

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

安装

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

bower install flyPanels --save

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

<!-- You'll need jquery -->
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="jquery.flyPanels.js"></script>
 
<!-- Some basic CSS is required of course -->
<linkrel="stylesheet"href="css/flyPanels.css">  

使用方法

基本HTML结构

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

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

多内容面板HTML结构

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

<divclass="flypanels-container preload">
  <divclass="offcanvas flypanels-left">
    <divclass="panelcontent"data-panel="default">
      <p>左边默认面板</p>
    </div>
    <divclass="panelcontent"data-panel="more">
      <p>左边附加面板</p>
    </div>
  </div>
  <divclass="flypanels-main">
    <divclass="flypanels-topbar">
      <aclass="flypanels-button-left icon-menu"data-panel="default"href="#"><iclass="fa fa-bars"></i></a>
      <aclass="flypanels-button-left icon-menu"data-panel="more"href="#"><iclass="fa fa-gears"></i></a>
      <aclass="flypanels-button-right icon-menu"data-panel="default"href="#"><iclass="fa fa-bars"></i></a>
    </div>
    <divclass="flypanels-content">
      你的页面内容放这里...
    </div>
  </div>
  <divclass="offcanvas flypanels-right">
    <divclass="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
      }
    });
  });
});          
<divclass="flypanels-container preload">
  <divclass="offcanvas flypanels-left">
    <divclass="panelcontent"data-panel="treemenu">
      <navclass="flypanels-treemenu">
        <ul>
          <liclass="haschildren"><ahref="#"><spanclass="link">Example menu item</span> <spanclass="expand">2<iclass="fa icon"></i></span></a>
            <ul>
              <liclass="haschildren"><ahref="#"><spanclass="link">Example menu item</span> <spanclass="expand">2<iclass="fa icon"></i></span></a>
                <ul>
                  <liclass="haschildren"><ahref="#"><spanclass="link">Example menu item</span> <spanclass="expand">2<iclass="fa icon"></i></span></a>
                    <ul>
                      <liclass="haschildren"><ahref="#"><spanclass="link">Example menu item</span> <spanclass="expand">2<iclass="fa icon"></i></span></a>
                        <ul>
                          <li><ahref="#"><spanclass="link">Example menu item</span></a></li>
                          <li><ahref="#"><spanclass="link">Example menu item</span></a></li>
                        </ul>
                      </li>
                      <li><ahref="#"><spanclass="link">Example menu item</span></a></li>
                    </ul>
                  </li>
                  <li><ahref="#"><spanclass="link">Example menu item</span></a></li>
                </ul>
              </li>
              <li><ahref="#"><spanclass="link">Example menu item</span></a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <divclass="flypanels-main">
    <divclass="flypanels-topbar">
      <aclass="flypanels-button-left icon-menu"data-panel="treemenu"href="#"><iclass="fa fa-bars"></i></a>
      <aclass="flypanels-button-right icon-menu"data-panel="default"href="#"><iclass="fa fa-gears"></i></a>
    </div>
    <divclass="flypanels-content">
      你的页面内容放这里...
    </div>
  </div>
  <divclass="offcanvas flypanels-right">
    <divclass="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
      }
    });
  });
});           
<divclass="flypanels-container preload">
  <divclass="offcanvas flypanels-left">
    <divclass="panelcontent"data-panel="default">
      <p>panel content goes here</p>
    </div> 
  </div>
  <divclass="flypanels-main">
    <divclass="flypanels-topbar">
      <aclass="flypanels-button-left icon-menu"data-panel="default"href="#"><iclass="fa fa-bars"></i></a>
      <aclass="flypanels-button-right icon-menu"data-panel="search"href="#"><iclass="fa fa-search"></i></a>
    </div>
    <divclass="flypanels-content">
      Your page content goes here...
    </div>
  </div>
  <divclass="offcanvas flypanels-right">
    <divclass="panelcontent"data-panel="search">
      <divclass="searchbox"data-searchurl="json/searchresult.json?search=true">
        <inputtype="text"/>
        <ahref="#"class="searchbutton"></a>
      </div>
      <divclass="resultinfo"style="display:none">
        You search for "<spanclass="query">lorem ipsum</span>" resulted in <spanclass="num">5</span> hits.
      </div>
      <divclass="errormsg"style="display:none">
        Something went wrong, please refresh the page and try again.
      </div>
 
      <divclass="loading"style="display:none"><divclass="loader"></div><span>Searching...</span></div>
      <navclass="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:在侧边栏插件被销毁时的回调函数。

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top