jQuery高仿真移动手机滑动侧边栏布局插件

简要教程

jQuery.mmenu是一款高仿真移动手机滑动侧边栏效果的jQuery插件。该jQuery插件能够制作出和手机应用程序效果完全相同的隐藏滑动侧边栏和多级菜单效果。它的特点有：

• 滑动侧边栏可以放置在页面的上下左右四个位置。
• 可以作为水平滑动菜单或垂直下拉菜单使用。
• 整个布局包括完整的搜索框，页面头部，脚部和内容区域。
• 适合移动触摸设备使用。
• 可以很容易的通过CSS文件来自定义样式。
• 可以在现代浏览器和移动手机设备中正常运行。

使用方法

使用这个滑动侧边栏布局插件首先要引入jQuery、jquery.mmenu.js和jquery.mmenu.css文件。

<link type="text/css" rel="stylesheet" href="mmenu.css" />
<script src="jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mmenu.js"></script>   

HTML结构

这个滑动侧边栏布局的基本HTML结构如下：

<div id="page">
  <div id="header"> <a href="#menu"></a> Mmune </div>
  <div id="content">
    <h4>This a mmenu</h4>
    <p>how to use the jQuery.mmenu-plugin.</p>
  </div>
  <nav id="menu">
    <ul>
    <li><a href="page.html">The page</a></li>
    <li><a href="mainmenu.html">The mainmenu</a></li>
    <li><a href="submenus.html">Submenus</a></li>
    <li><a href="labels.html">Labels</a></li>
    <li><a href="counters.html">Counters</a></li>
    <li><a href="selected.html">Selected item</a></li>
    <li><a href="openmenu.html">Open the menu</a></li>
    <li><a href="closemenu.html">Close the menu</a></li>
    </ul>
  </nav>
</div>  

调用插件

在页面加载完毕之后，使用下面的方法来调用插件：

$(document).ready(function() {
  $("#page").mmenu({
     // options
  }, {
     // configuration
  });
});    

参数(options)

参数名称	默认值	类型	描述
extensions	[]	Array	一组使菜单可用的扩展名称，当使用配置(extensions)时需要使用该参数
onClick{blockUI}	null	Boolean	Whether or not to block the user interface while loading the new page
onClick{close}	null	Boolean	是否在用户点击一个菜单链接后是否关闭菜单
onClick{preventDefault}	null	Boolean	是否在点击链接时阻止默认的行为
onClick{setSelected}	true	Boolean	是否将被点击的菜单项显示为已点击状态
slidingSubmenus	true	Boolean	子菜单是否从右边滑出。如果设置为false，子菜单会显示在父菜单的下面。

配置(configuration)

配置	默认值	类型	描述
classNames{divider}	"Divider"	String	在一个<li>元素上使用这个class名称，该元素会被显示为一个分割条
classNames{panel}	"Panel"	String	使用该class名称的元素会被显示为一个Panel
classNames{selected}	"Selected"	String	在一个<li>元素上使用这个class名称，该元素会显示为已选择状态
classNames{vertical}	"Vertical"	String	在子菜单上使用这个class名称，它将会显示在父菜单的下面而不是从右边滑出
clone	false	Boolean	是否复制菜单
openingInterval	25	Number	打开和关闭菜单和面板的时间，单位毫秒
panelNodetype	"div, ul, ol"	String	容器的节点类型jQuery选择器
transitionDuration	400	Number	CSS过渡效果的持续时间，单位毫秒

方法

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      });
 
      var api = $("#my-menu").data( "mmenu" );
      api.bind( "openPanel", function( $panel ) {
         console.log( "This panel is now opened:" + $panel.attr( "id" ) );
      });
      api.openPanel( $("#my-panel") );
   });
</script>  

方法名称	描述
closeAllPanels	关闭所有的面板，回到第一个面板
closePanel	关闭一个面板，只有在slidingSubmenus参数设置为false时可用
getInstance	获取菜单对象的实例
init	使用该方法初始化一个新的菜单面板
openPanel	打开一个面板
setSelected	set or unset a list item as "selected".
update	更新菜单

关于该滑动侧边栏布局插件的更详细的信息请参考：http://mmenu.frebsite.nl/

本文转自jQuery之家

本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/jQuery/Menu-Navigation/201505101809.html