jQuery.mmenu使用（待更新）

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

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

 使用方法

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

<linktype="text/css"rel="stylesheet"href="mmenu.css"/>

<scriptsrc="jquery/1.9.1/jquery.min.js"></script>

<scripttype="text/javascript"src="jquery.mmenu.js"></script>               

 HTML结构

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

<divid="page">

  <divid="header"> <ahref="#menu"></a> Mmune </div>

  <divid="content">

    <h4>This a mmenu</h4>

    <p>how to use the jQuery.mmenu-plugin.</p>

  </div>

  <navid="menu">

    <ul>

    <li><ahref="page.html">The page</a></li>

    <li><ahref="mainmenu.html">The mainmenu</a></li>

    <li><ahref="submenus.html">Submenus</a></li>

    <li><ahref="labels.html">Labels</a></li>

    <li><ahref="counters.html">Counters</a></li>

    <li><ahref="selected.html">Selected item</a></li>

    <li><ahref="openmenu.html">Open the menu</a></li>

    <li><ahref="closemenu.html">Close the menu</a></li>

    </ul>

  </nav>

</div>               

 调用插件

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

$(document).ready(function() {

  $("#page").mmenu({

     // options

  }, {

     // configuration

  });

});         

 参数(options)

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

 配置(configuration)

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

 方法

<script type="text/javascript">

   $(document).ready(function() {

      $("#my-menu").mmenu({

         // options

      });

 

      varapi = $("#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打开一个面板setSelectedset or unset a list item as "selected".update更新菜单

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