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

Javascript
javascript 面向对象的经典实例代码
javascript prototype原型操作笔记
JavaScript 常见对象类创建代码与优缺点分析
javascript 混合的构造函数和原型方式,动态原型方式
测试JavaScript字符串处理性能的代码
JQuery 表单中textarea字数限制实现代码
jQuery Selectors(选择器)的使用(六、属性篇)
IE浏览器打印的页眉页脚设置解决方法
javascript检测(控制 )上传文件大小
jquery 双色表格实现代码
JavaScript Cookie的读取和写入函数
JavaScript 利用Cookie记录用户登录信息
JavaScript Cookie显示用户上次访问的时间和次数
JavaScript Cookie 直接浏览网站分网址
javascript OFFICE控件测试代码
javascript setTimeout和setInterval 的区别
javascript弹出窗口 window.open使用方法以及参数说明分析篇
可以用来搜索当前页面内容的js代码
动态调整textarea中字体的大小代码
为指定元素增加样式的js代码

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


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