前言:
大家也許開發(fā)了很多windows界面的解決方案,對于菜單的使用可以說是滾瓜爛熟,當然,如何實現(xiàn)windows窗口上的左右鍵功能也是不在話下。
但是如何在web窗口實現(xiàn)菜單呢?
很多人說。用javascript或者是vbscript來實現(xiàn)。完全正確。一般說來是在前臺用腳本語言來寫。現(xiàn)在也有基于不是用腳本語言的控件的方式來實現(xiàn)的方式。用控件來實現(xiàn)的方法大家可以參考我寫的《基于asp.net的webmenu的數(shù)據(jù)操作》一文,用控件很容易的。
我說的是老生常談的問題,如果高手路過,就請你給予指正,還望不要給太多的磚頭。
正文:
實現(xiàn)左右鍵的彈出,以及選擇左右鍵的不同菜單,點擊菜單后可以有不同的處理結果,例如彈出有模式和無模式對話框等。
如下,一一介紹:
(1):在控件的click事件和dblclick事件中彈出菜單。
前提條件:控件支持單擊和雙擊事件。(不支持單擊和雙擊的控件恐怕不多吧。嘿嘿)
在控件的click事件和dblclick事件里面添加自己的菜單函數(shù)。這個函數(shù)一般是在屏幕上畫一個表格。達到彈出菜單的作用。
如下為我的畫表格的原型函數(shù):
function showdiv(div,xpos,ypos)
其中,div為菜單的類型。比如類型為“變電站”或者“線路”,二者彈出的菜單的內容是不同的。通過這來實現(xiàn)在同一個控件上彈出多個菜單的作用。
其中,xpos,ypos的作用為在什么地方彈出菜單,一般說來在鼠標指針的偏下一點和偏右一點為益。
題外:怎么得到xpos,ypos,可以通過取得屏幕坐標來獲取。
此函數(shù)由javascript實現(xiàn)。
假設為“線路”,那么我們看到的為上文的圖示,怎么才實現(xiàn)畫框的呢?我的實現(xiàn)方法示在本函數(shù)里面調用添加菜單函數(shù)。本函數(shù)實際上是在數(shù)組里面添加值,將每個菜單的項目添加到數(shù)組中,在下面的menustyle函數(shù)中將數(shù)組的值取出來。本函數(shù)的原型如下:
addmenuitem(text, url, img)
其中,text為菜單上顯示的內容
其中,url為點擊改菜單后鏈接到什么地方的地址。
image是可選項目。表示是圖形時,菜單上顯示圖形。
如下為本函數(shù):
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效果,函數(shù)為:menustyle(),無參數(shù)。
最后,要顯示菜單,顯示菜單函數(shù)為:showmenu(),無參數(shù)。
這樣就實現(xiàn)了菜單的彈出。
如下為完整的實例代碼:
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實現(xiàn)
如下由javascript實現(xiàn)
function showdiv(div,xpos,ypos)
{ //重定義數(shù)組
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(); //函數(shù)略,在下面的選擇菜單和點擊菜單中使用。
function showmenu(){
menupopup.show(menuxpos, menuypos, menuwidth, menuheight, document.body); return false;
}
(未完待續(xù))