指令碼中心指南：ActiveX 控制項

  • 發行項

ActiveX 控制項

在您的 HTA 新增簡單的工具列

其他 ActiveX 控制項

HTML 應用程式的限制 (不幸 HTA 本身也有限制) 有使用上的限制。由於 HTA 相當依賴 HTML 控制項，要新增功能表列或工具列到您的應用程式並非易事。因此一般人只好在畫面上放一堆沒有圖只有標題的按鈕。雖然這樣也能用，但是有點遜(咱們 Scripting Guy 最重視的就是酷)。

幸好還有 ActiveX 控制項可以在 HTA 裡新增功能表列和/或工具列。有些控制項還挺好用的，不過可能有點複雜。老實說，Scripting Guys 覺得無「懶」不成酷。所以要給各位介紹一個簡單的方法，在 Microsoft Office 內安裝命令按鈕 ActiveX 控制項，來建立工具列 (如果您有 Microsoft Office，就有這個控制項。)雖然這不是全世界最炫的工具列，但是總比 HTML 裡面單調的 <button> 標記好多了吧。下面是一個可以輕鬆建立的工具列範例：

工具列

看吧？還不賴，這些可是真的按鈕，而不是光是圖喔？您可以畫一個類似的工具列，然後將圖片載入 HTA，但是在這些圖片上按一下不會有真的按鈕的效果。沒關係，因為它們確確實實還是按鈕，只不過縮小了些，用圖片代替按鈕標題罷了。

使用 Microsoft Office 命令按鈕控制項

咱們來瞧瞧簡化的範例，裡面的工具列只有一個按鈕：

    <html>
    
    <head>
        <title>Toolbar Example</title>
    </head>
    
    <Script Language="VBScript">
        Sub Window_Onload
            CommandButton1.Width = 32
            CommandButton1.Height = 32
            CommandButton1.Picture = LoadPicture("c:\scripts\network.bmp")
        End Sub
       
        Sub CommandButton1_Click()
            DataArea.InnerHTML = "You clicked button 1."    
        End Sub
    </Script>
    
    <body topmargin="0" rightmargin="0" leftmargin="0">
    
    <table width="100%" border="1" width="100%" bordercolorlight="buttonface" 
    bordercolordark="buttonface" style="border-collapse:collapse">
       <tr>
            <td width="100%" bgcolor="buttonface">
                <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton1"></object>
           </td>
        </tr>






    <table>
    
    <p>&nbsp;<p>
    <blockquote>
    
    <span id=DataArea></span>
    
    </blockquote>
    </body>
    </html>

這個 HTA 主要由兩個元件構成：一是包含命令按鈕的表格，二是按下按鈕後用來顯示資訊的 \。順便一提，HTA 的邊界設定為左邊、右邊、上方各為 0"，以確保我們的表格 (也就是工具列) 能剛好放在 HTA 視窗的左上角，而且表格的列能夠延伸到最右方的邊界。 下面的指令碼會產生一個資料表：

您不用擔心 HTML 標記，如果有興趣進一步瞭解各個參數，請參閱 HTML 和 DHTML 參考 (英文)。基本上我們建立了一個橫跨整個 HTA 視窗範圍的表格。表格周圍設定了 1 個像素的邊界 (表格由一行一列構成)，然後將邊界色彩設定為 buttonface，和表格儲存格的色彩一樣。這麼設定純粹只是美觀，這樣表格就沒有任何邊線。 接著使用者兩行指令碼，建立一個表格資料列和一個表格儲存格 (前面說過，背景色彩為 buttonface)。

現在終於到了有趣的部分：插入命令按鈕。方法是加入 <object> 標記： <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton1"></object> 如您所見，物件標記只需要 classid 和 id 這兩個參數。classid 是一種全域唯一識別碼，告訴作業系統要插入哪個 ActiveX 控制項。可是這個 Classid 很複雜，要記住或輸入根本是強人所難。 沒關係，只要插入命令按鈕和 ID (暱稱) 的執行個體即可。這樣要在指令碼中參考按鈕時，只要使用 ID (CommandButton1) 就可以了，不需要使用 classid (D7053240-CE69-11CD-A777-00DD01143C57)。 表格製作完畢。現在要加入一個名為 DataArea 的 <span>，名符其實，這是一個可來寫入資料的位置 (本文中對「資料」一詞的定義相當寬鬆)。現在 HTA 的內容就準備好了，就是這麼簡單。 剩下來的就是兩個副程式。第一個 Windows_Onload 會在 HTA 載入或更新時自動執行，我們可以在這個副程式內設定命令按鈕的屬性值： CommandButton1.Width = 32 CommandButton1.Height = 32 CommandButton1.Picture = LoadPicture("c:\scripts\network.bmp")

最有趣的要算最後一行 (我們覺得啦)：使用 LoadPicture 方法來指定按鈕的圖片，只要呼叫 LoadPicture 並傳給它一個參數，也就是影像檔案的完整路徑就可以了。Width 和 Height 屬性是以點數來設定，每個點約為1/72英吋。按鈕設定為 32，大小剛好，但可能還需要根據使用圖片大小來調整。

附註：想認識更多的命令按鈕屬性嗎？歡迎查閱 Microsoft Forms 說明檔 (FM20.chm)。這個檔案可能在您安裝 Office 時已經複製到 C:\Program Files\Common Files\Microsoft Shared\VBA\VBA6\1033 資料夾了，如果找不到，可以查閱 Office CD。

第二個副程式是使用者按下命令按鈕時執行的指令碼：

Sub CommandButton1_Click()
    DataArea.InnerHTML = "You clicked button 1."    
End Sub

沒什麼特別的技巧，只不過是按下按鈕後即可連到 DataArea 的 InnerHTML 屬性。跟各位分享一下，<object> 標記內不需要指定任何 onclick 屬性。因為只要按下按鈕，HTA 就會依預設自動搜尋以該按鈕命名的 Click 副程式。

單個按鈕的工具列粉墨登場：

工具列

不好意思，拍照請勿用閃光燈。

聰明的讀者，您可能已經知道怎麼建立多個按鈕的工具列了：只要多插入幾個命令按鈕 ActiveX 控制項的執行個體就可以了 (別忘了每個執行個體要有獨特的 ID，還要在 Window_Onload 副程式設定按鈕屬性)。您還需要建立另一個副程式，在按下按鈕後執行。舉例來說，插入第二個按鈕後要加上這個物件標籤：

<object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton2"></object>

接著將這些指令碼插入 Window_Onload 副程式：

CommandButton2.Width = 32
CommandButton2.Height = 32
CommandButton2.Picture = LoadPicture("c:\scripts\cd.bmp")

最後您要建立一個副程式，在 CommandButton 按下後執行：

Sub CommandButton2_Click()
    DataArea.InnerHTML = "You clicked button 2."    
End Sub

輕輕鬆鬆，就是這麼簡單!

如果您想玩一下，但又不想打字，我們已經替您準備好一個指令碼範例可以複製貼上使用，在 HTA 上建立有四個按鈕的工具列。我們在這個指令碼裡面又附贈一項功能：使用 title 標記替每個按鈕加入工具提示。

<object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton1" 
title="Get network connections information."></object>

只要把滑鼠游標放在 CommandButton 按鈕上，就會跳出一個「Get network connections information」工具提示。 這個密技一定會讓您成為程式界的武林高手。

下列為 HTA 程式碼：

    <html>
    
    <head>
        <title>Toolbar Example</title>
    </head>
    
    <Script Language="VBScript">
    
    Sub Window_Onload
        CommandButton1.Width = 32
        CommandButton1.Height = 32
        CommandButton1.Picture = LoadPicture("c:\scripts\network.bmp")
        CommandButton2.Width = 32
        CommandButton2.Height = 32
        CommandButton2.Picture = LoadPicture("c:\scripts\cd.bmp")
        CommandButton3.Width = 32
        CommandButton3.Height = 32
        CommandButton3.Picture = LoadPicture("c:\scripts\monitor.bmp")
        CommandButton4.Width = 32
        CommandButton4.Height = 32
        CommandButton4.Picture = LoadPicture("c:\scripts\printer.bmp")
    End Sub
        
    
    Sub CommandButton1_Click()
        DataArea.InnerHTML = "You clicked button 1."    
    End Sub
    
    Sub CommandButton2_Click()
        DataArea.InnerHTML = "You clicked button 2."    
    End Sub
    
    Sub CommandButton3_Click()
        DataArea.InnerHTML = "You clicked button 3."    
    End Sub
    
    Sub CommandButton4_Click()
        DataArea.InnerHTML = "You clicked button 4."    
    End Sub
    
    </Script>
    <body topmargin="0" rightmargin="0" leftmargin="0">
    
    <table width="100%" border="1" width="100%" bordercolorlight="buttonface" 
    bordercolordark="buttonface" style="border-collapse:collapse">
        <tr>
            <td width="100%" bgcolor="buttonface">
                <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton1" 
                title="Get network connections information"></object>
                <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton2" 
                title="Get CD/DVD drive information" ></object>
                <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton3" 
                title="Get monitor information" ></object>
                <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton4" 
                title="Get printer information" ></object>
            </td>
        </tr>

回到頁首