Home > Developer > JavaScript
There are many ways to simulate a windows style tab on the webpage. Here we will introduce a simple method-using htc components.
The advantage of using htc is that it can be freely called and is a bit batch-processed. For example, if you want to use this tab on many webpages, you only need to create an htc, then they are called separately on different web pages without having to make them again. It is easy to use and saves a lot of time.
The procedure is as follows:
1. Download mpc. htc
First, go to the Microsoft Site to download a component named "mpc. htc", which is the raw material for making the windows tab.
2. Edit the webpage and call the mpc. htc
1. Write the html tag as follows:
Reference: <HTML xmlns: NMPs>
2. Create a style behavior:
Reference: <STYLE>
MCM \: container, MCM \: page {
Behavior: url (mpc. htc );
}
</STYLE>
That is to say, both the mpc \: iner and the mpc \: page call the mpc. htc
3. Call specific content:
Reference: <BODY>
<Div>
<Mpc: container STYLE = "width: 400; height: 200">
<MCM: page
ID = "name"
TABTITLE = "the content here will be prompted by the mouse"
TABTEXT = "here is the content of the tab label">
Here is the specific content of the tab
</MCM: page>
<Mpc: page TABTITLE = "" TABTEXT = "">
</MCM: page>
</Mpc: container>
</Div>
</BODY>
Here, the <mpc: container> label uses the width and height of the style to determine the width and height of the entire tab. Then, in the <mpc: page> ...... </Mpc: page> the content of tabs added between tags. You can use several groups of tabs with the following options: <mpc: page> ...... </MCM: page> label.
Code for the windows tab Sample page in the appendix:
Reference: <HTML xmlns: NMPs>
<HEAD>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<TITLE> MCM </TITLE>
<STYLE>
MCM \: container, MCM \: page {
Behavior: url (mpc. htc );
}
</STYLE>
</HEAD>
<Body bgcolor = "# FFFFFF" ONLOAD = "oMPC. style. visibility = 'visable'" 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 = "this is a table" TABTEXT = "table">
<Table ALIGN = "CENTER" STYLE = "border: 1 solid; font: 20pt;
Width: 300; height: 150; color: white ">
<Tr> <td VALIGN = "MIDDLE" ALIGN = "CENTER"> This is a table </td> </tr>
</Table>
</MCM: page>
<Mpc: page ID = "tab2" TABTITLE = "you can write text here" TABTEXT = "text">
<Div STYLE = "padding: 12px; font: 10pt; font-style: italic">
Write text here ......
</Div>
</MCM: page>
<Mpc: page ID = "tab3" TABTITLE = "this is an image" TABTEXT = "image">
</MCM: page>
<Mpc: page ID = "tab4" TABTITLE = "This can be other content" TABTEXT = "other content">
<A href = #> <font face = "_ GB2312" size = "2"> hyperlink </font> </a>
</MCM: page>
</Mpc: container> </div>
</BODY>
</HTML>
Http://msdn.microsoft.com/downloads/samples/internet/behaviors/library/mpc/mpc.htc
Put the htc file in the same directory as the htm file where your tab is located, or change the location of htc in the following section in the source code of the page.
MCM \: container {
Behavior: url (mpc. htc );
}
MCM \: page {
Behavior: url (mpc. htc );
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
