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

Javascript
经常用到的JavasScript事件的翻译
Javascript下的keyCode键码值表
用javascript动态调整iframe高度的代码
javascript应用:Iframe自适应其加载的内容高度
javascript 控制弹出窗口
用javascript父窗口控制只弹出一个子窗口
给moz-firefox下添加IE方法和属性
FireFox中textNode分片的问题
对google个性主页的拖拽效果的js的完整注释[转]
身份证号码前六位所代表的省,市,区, 以及地区编码下载
一个友好的.改善的 Object.prototype.toString的实现
如何写一个通用的JavaScript效果库!(1/2)
如何写一个通用的JavaScript效果库!(2/2)
几个高效,简洁的字符处理函数
无语,javascript居然支持中文(unicode)编程!
ie 处理 gif动画 的onload 事件的一个 bug
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
firefox 和 ie 事件处理的细节,研究,再研究-----书写同时兼容ie和ff的事件处理代码
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
JavaScript 中的replace方法说明

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 145 ::
收藏到网摘: 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);
}