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 }); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!