用htc組件製作windows選項卡

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在網頁中類比製作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);

}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More