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

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

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

简要教程

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

安装

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

bower install flyPanels --save

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



 

  

使用方法

基本HTML结构

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


  
    
      

panel content goes here

你的页面内容放置在这里...

panel content goes here

多内容面板HTML结构

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


  
    
      

左边默认面板

左边附加面板

你的页面内容放这里...

右边默认面板

使用树形菜单面板

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

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

  
    
      
        
    Example menu item 2
      Example menu item 2
        Example menu item 2
          Example menu item 2
          • Example menu item
          • Example menu item
        • Example menu item
      • Example menu item
    • Example menu item
你的页面内容放这里...

panel content goes here

用于作为搜索面板组件

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

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

  
    
      

panel content goes here

Your page content goes here... You search for "lorem ipsum" resulted in 5 hits. Something went wrong, please refresh the page and try again. Searching... 初始化插件

$(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