手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >用htc组件制作windows选项卡
用htc组件制作windows选项卡
摘要:在网页中模拟制作windows风格选项卡的方法可以有很多种,这里向大家介绍一个比较简单的方法——用htc组件制作。使用htc的好处是可以自由...

在网页中模拟制作windows风格选项卡的方法可以有很多种,这里向大家介绍一个比较简单的方法——用htc组件制作。

使用htc的好处是可以自由调用,有点批处理的感觉,例如你有很多网页都要用到这个选项卡,那么你只要做一个htc就可以了,然后在不同的网页中分别调用,而不必重复制作。使用起来很方便,可以节约很多时间。

具体制作方法如下:

一、下载mpc.htc

首先去微软站点下载一个名为mpc.htc的组件,这是制作windows选项卡的原材料。

二、编辑网页,调用mpc.htc

1、将html标签写成:

以下内容为引用:<HTMLxmlns:mpc>

2、建立样式行为:

以下内容为引用:<STYLE>

mpc:container,mpc:page{

behavior:url(mpc.htc);

}

</STYLE>

即mpc:container和mpc:page均用行为调用mpc.htc

3、具体内容调用:

以下内容为引用:<BODY>

<div>

<mpc:containerSTYLE="width:400;height:200">

<mpc:page

ID="name"

TABTITLE="这里的内容会被鼠标提示"

TABTEXT="这里是选项卡标签的内容">

这里是选项卡的具体内容

</mpc:page>

<mpc:pageTABTITLE=""TABTEXT="">

</mpc:page>

</mpc:container>

</div>

</BODY>

这里<mpc:container>标签中用style样式的width和height确定整个选项卡的宽度和高度;然后在<mpc:page>……</mpc:page>标签间中加入选项卡的具体内容,有几个选项就用几组<mpc:page>……</mpc:page>标签。

附文章中windows选项卡示例页面的代码:

以下内容为引用:<HTMLxmlns:mpc>

<HEAD>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

<TITLE>mpc</TITLE>

<STYLE>

mpc:container,mpc:page{

behavior:url(mpc.htc);

}

</STYLE>

</HEAD>

<BODYBGCOLOR="#FFFFFF"ONLOAD="oMPC.style.visibility='visible'"text="#000000">

<divstyle="position:absolute;height:200;width:400;margin-top:20">

<mpc:containerID="oMPC"STYLE="width:400;height:200;visibility:hidden">

<mpc:pageID="tab1"TABTITLE="这是一个表格"TABTEXT="表格">

<tableALIGN="CENTER"STYLE="border:1solid;font:20pt;

width:300;height:150;color:white">

<tr><tdVALIGN="MIDDLE"ALIGN="CENTER">这是一个表格</td></tr>

</table>

</mpc:page>

<mpc:pageID="tab2"TABTITLE="这里可以写入文本"TABTEXT="文本文字">

<divSTYLE="padding:12px;font:10pt;font-style:italic">

请在这里写入文字……

</div>

</mpc:page>

<mpc:pageID="tab3"TABTITLE="这是图象"TABTEXT="图象">

<imgsrc="/oblog312/sample.jpg";border=1hspace="75"vspace="30">

</mpc:page>

<mpc:pageID="tab4"TABTITLE="这是可以是其他内容"TABTEXT="其他内容">

<ahref=#><fontface="楷体_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);

}

【用htc组件制作windows选项卡】相关文章:

JavaScript中的small()方法使用详解

onmousewheel event 缩放图片效果

浅谈javascript中的闭包

用javascript制作放大镜放大图片

javascript中eval解析JSON字符串

本窗口将在秒后自动关闭

jQuery实现自动滚动到页面顶端的方法

JS对字符串编码的几种方式使用

jquery实现点击label的同时触发文本框点击事件的方法

JS验证IP,子网掩码,网关和MAC的方法

精品推荐
分类导航