如何在asp.net頁面上放置的控制項上實現左右鍵菜單,同時對之操作(1

asp.net|菜單|控制項|頁面 前言：

大家也許開發了很多windows介面的解決方案，對於菜單的使用可以說是滾瓜爛熟，當然，如何?windows視窗上的左右鍵功能也是不在話下。

但是如何在web視窗實現菜單呢？

很多人說。用javascript或者是vbscript來實現。完全正確。一般說來是在前台用指令碼語言來寫。現在也有基於不是用指令碼語言的控制項的方式來實現的方式。用控制項來實現的方法大家可以參考我寫的《基於asp.net的webmenu的資料操作》一文，用控制項很容易的。

我說的是老生常談的問題，如果高手路過，就請你給予指正，還望不要給太多的磚頭。

本文：

實現左右鍵的彈出，以及選擇左右鍵的不同菜單，點擊菜單後可以有不同的處理結果，例如彈出有模式和無強制回應對話方塊等。

如下，一一介紹：

（1）：在控制項的Click事件和dblClick事件中快顯功能表。

前提條件：控制項支援單擊和雙擊事件。（不支援單擊和雙擊的控制項恐怕不多吧。嘿嘿）

在控制項的Click事件和dblClick事件裡面添加自己的菜單函數。這個函數一般是在螢幕上畫一個表格。達到快顯功能表的作用。

如下為我的畫表格的原型函數：

function showdiv(div,XPos,YPos)

其中，Div為菜單的類型。比如類型為“變電站”或者“線路”，二者彈出的菜單的內容是不同的。通過這來實現在同一個控制項上彈出多個菜單的作用。

其中，XPos,YPos的作用為在什麼地方快顯功能表，一般說來在滑鼠指標的偏下一點和偏右一點為益。

題外：怎麼得到XPos,YPos,可以通過取得螢幕座標來擷取。

此函數由JavaScript實現。

假設為“線路”，那麼我們看到的為上文的圖示，怎麼才實現畫框的呢？我的實現方法示在本函數裡面調用添加菜單函數。本函數實際上是在數組裡面添加值，將每個菜單的項目添加到數組中，在下面的menustyle函數中將數組的值取出來。本函數的原型如下：

addMenuItem(text, url, img)

其中，text為菜單上顯示的內容

其中，Url為點擊改菜單後連結到什麼地方的地址。

Image是可選項目。表示是圖形時，菜單上顯示圖形。

如下為本函數：

function addMenuItem(text, url, img){

if(img) menuItems[menuItemNum] = new Array(text, url, img);

elseif(text) menuItems[menuItemNum] = new Array(text, url);

else menuItems[menuItemNum] = new Array(); menuItemNum++;

}



同時還可增加菜單的風格以及菜單的點擊和mousemove效果，函數為：menuStyle()，無參數。

最後，要顯示菜單，顯示菜單函數為：showMenu()，無參數。

這樣就實現了菜單的彈出。

如下為完整的執行個體代碼：

sub GNV_click(ByVal Button, ByVal Key, ByVal WindowCoord, ByVal WorldCoord)

{

select case button

case 1 '左鍵

set m_oCurrentCoordinate = WindowCoord ‘表示滑鼠位置，其他的不同控制項要通過不同的方法來擷取這值。

call showdiv("線路",m_oCurrentCoordinate.x ,m_oCurrentCoordinate.y + 15)

}

以上代碼由vbscript實現

如下由javascript實現

function showdiv(div,XPos,YPos)

{ //重定義數組

menuItemNum = 0;

menuItems = Array();

menuXPos = XPos;

menuYPos = YPos;

switch(div){

case "菜單類型":

//重定義高度和寬度

menuWidth = 143;

//menu width 每個漢字寬度24

menuHeight = 158; //menu height



addMenuItem();



break;

case "另外一個菜單類型": //另外一種情況。略

default:

break;

}

menuStyle(); //菜單風格

showMenu(); //顯示菜單

}

menuStyle(); //函數略，在下面的選擇菜單和點擊菜單中使用。

function showMenu(){

menuPopup.show(menuXPos, menuYPos, menuWidth, menuHeight, document.body); return false;

}



（未完待續）