menuG5初步研究

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量810 收藏
点赞数
分类专栏： menuG5 文章标签： css javascript menu 框架 url path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/citybug_nj/article/details/7700189
版权

MenuG5总结

 

MenuG5是一个使用Javascript来生成菜单的组件。支持页面菜单和框架菜单，解决了在实际开发过程中，框架中菜单被遮挡的问题。

1       下载

下载地址：http://www.yxscripts.com/menuG5/

2       项目中如何使用

下载到本地后，把压缩包解压，压缩包中的目录结构如下：

.css

.examples

.faq

.script

.index.html

一般情况下，只要把其中的script和css两个目录引入到项目中即可。

需要注意的是，在script下有多个JS，这些JS是根据不同浏览器和是否支持框架来区分的。在文件名字中有“FS”是支持框架的，而不带“FS”是不支持框架的，在引用的时候需要注意。

3       菜单生成语句

  •  添加一个新菜单

addMenu("menu-name", "top-menu-name");

 

  •   添加一个链接菜单

addLink("top/sub-menu-name", "item text", "item msg", "URL", "group-id");

addLink("top/sub-menu-name", "item text", "item msg", "URL", "group-id", "target-frame-name");

 

  • 添加一个命令菜单，命令使用JS语句

addCommand("top/sub-menu-name", "item text", "item msg", "JS-codes", "group-id");

addLink("top/sub-menu-name", "item text", "item msg", "javascript:JS-codes", "group-id");

 

  •  添加一个子菜单

addSubMenu("top/sub-menu-name", "item text", "item msg", "URL", "sub-menu-name", "group-id");

addSubMenu("top/sub-menu-name", "item text", "item msg", "URL", "sub-menu-name", "group-id", "target-frame-name");

 

  • 添加一个信息项

addInfo("top/sub-menu-name", "info content", "group-id");

 

  •  添加菜单中的分隔符

addSeparator("top/sub-menu-name", "group-id");

 

4       菜单样式

菜单的颜色、形状、位置都是通过CSS进行控制的。CSS的定义和普通的CSS定义是一样的。

5       把样式加入到菜单样式中

以下语句请参照：

http://www.yxscripts.com/menuG5/faq/spec.html#style，

全英文的，需要仔细阅读。

addStylePad("pad","item-offset:-1; offset-top:1;");

    addStylePad("padSub","item-offset:-1; offset-top:6; offset-left:-6;");

    addStyleItem("itemTop","css:itemTopOff, itemTopOn;");

    addStyleItem("itemSub","css:itemSubOff, itemSubOn;");

    addStyleFont("fontTop","css:fontOff, fontOn;");

    addStyleFont("fontSub","css:fontOff, fontOn;");

    addStyleTag("tag","css:tagOff, tagOn;");


 

上面的这些语句可以自己根据需求来写，也可以参照下载的文件中Examples/Menu目录下的JS文件，可以直接引用，也可以在此基础上修改。

6       把样式应用在具体的菜单项上

样式应用在菜单项上，并不是对每个菜单项单独的设置样式，而是根据菜单项的类别应用样式。比如：菜单应用一个样式；子菜单应用一个样式；一个组应用一个样式。

 

addStyleMenu("menu","pad","itemTop","fontTop","","","");

    addStyleMenu("sub","pad","itemSub","fontSub","tag","","");

    addStyleMenu("sub2","padSub","itemSub","fontSub","","","");

    

    addStyleGroup("group","menu","demo-top");

    addStyleGroup("group","sub","tool-sub","game-sub","forum-sub");

    addStyleGroup("group","sub2","menu-sub");


7       初始加载菜单

addInstance("Demo","Demo","position:relative holder; menu-form:bar; align:center; style:group;");

相关说明请阅读：

http://www.yxscripts.com/menuG5/faq/spec.html#instance

8       完整的一个菜单

<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>

<%

    String path=request.getContextPath();

%>

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'index.jsp' starting page</title>

    <metahttp-equiv="pragma"content="no-cache">

    <metahttp-equiv="cache-control"content="no-cache">

    <metahttp-equiv="expires"content="0">   

    <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

    <metahttp-equiv="description"content="This is my page">

    <linkrel="stylesheet"type="text/css"href="<%=path%>/css/menuG5.css">

    <scripttype="text/javascript"src="<%=path%>/script/menuG5LoaderX.js"></script>

    

    <styletype="text/css">

    .itemTopOff {width:130px;padding:1px;border:1px solid #000000;text-align:center;background-color:#ccefcc; }

    .itemTopOn {cursor:default;width:130px;padding:1px;border:1px solid #000000;text-align:center;background-color:#333333; }

    .itemSubOff {width:115px;padding:1px 6px 1px 11px;border:1px solid #000000;text-align:left;background-color:#cccccc; }

    .itemSubOn {cursor:default;width:115px;padding:1px 6px 1px 11px;border:1px solid #000000;text-align:left;background-color:#333333; }

    

    .fontOff {font-family:verdana;font-size:10pt;color:#000000; }

    .fontOn {font-family:verdana;font-size:10pt;color:#ffffff; }

    

    .tagOff {width:8px;height:13px;float:right;background:url("images/tagRN.gif") no-repeat bottom; }

    .tagOn {width:8px;height:13px;float:right;background:url("images/tagRH.gif") no-repeat bottom; }

    </style>

  </head>

  

  <bodyοnlοad="showMenu('Demo')">

    <tablealign="center"border="1"cellpadding="0"cellspacing="5">

       <tr>

           <tdid="holder"></td>

       </tr>

       <tr>

           <td></td>

       </tr>

    </table>

  </body>

  

</html>

<scripttype="text/javascript"language="javascript">

initMenu();

 

function initMenu()

{

    addMenu("Demo","demo-top");

    addLink("demo-top","Home","","index.jsp","");

    

    addSubMenu("demo-top","文件..","","","fileMenu","");

    addLink("fileMenu","新文件","","index.jsp","g1");

    addLink("fileMenu","打开..","","index.jsp","g1");

    addSeparator("fileMenu","g1");

    addCommand("fileMenu","保存","保存文件","alert('文件名称？');","");

    addCommand("fileMenu","另存为 ..","文件另存为","alert('是否真的要另存?')","");

    

    

    addSubMenu("demo-top","编辑..","","","editMenu","");

    addLink("editMenu","查找","","index.jsp","");

    addLink("editMenu","替换","","index.jsp","");

    

    endMenu();

    

    addStylePad("pad","item-offset:-1; offset-top:1;");

    addStylePad("padSub","item-offset:-1; offset-top:6; offset-left:-6;");

    addStyleItem("itemTop","css:itemTopOff, itemTopOn;");

    addStyleItem("itemSub","css:itemSubOff, itemSubOn;");

    addStyleFont("fontTop","css:fontOff, fontOn;");

    addStyleFont("fontSub","css:fontOff, fontOn;");

    addStyleTag("tag","css:tagOff, tagOn;");

    

    addStyleMenu("menu","pad","itemTop","fontTop","","","");

    addStyleMenu("sub","pad","itemSub","fontSub","tag","","");

    addStyleMenu("sub2","padSub","itemSub","fontSub","","","");

    

    addStyleGroup("group","menu","demo-top");

    addStyleGroup("group","sub","tool-sub","game-sub","forum-sub");

    addStyleGroup("group","sub2","menu-sub");

 

    addInstance("Demo","Demo","position:relative holder; menu-form:bar; align:center; style:group;");

}

</script>


 

citybug_nj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中Frame的菜单menuG5
11-04
目前很多网站使用了frame框架的结构，在顶端或左端放置菜单，可是一个非常头疼的问题就是二级菜单会被其他的frame遮挡住。查了很多的资料，都是说这个问题在frame中是无法解决得，也就是说frame没有设置可以修正这个问题。唯一的解决办法就是用JavaScript画动态层或动态定位已存在的子菜单层。在网上找到一款非常强大的菜单框架：menuG5，看了它的演示确实很牛，但是配置起来还着实费了番功夫，这里就把我目前学到的配置方法共享给大家，省的去看英文帮助了。
menug5很好的框架菜单栏
10-26
menug5,很好的框架菜单栏。有好多个应用。可以试试看。不错的选择。
跨框架菜单menuG5使用
weixin_30556161的博客
09-06 163
1.介绍 目前很多网站使用了frame框架的结构，在顶端或左端放置菜单，可是一个非常头疼的问题就是二级菜单会被其他的frame遮挡住。查了很多的资料，都是说这个问题在frame中是无法解决得，也就是说frame没有设置可以修正这个问题。唯一的解决办法就是用JavaScript画动态层或动态定位已存在的子菜单层。在网上找到一款非常强大的菜单框架：menuG5，看了它的演示确实很牛，但是配置起来还...
JavaScript在Frame中的menuG5菜单
lovegonghui的专栏
11-04 600
1.介绍 目前很多网站使用了frame框架的结构，在顶端或左端放置菜单，可是一个非常头疼的问题就是二级菜单会被其他的frame遮挡住。查了很多的资料，都是说这个问题在frame中是无法解决得，也就是说frame没有设置可以修正这个问题。唯一的解决办法就是用JavaScript画动态层或动态定位已存在的子菜单层。在网上找到一款非常强大的菜单框架：menuG5，看了它的演示确实很牛，但是配置起来还
可定制化的菜单menuG5
daoyongyu的专栏
04-02 178
这两天在做一个系统的菜单，由于首页是用frameset分割的，菜单是自动弹出的，所以有时如果弹出的菜单过多的话，目前超过4级，就会有个问题产生，那就是弹出的菜单会被其它框架挡住，显示不出来，在网上看了一些解决办法，都不行，后来看到了一位仁兄说这个menuG5好用，所以下下来试试，最主要的是能够让我的菜单跨框架显示，先试一下。附件是官方的压缩包，如果感兴趣的可以下载自己动手做一下。如果那位大虾有更好...
SkillerGame
03-31
SkillerGame开玩笑对zbiórgier logicznych，poszczególnągręwybieramy z MenuGłównego表示嘲笑。 使用MVVM进行视频播放，然后使用MV进行视频显示，然后再使用ViewModel进行浏览。 首页 Standardowa strona ...
解决跨框架的菜单控件
04-03
通过上述方法，我们可以创建一个灵活且可扩展的跨框架菜单控件，实现“menuG5”这样的功能。这样的菜单系统不仅可以提高开发效率，还能为用户提供一致的交互体验，无论他们使用的应用程序基于哪个前端框架。在实际...
cpp DOS 下利用vesa 显示3级菜单
08-29
MENUG4.TXT很可能是菜单项的配置文件，包含了菜单的文字内容和结构，比如菜单标题、子菜单项和对应的菜单级别。程序会读取这个文件，构建出一个多级的菜单树。BC31编译.txt可能是编译过程中产生的日志或指南，记录了...
Menu G5 初使用
Primary_wind的专栏
09-10 1473
因为项目需要查看翻阅了一下Menu G5的用法，Menu G5作为一个跨frame框架的js库，使用起来还是比较方便的，但是中文的教程确实比较少，而且现在前台也基本上都用div了，哎，没办法，只能边学边看了。 Menu G5的目录结构： css：放置menuG5的默认样式 examples：N个使用实例，通过这个学习如何配置和使用，我认为比通过他的Document快多了 faq
Menu G5－不错的跨框架菜单
weixin_30656145的博客
08-08 78
最近项目要用到一个菜单，本来是自己打算写的，但后来发现难还不小，因为项目是用到framesets（框架的）布局的，所以需要一个支持cross-frame menu（框架菜单）的东东，所以就找到了 Menu G5，这里有它的简介 在使用过程中，才发现Menu G5是一个优秀的菜单控件，其特点有： 在同一页面可以无限制的建立菜单 在同一个菜单中可以建立N级的子菜单 菜单内容，菜单...
在Vue中使用Echarts绘制带图标的矩形树图
热门推荐
iVRJay的博客
11-14 8万+
最终效果图： DEMO代码： 在页面开头引入echarts.js,资源请自行在官网下载 import echarts from 'echarts'; demoData在文章最下面 <template> <div> <div class="cxt" id="treemap_cxt"></div> &lt...
PopMenu的使用
飞翔的熊blabla
09-28 645
PopupMenu menu = new PopupMenu(mContext, v); menu.inflate(R.menu.artist_overflow_menu); //menu.setOnMenuItemClickListener(popupMenuItemClickListener); mName = (String) v.getTag(R.string.artist); me
Web前端-Web开发CSS基础3-盒模型
a15735748145a的博客
07-16 461
1. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；2. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；3. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1104
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础5-浮动
a15735748145a的博客
07-16 348
1. 设置<div>元素的宽为100像素，高也为100像素，并且向左悬浮；12. 设置类名为class1的元素，让其自动下移到右边没有悬浮元素为止；13. 设置类名为class2的元素，让其自动下移到右边没有悬浮元素为止；14. 设置类名为class3的元素，让其自动下移到右边没有悬浮元素为止；9. 设置<button>元素，让其自动下移到左边没有悬浮元素为止；10. 设置<input>元素，让其自动下移到左边没有悬浮元素为止；11. 设置<img>元素，让其自动下移到左边没有悬浮元素为止；

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值