Top Pane 的实现

首先 UI FRAMEWORK PAGE:

mainframe.jsp 定义page layout。主要分为两大块：LeftPane & MainPane. 而mainPane中主要包含下面个部分：

<div id="MainPane" class="MainPane">    
        <div id="sLeftHandler" style="display:block; border-left:4px solid #7a7a7a; cursor:e-resize; color: #7a7a7a; position:absolute; width:4px; z-index:2; height:100%;">&nbsp;</div>
        <div id="sLeftHandler_proxy" style="visibility:hidden; position:absolute; cursor:e-resize; width:4px; height:100%; z-index:2">&nbsp;</div>
        <%@ include file="TopPaneNav.inc" %>
        <%@ include file="TopPane.inc" %>    
        <div id="rightpanecontent"></div>
</div>

TopPane.inc 中定义了TopPane的格局：

<div class="TopPane">

    <!-- BEGIN: TOP PANE BUTTONS \\\-->
    <div class="nav_buttons">
        <pctags:printButton id="top_back" title="MSG_Back" buttonClass="button" iconClass="iconic back" onClick="javascript:navigateBack()" />

        <pctags:printButton id="top_forward" title="MSG_Forward" buttonClass="button" iconClass="iconic forward" onClick="javascript:navigateForward()" />

        <pctags:printButton id="top_refresh" title="MSG_Refresh" buttonClass="button" iconClass="iconic reload" onClick="javascript:doFrameRefresh()" />

        <pctags:printButton id="top_home" title="MSG_TIP_HOME" buttonClass="button" iconClass="iconic home" onClick="javascript:goHome()" />
    </div>
    <!-- END: TOP PANE BUTTONS \\\-->


    <% if(createMenuEnabled) { %>
        <!-- BEGIN: CREATE NEW MENU (YUI) \\\-->
        <div class="create_button" id="createButton">
            <a href="javascript:noaction()" id="toggle_create_menu" title="<i18n:message key='JSP_TIP_CREATE_NEW'>Ctrl + Shift + C</i18n:message>" onfocus="this.hideFocus=true;YAHOO.util.Dom.addClass(document.getElementById('createButton'), 'create_button_hover')" onblur="YAHOO.util.Dom.removeClass(document.getElementById('createButton'), 'create_button_hover')"><i18n:message key='JSP_Create_New'>Create New</i18n:message><em class="dropdown">&nbsp;</em></a>
        </div>
        <!-- END: CREATE NEW MENU \\\-->
    <% } %>

    <!-- BEGIN: SEARCH PANEL (YUI) \\\-->
    <div class="search_panel">
        <a tabindex="-1" href="javascript:noaction()" id="toggle_search_menu" title=""><em id="selector_elm" class="<%=searchSelectorCls%>">&nbsp;</em><em class="divet">&nbsp;</em></a>

        <input type="text" name="<%=HcmWebKeys.QUICKSEARCH_STRING%>" value="<%=queryStr%>" id="<%=HcmWebKeys.QUICKSEARCH_STRING%>" onfocus="setTimeout('focusSearchElem()', 100);"/>

        <div class="search_buttons">
            
            <pctags:printButton id="top_simpleSearch" title="MSG_Execute_Quick_Search" buttonClass="button" iconClass="iconic quick_search" onClick="javascript:doSimpleSearch()" />
            <!-- @TODO localize -->
            <pctags:printButton id="top_paramSearch" title="MSG_TIP_CUSTOM_SEARCH" buttonClass="button" iconClass="iconic parametric_search" onClick="javascript:showParametricSearch()" />
            <span id="progress_indicator_global" class="progress_indicator global" style="visibility:hidden">&nbsp;</span>
        </div>
    </div>
    <!-- END: SEARCH PANEL \\\-->
</div>

其中菜单的创建使用了YUI的menu 函数。

参考文档 

http://developer.yahoo.com/yui/docs/YAHOO.widget.Menu.html#config_constraintoviewport