用htc組件制作windows選項卡

更新時間：2007年01月13日 00:00:00 作者：

在網(wǎng)頁中模擬制作windows風格選項卡的方法可以有很多種，這里向大家介紹一個比較簡單的方法——用htc組件制作。

　　使用htc的好處是可以自由調(diào)用，有點批處理的感覺，例如你有很多網(wǎng)頁都要用到這個選項卡，那么你只要做一個htc就可以了，然后在不同的網(wǎng)頁中分別調(diào)用，而不必重復制作。使用起來很方便，可以節(jié)約很多時間。

具體制作方法如下：

一、下載mpc.htc

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

二、編輯網(wǎng)頁，調(diào)用mpc.htc

1、將html標簽寫成：
    以下內(nèi)容為引用： <HTML xmlns:mpc>

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

　　即mpc\:container和mpc\:page均用行為調(diào)用mpc.htc

3、具體內(nèi)容調(diào)用：
以下內(nèi)容為引用： <BODY>
<div>
<mpc:container STYLE="width:400; height:200">
　　<mpc:page
　　　　ID="name"
　　　　TABTITLE="這里的內(nèi)容會被鼠標提示"
　　　　TABTEXT="這里是選項卡標簽的內(nèi)容">
　　這里是選項卡的具體內(nèi)容
　　</mpc:page>
　　<mpc:page TABTITLE="" TABTEXT="">
　　</mpc:page>
</mpc:container>
</div>
</BODY>

　　這里＜mpc:container＞標簽中用style樣式的width和height確定整個選項卡的寬度和高度；然后在＜mpc:page＞……＜/mpc:page＞標簽間中加入選項卡的具體內(nèi)容，有幾個選項就用幾組＜mpc:page＞……＜/mpc:page＞標簽。

附文章中windows選項卡示例頁面的代碼：

以下內(nèi)容為引用： <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="這是可以是其他內(nèi)容" TABTEXT="其他內(nèi)容 ">
　　　　<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);
                                          }