FerroMenu是一款炫酷的移动优先的jQuery环形气泡菜单特效插件。该环形气泡菜单插件可以让你很轻松的创建一个环形菜单,并且该菜单可以在屏幕上随意拖动到9个位置上(东、南、西、北、中方向和东南、西北、东北和西南方向)。该环形菜单的菜单项可以是锚链接、外部链接或javascript等等。该菜单展开的最终效果有点类似于超酷jQuery环形按钮菜单效果插件。FerroMenu环形气泡菜单的特点有:

  • 可以将菜单拖动到屏幕的9个位置上:东、南、西、北、中方向和东南、西北、东北和西南方向。
  • 可以通过拖动来移动菜单,当拖动结束时,环形菜单会自动移动到最接近的位置点上。
  • 可以很轻松的通过CSS文件来定制环形菜单的样式。
  • 能够通过设置来改变环形菜单的动画持续时间、easing效果、动画延时时间、旋转角度、打开关闭效果、菜单距离屏幕的margin、菜单项到主按钮的半径等属性。
  • 环形菜单项会在菜单移动后根据可用空间重新排列。
  • 可以设置使用或禁用拖动菜单选项。
  • 滑动内容都被封装到一个容器中。

使用方法

要使用该环形插件,首先在HTML页面的<head>中引入jquery.ferro.ferroMenu.css文件,在<body>标签之前引入jquery和jquery.ferro.ferroMenu.js文件。

<link rel="stylesheet" href="css/jquery.ferro.ferroMenu.css" type="text/css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/jquery.ferro.ferroMenu-1.2.3.min.js"></script>          
              
HTML结构

使用一个无序列表来制作该环形菜单的HTML结构:

<ul id="nav">
    <li><a href="<link_path>">item 1</a></li>
    <li><a href="<link_path>">item 2</a></li>
    <li><a href="<link_path>">item 3</a></li>
    <li><a href="<link_path>">item 4</a></li>
    <li><a href="<link_path>">item 5</a></li>
    <li><a href="<link_path>">item 6</a></li>
</ul>           
              

用于触发模态窗口的超链接的href要指向该模态窗口的ID,在模态窗口中,要给定一个关闭按钮,否则该模态窗口不能关闭。关闭按钮的样式可以自定义。另外,关闭按钮的class的写法是固定的:close-,后面接要关闭的模态窗口的ID。

基本调用

用下面的方法来调用该环形菜单插件插件。

$(document).ready(function() {
    $('#nav').ferroMenu();
});              
              

上面的调用方法使用的是插件的默认配置参数,你也可以自定义配置参数,如下:

$(document).ready(function() {
    $("#nav").ferroMenu({
        position    : "left-center",
        delay       : 50,
        rotation    : 720,
        margin      : 20
    });
});                
              

可用参数

参数 可用值 默认值 描述
closeTime number 500 环形菜单关闭动画的时间,单位毫秒。
delay number 0 环形菜单的菜单项开始动画的延时时间,单位毫秒。
drag true | false true 环形菜单是否可以在屏幕中拖动。
easing string cubic-bezier(0.680, -0.550, 0.265, 1.550) 环形菜单的easing效果。可以使用所有和HTML5兼容的easing效果。
margin number 10 环形菜单主按钮距离屏幕边部的距离,单位像素。
position 'left-top' | 'center-top' | 'right-top' | 'right-bottom' | 'center-bottom' | 'left-bottom' | 'right-center' | 'left-center' | 'center-center' 'left-bottom' 环形菜单的初始化位置。
radius number 100 环形菜单主按钮到菜单项的半径,单位像素。
rotation number 0 环形菜单项打开和关闭时的旋转角度。
opened true | false false 环形菜单的初始化状态:如果设置为true则环形菜单为打开状态,反之为关闭状态。
openTime number 500 环形菜单打开的时间,单位毫秒。

多重环形菜单

FerroMenu环形气泡菜单插件支持在同一个屏幕上显示多个环形菜单,每一个环形菜单的行为都独立于其它的菜单。要使用多重环形菜单,可以像下面一样初始化它们:

$(document).ready(function() {
    $().ferroMenu({
        // options...
    });
     
    $().ferroMenu({
        // options...
    });
     
    $().ferroMenu({
        // options...
    });
     
    ...
});                
              

移动设备应用

通过CSS3 transitions,FerroMenu环形气泡菜单插件可以在移动手机设备上进行平滑动画,你可以使用手指来很容易的触摸和移动环形菜单。

Public functions

FerroMenu环形菜单插件提供了两个公共方法,你可以在外部调用它们:

方法名称 参数 描述
$.fn.ferroMenu.toggleMenu(id) 菜单列表项的id 打开或关闭环形菜单。参数id必须是一个jQuery选择器,如:#nav
$.fn.ferroMenu.refreshMenu() none 刷新环形菜单菜单项的位置。当环形菜单是绝对定位时非常有用。

事件

FerroMenu环形气泡菜单插件提供了一些可用的事件:

  • menuready:在环形菜单初始化结束后触发。
  • menuopened:在环形菜单打开后触发。
  • menuclosed:在环形菜单关闭后触发。
  • menudragstart:在环形菜单开始拖动时触发。
  • menudrag:在环形菜单拖动过程中触发。
  • menudragend:在环形菜单拖动结束后触发。

以上事件会添加一个menustatus对象到jQuery $.event object上,$.event object有几个简单的信息可以查看:

  • menuElement:环形菜单的ID。
  • position:环形菜单的位置。
  • opened:如果环形菜单为打开状态则为true,反之为false

要捕获这些事件,你可以这样做:

$(document).ready(function() {
    $(document).on("menuready",function(){
        //do stuff
    });
     
    $(document).on("menuopened",function(){
        //do stuff
    });
     
    $(document).on("menuclosed",function(){
        //do stuff
    });
     
    $(document).on("menudragstart",function(){
        //do stuff
    });
     
    $(document).on("menudrag",function(){
        //do stuff
    });
             
    $(document).on("menudragend",function(){
        //do stuff
    });
});