自定义标签库-右键菜单

最新推荐文章于 2023-05-30 15:06:33 发布

zhigangg

最新推荐文章于 2023-05-30 15:06:33 发布

阅读量2.2k

点赞数

分类专栏： Java技术类文章文章标签： javascript function jsp menu div iframe

本文链接：https://blog.csdn.net/zhigangg/article/details/698947

版权

Java技术类文章专栏收录该内容

3 篇文章 0 订阅

订阅专栏

大家知道，如果在WEB应用中使用右键菜单，将给用户带来桌面程序的体验。本文中右键菜单实现代码由 http://webfx.eae.net/ 提供。个人觉得 http://webfx.eae.net/ 是个很不错的网站，提供了不少相当好用且免费的JavaScript控件。用户可以在 http://webfx.eae.net/ 首页上点击Articles-IE Sepecific-Context Menu来查看右键菜单的使用说明并且下载其源代码。

首先我简要介绍一下Context Menu的使用方法。Context Menu实现代码为JavaScript。ContextMenu对象提供了一个静态方法：intializeContextMenu()，该方法创建右键菜单的面板(iframe)。当页面中要使用右键菜单时，首先必须在body的onload事件里面调用ContextMenu.intializeContextMenu()，然后在需要右键菜单服务的元素(我将之称为右键菜单服务预订者Subscriber)的oncontextmenu事件处理器中创建菜单项ContextItem对象数组(当然数组里面也可以有菜单分隔符ContextSeparator对象)，最后在Subscriber的oncontextmenu事件处理器中调用ContextMenu.display(popupoptions)方法。上述只是对ContextMenu使用方法的简单介绍，ContextMenu具体实现过程读者可以参考ContextMenu的实现代码及示例程序。

在实际使用ContextMenu对象的过程中，我发现如果一个页面需要有多个不同的右键菜单，每个右键菜单的Subscriber不同，并且右键菜单与Subscriber的绑定的工作量大（如树节点对象根本就没有提供oncontextmenu事件，为了使用右键菜单而不得不修改已有的树控件），那么就会导致页面中的JavaScript代码量加大，页面变得不宜阅读及维护。另外ContextMenu代码还有一个重大缺陷：菜单项的onclick事件处理器访问不到Subscriber(例如一个Div元素有个右键菜单，但该右键菜单的菜单项的onclick事件处理器却访问不到该Div元素)，这样的话右键菜单就没有发挥出它真正的作用了，因为Subscriber里面经常会附带一些数据，而其右键菜单又必须使用这些数据。如树控件中的节点(Subscriber)使用右键菜单就是这个例子。

为了减轻使用ContextMenu带来的负担，我将ContextMenu封装成一系列标签。下面我先讲一下这组标签的使用方法。

首先配制web.xml,代码如下：

<taglib>
<taglib-uri>/WEB-INF/gzg-html-taglib.tld</taglib-uri>
<taglib-location>/WEB-INF/gzg-html-taglib.tld</taglib-location>
</taglib>

下一步在JSP页面中添加如下代码：

<%@ taglib uri="/WEB-INF/gzg-html-taglib.tld" prefix="gzg-html"%>

下一步在JSP页面的<head>标签中引用相应的JavaScrip和Css文件(这些文件都在自定义标签库jar包内)，代码如下：

<gzg-html:importFile fileName="js/ContextMenu/ContextMenu.js" fileType="javascript">
      <gzg-html:fileParameter name=":contextMenuCss" value="css/ContextMenu/WebFX-ContextMenu.css"    fromFile="true"/>
    </gzg-html:importFile>

上面这段代码直接拿过来用就可以，代码内容不须做任何修改。

下一步定制一个右键菜单，代码如下：

<gzg-html:contextMenu>

<gzg-html:category name="bodyContextMenu">

<gzg-html:options>

<gzg-html:option disabled="false">

<gzg-html:optionText>Say Hello World!</gzg-html:optionText>

<gzg-html:optionAction>
              function(subscriber){
                 alert("Hello World!");

               }
            </gzg-html:optionAction>
          </gzg-html:option>
        </gzg-html:options>

<gzg-html:subscribers>

<gzg-html:subscriber id="myBody"/>
        </gzg-html:subscribers>
      </gzg-html:category>
      
      <gzg-html:category name="divContextMenu">
        <gzg-html:options>
          <gzg-html:option disabled="false">
            <gzg-html:optionText>Say hello to the subscriber</gzg-html:optionText>
            <gzg-html:optionAction>
               function(subscriber){
                 alert("Hi," + subscriber.id + "!");
               }
            </gzg-html:optionAction>
          </gzg-html:option>

<gzg-html:separator/>
          <gzg-html:option disabled="false">
            <gzg-html:optionText>Show Div innerHTML</gzg-html:optionText>
            <gzg-html:optionAction>
              function(subscriber){
                alert(subscriber.innerHTML);
              }
            </gzg-html:optionAction>
          </gzg-html:option>
        </gzg-html:options>
        <gzg-html:subscribers>

<gzg-html:subscriberBatch name="divBatch">
             function(){
                var divs = new Array();
               divs[0] = document.getElementById("myDiv1");

divs[1] = document.getElementById("myDiv2");

                divs[2] = document.getElementById("myDiv3");
                return divs;
              }
          </gzg-html:subscriberBatch>
        </gzg-html:subscribers>
      </gzg-html:category>
    </gzg-html:contextMenu>

在上面这段代码中，通过标签的字面意思，读者很容易理解右键菜单标签库的用法。不过有一些标签用法还得加以强调：

1.<category>、<subscriberBatch>标签name属性值可以动态获取，但在页面中必须唯一。

2.<option>标签中disabled属性取值可以动态获取，值域为true和false，表示菜单项是否被禁用。

3.<optionText>标签中可以添加<img>标签，增加右键菜单美观度。

4.当一个菜单项不执行任何操作时，<optionAction>标签内容必须为function(subscriber){}。subscriber表示右键菜单服务预订者，在function(subscriber){}中用户可以访问右键菜单服务预订者附带的数据。

5.表示右键菜单服务预定者的<subscriber>标签的id属性表示页面中某元素的id属性。

6.<subscriberBatch>标签表示右键菜单服务预订者批量。所谓批量，就是一次定义多个右键菜单服务预定者。<subscriberBatch>标签内容为一个方法，该方法返回一个数组，数组元素为页面中的元素。<subscriberBatch>标签可以和<subscriber>标签共同使用。

最后一步：

在body的onload事件处理器中添加代码：configureContextMenu();

使用JSP自定义标签而不是直接用JavaScript代码，减轻了用户使用ContextMenu对象的负担，页面代码有较强的层次感，阅读和维护起来都比较容易。

zhigangg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
自定义标签库-右键菜单

大家知道，如果在WEB应用中使用右键菜单，将给用户带来桌面程序的体验。本文中右键菜单实现代码由http://webfx.eae.net/提供。个人觉得http://webfx.eae.net/是个很不错的网站，提供了不少相当好用且免费的JavaScript控件。用户可以在http://webfx.eae.net/首页上点击Articles-IE Sepecific-Context Me
复制链接

扫一扫