jQuery提示浮动菜单插件 – floatingMenu

jQuery提示浮动菜单插件 - floatingMenu

floatingMenu是一个jQuery插件,可以让你创建一个如动态浮动菜单/工具栏,可以添加任何元素。在JavaScript初始化插件时你可以自定义菜单、图标和动画样式。

使用方法

1.在头部加载floating-menu.css文件,提供浮动菜单基本的样式。

<link rel="stylesheet" href="src/css/floating-menu.css">

2.加载jQuery库文件和插件文件floating-menu.js

<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="src/js/floating-menu.js"></script>

3.在你想添加浮动菜单的地方创建一个元素。data-fm-floatTo属性用于指定您喜欢的菜单位置。接受的值:’top’, ‘bottom’, ‘right’, and ‘left’。

<a href='javascript:void(null);' data-fm-floatTo='bottom'> Clicm Me </a>

4.初始化插件,并使用自定义标题,图标和动作添加动态菜单项:

$.floatingMenu({
    selector: '.designer-actions a[data-action="show-actions-menu"]',
    items: [{
        icon: 'ion-android-share-alt',
        title: '小乖乖',
        action: 'http://www.zzyzan.com/'
    },
    {
        icon: 'ion-plus-circled',
        title: '写入',
        action: function(event) {
            alert('写入');
        }
    },
    {
        icon: 'ion-edit',
        title: '编辑',
        action: function(event) {
            alert('编辑');
        }
    },
    {
        icon: 'ion-minus-circled',
        title: '删除',
        action: function(event) {
            alert('删除');
        }
    },
    ]
});
打赏
下载 在线预览 积分 (-2) 吐槽 (0)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽