Create a windows tab with htc Components

Source: Internet
Author: User

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 );
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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.