jQuery移动优先的炫酷环形气泡菜单特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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
    });
});