fg-menu – jquery强大的弹出菜单插件

发布于，归属于jquery教程。 只剩下板凳啦！ 共有1,512人围观    

这个jquery非常强大的弹出菜单插件，皮肤方面使用了jquery的UI。

支持特性如下：

  • 自由换肤（内置多达10款皮肤）
  • 支持N级延伸菜单
  • 便利的API
  • 支持二种菜单模式（详见示例）
  • 支持快捷键

使用教程

创建如下html结构：

  1. <a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><span class="ui-icon ui-icon-triangle-1-s"></span>flyout menu</a>

href非常关键，指向包含菜单的html页面
menuContent.html是一个ul相互嵌套的结构，实在太常见了，不在累述

初始化插件：

  1. $.get('menuContent.html', function(data){ 
  2.             $('#flyout').menu({ content: data, flyOut: true });
  3.         });

当加载完’menuContent.html’页面时，建立菜单

常用配置说明

  • content：关键参数，内容层
  • flyOut：模式，为true即为向外延伸
  • width：菜单宽度（指的是弹出的每一列菜单宽度）
  • maxHeight：最大高度，超过出现滚动条
  • showSpeed：显示动画速度
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. 明河共影

    群里的深海游鱼童鞋，问我能不能点击菜单项后打开该项链接的页面。
    这里贴出方法：
    找到this.chooseItem = function(item){
    将里面的代码替换为：window.open($(item).attr(‘href’));

同类