取自 MXNA 上的一个功能菜单

在 MXNA 上看到的一个功能菜单，在其上，是用来选择语言的。在实际应用中，我们完全可以用来作为自己的功能菜单使用。

查看一下其代码，比较简单。

首先是菜单的制作，就一个 <DIV> 元素，其中列出各个菜单项，代码如下：

代码:

<div class="language-list" id="langList_1">
  <div><a href="javascript:doTranslation('en','es');">Spanish</a></div>
  <div><a href="javascript:doTranslation('en','de');">German</a></div>
  <div><a href="javascript:doTranslation('en','fr');">French</a></div>
  <div><a href="javascript:doTranslation('en','it');">Italian</a></div>
  <div><a href="javascript:doTranslation('en','pt');">Portuguese</a></div>
  <div><a href="javascript:doTranslation('en','ja');">Japanese</a></div>
  <div><a href="javascript:doTranslation('en','ko');">Korean</a></div>
  <div><a href="javascript:doTranslation('en','zh-CN');">Chinese</a></div>
  <hr/>
  <div><a href="javascript:hideLanguageList();">Close</a></div>
</div>

doTranslation() 函数是为了转换语言的，在这里就不用管它了。

看看菜单的样式：

代码:

.language-list {
    position: absolute;
    width: 70px;
    visibility: hidden;
    top: 0px;
    left: 0px;
    border: 2px solid;
    border-color: #f0f0f0 #909090 #909090 #f0f0f0;
    background-color: #d0d0d0;
    padding: 4px;
    text-align: left;
}

默认情况下，菜单的 visibility 样式取值“hidden”，即将菜单隐藏。定位为“绝对(absolute)”，在后面的脚本中会动态设定其位置。

对应的脚本：

代码:

<script type="text/javascript">
    //document.addEventListener("mousedown", hideLanguageList, true);
    var langObj = new Object();
    langObj.langList = null;
    langObj.postUrl = null;
    langObj.postId = null;
    function showLanguageList(e, langId, postUrl, postId) {
        if (langObj.langList != null && langObj.langList.style.visibility == 'visible') {
            hideLanguageList();
        }
        langObj.postUrl = postUrl;
        langObj.postId = postId;
        langObj.langList = document.getElementById('langList_' + langId);
        langObj.langList.style.top = ((e.clientY + document.documentElement.scrollTop) + 'px');
        langObj.langList.style.left = ((e.clientX - 0) + 'px'); 
        langObj.langList.style.visibility = 'visible';
    }
    function hideLanguageList() {
        if (langObj.langList != null) { 
            langObj.langList.style.visibility = 'hidden';
        }
    }
    function doTranslation(fromLanguage, toLanguage) { 
        if (langObj.postUrl != null) {  
            var trUrl = 'http://translate.google.com/translate?u='+langObj.postUrl+'&langpair='+fromLanguage+'%7C'+toLanguage+'&hl=en&ie=UTF-8&oe=UTF-8&prev=%2Flanguage_tools';
            window.open('controller.cfm?handler=PostHandler&action=click&postId='+langObj.postId+'&nextPage='+escape(trUrl));  
        }  
        hideLanguageList();   
    }
</script>

脚本开始新建并初始化一个对象 langObj，然后定义了三个子程序，第三个是转换语言的，不考虑。其中第一个是显示菜单，第二个隐藏菜单。

点击链接的时候，触发 showLanguageList()，其中第一个参数 e ，获取行为。整个子程序的作用就是通过 Event 来获取位置，动态赋予菜单，并且将菜单的 visibility 样式设置为 visible 。

第二个函数就非常简单了，将菜单设置为隐藏即可。

够简单吧，在我的应用中，我将其用于显示记录的详细信息，或者作为 tooltip 。