用htc組件製作windows選項卡_基礎知識

來源:互聯網
上載者:User
在網頁中類比製作windows風格選項卡的方法可以有很多種,這裡向大家介紹一個比較簡單的方法——用htc組件製作。  

  使用htc的好處是可以自由調用,有點批處理的感覺,例如你有很多網頁都要用到這個選項卡,那麼你只要做一個htc就可以了,然後在不同的網頁中分別調用,而不必重複製作。使用起來很方便,可以節約很多時間。  

具體製作方法如下:  

一、下載mpc.htc  

  首先去微軟網站下載一個名為mpc.htc的組件,這是製作windows選項卡的原材料。  

二、編輯網頁,調用mpc.htc  

1、將html標籤寫成:  
    以下內容為引用: <HTML xmlns:mpc>  


2、建立樣式行為:  
以下內容為引用:   <STYLE>  
   mpc\:container,mpc\:page{  
    behavior:url(mpc.htc);  
   }  
  </STYLE>  


  即mpc\:container和mpc\:page均用行為調用mpc.htc  

3、具體內容調用:  
以下內容為引用: <BODY>  
<div>  
<mpc:container STYLE="width:400; height:200">  
  <mpc:page   
    ID="name"  
    TABTITLE="這裡的內容會被滑鼠提示"   
    TABTEXT="這裡是選項卡標籤的內容">  
  這裡是選項卡的具體內容  
  </mpc:page>   
  <mpc:page TABTITLE="" TABTEXT="">  
  </mpc:page>  
</mpc:container>  
</div>  
</BODY>  


  這裡<mpc:container>標籤中用style樣式的width和height確定整個選項卡的寬度和高度;然後在<mpc:page>……</mpc:page>標籤間中加入選項卡的具體內容,有幾個選項就用幾組<mpc:page>……</mpc:page>標籤。  

附 文章中windows選項卡樣本頁面的代碼:  

以下內容為引用: <HTML xmlns:mpc>  
<HEAD>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<TITLE>mpc</TITLE>  
<STYLE>  
mpc\:container,mpc\:page{  
  behavior:url(mpc.htc);  
}  
</STYLE>  
</HEAD>  
<BODY BGCOLOR="#FFFFFF" ONLOAD="oMPC.style.visibility='visible'" text="#000000">  
<div style="position:absolute;height:200;width:400;margin-top:20">  
<mpc:container ID="oMPC" STYLE="width:400; height:200; visibility:hidden">  
  <mpc:page ID="tab1" TABTITLE="這是一個表格" TABTEXT="表格 ">  
    <table ALIGN="CENTER" STYLE="border:1 solid;font:20pt;   
      width:300; height:150; color:white">  
    <tr><td VALIGN="MIDDLE" ALIGN="CENTER">這是一個表格</td></tr>  
    </table>  
  </mpc:page>  
  <mpc:page ID="tab2" TABTITLE="這裡可以寫入文本" TABTEXT="文本文字 ">  
    <div STYLE="padding:12px; font:10pt; font-style:italic">  
      請在這裡寫入文字……  
    </div>  
  </mpc:page>  
  <mpc:page ID="tab3" TABTITLE="這是圖象" TABTEXT="圖象 ">   
    <img src="/oblog312/sample.jpg ";border=1 hspace="75" vspace="30">   
  </mpc:page>  
  <mpc:page ID="tab4" TABTITLE="這是可以是其他內容" TABTEXT="其他內容 ">  
    <a href=#><font face="楷體_GB2312" size="2">超級連結</font></a>  
  </mpc:page>   
</mpc:container></div>  
</BODY>  
</HTML>  

  

http://msdn.microsoft.com/downloads/samples/internet/behaviors/library/mpc/mpc.htc 

htc檔案放到你選項卡所在htm檔案相同的目錄下,要麼你改頁面原始碼中下面這段中htc的位置    

          mpc\:container   {    
                                          behavior:url(mpc.htc);    
                                          }    

          mpc\:page   {    
                                          behavior:url(mpc.htc);    
                                          } 

  
相關文章

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.