ASP按鈕菜單製作執行個體

來源:互聯網
上載者:User
按鈕|菜單|按鈕|菜單  按鈕菜單可以在許多網站見到,比如Microsoft的SQL Server網站。當滑鼠移到功能表按鈕上時,它會浮起來,按下滑鼠鍵時功能表按鈕會向下凹陷。下圖是這種菜單的實際效果,左邊是SQL Server網站的菜單,右圖是本文執行個體。
  
  
  
     這種菜單可以用JavaScript和CSS製作。為方便起見,這裡我們要用到ASP。本例共有六個檔案,請從本文頁面底部的連結下載這些檔案。這六個檔案是:
  
     ㈠ SamplePage.asp:這是本例顯示菜單的頁面。設所有代碼在本機伺服器inetpubScripts目錄下,則用http://localhost/Scripts/SamplePage.asp可以開啟上圖所顯示的樣本菜單。SamplePage.asp用#Include命令引用menu.asp產生菜單。
  
     ㈡ Menu.asp:調用Functions.inc中的函數產生菜單。具體調用方法參見下文說明。
  
     ㈢ Menu.css:該檔案包含了按鈕所有狀態的樣式定義。按鈕共有四種類型:正常,正常子功能表,選擇狀態,選擇狀態子功能表。其中“選擇狀態”是指按鈕文本前面帶一個圓點,子功能表是指文本縮排一定距離。每種按鈕有各種不同狀態,例如滑鼠移至上方時的浮起狀態,滑鼠按下時的凹陷狀態,等等。可以為所有按鈕的各種狀態分別定義樣式。改變這裡樣式的顏色也即改變了菜單的顏色。
  
     ㈣ Menu.js:這是用戶端指令碼代碼。這裡的代碼負責響應滑鼠事件,改變按鈕的外觀。其中RaiseButton()函數升高按鈕,DepressButton()函數壓下按鈕。
  
     ㈤ linenavdns.gif:這是高度為2 pixel的圖形,用於分隔功能表按鈕。它和< HR>差不多,但似乎更好看一點。如果改變了菜單的背景顏色,必須同時改變這個圖形的顏色。
  
     ㈥ functions.inc:伺服器端指令碼。functions.inc總共包含5個VBScript子過程,分別用來輸出前面介紹的四種按鈕和分隔線linenavdns.gif。如果在menu.css中改變了按鈕文本的顏色,同時也要改變這裡的一些函數。參見下文具體說明。
  
     如前所述,本例實際畫出菜單的代碼在menu.asp中,下面具體說明菜單中各種按鈕的建立方法。我們已經知道,按鈕總共有四種類型,本例用到了所有這四種按鈕。前圖中最上面的一個按鈕“命令1”屬於第一種按鈕類型,用下面這行代碼建立:
  
  call drawMenu(按鈕文本,目標URL)
  
     實際使用時改變調用參數即可。
  
     第二個按鈕文本“命令1-1”是縮排的(第二類按鈕),和最後一個按鈕“命令2-2”一樣,用下面這行代碼建立:
  
  call drawSubMenu(按鈕文本,目標URL)
  
     樣本菜單中的按鈕分隔用的是Linenavdns.gif,這個圖形可以用如下代碼加入任何兩個按鈕之間:
  
  call drawMenuSeperator()
  
     第三個按鈕前面有一個橙色圓點(即選擇符號,這是第三類按鈕)。這個按鈕用如下代碼加入:
  
  call drawChsnMenu (按鈕文本,目標URL)
  
     第四個按鈕文本縮排且帶圓點(第四類按鈕),加入該按鈕的代碼如下:
  
  call drawChsnSubMenu (按鈕文本,目標URL)
  
     下面說明一下如何定製菜單的顏色。顏色定製有點麻煩,這裡只說明其經過,具體請讀者自己下載代碼實驗。如果要改變菜單的背景色,首先要改變menu.asp中表格的背景色,其次是要修改menu.css中的所有的背景顏色和邊框顏色。如果改變了按鈕的文本顏色,必須同時改變functions.inc中各函數所輸出的< FONT>標記的“color=”部分。
  
     最後還要說明一下:對於不支援CSS或JavaScript的使用者,這個菜單也是可用的。如果不支援JavaScript,則按鈕不會出現浮起、凹陷效果;如果不支援CSS,菜單外觀會有所改變,但菜單準系統還是正常的。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。