当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用htc组件制作windows选项卡

Javascript
[原创]javascript 定时广告显示(两个时间段)
jquery ui dialog里调用datepicker的问题
ext 代码生成器
javascript 局部页面打印实现代码
Javascript 继承实现例子
Javascript 继承机制的实现
Javascript 继承机制实例
Javascript 作用域使用说明
Javascript Math对象
Javascript Global对象
什么是JavaScript
img标签中onerror用法
使用JQuery和s3captche实现一个水果名字的验证
JavaScript写的一个DIV 弹出网页对话框
IE8 下的Js错误HTML Parsing Error...
jQuery ui 1.7更新小结
javascript 多级checkbox选择效果
google地图的路线实现代码
Javascript 访问样式表实现代码
JS 控制CSS样式表

Javascript 中的 用htc组件制作windows选项卡


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 345 ::
收藏到网摘: n/a

在网页中模拟制作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);
}