用htc组件制作windows选项卡


Posted in Javascript onJanuary 13, 2007

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

  

Javascript 相关文章推荐
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
js之WEB开发调试利器:Firebug 下载
Jan 13 #Javascript
用js实现多域名不同文件的调用方法
Jan 12 #Javascript
cssQuery()的下载与使用方法
Jan 12 #Javascript
JavaScript基本对象
Jan 11 #Javascript
window.showModalDialog使用手册
Jan 11 #Javascript
新手入门常用代码集锦
Jan 11 #Javascript
javascript引用对象的方法
Jan 11 #Javascript
You might like
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
js控制框架刷新
2008/08/01 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python实现决策树
2017/12/21 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
python模拟实现斗地主发牌
2020/01/07 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
python实现飞机大战项目
2020/03/11 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Django数据库迁移常见使用方法
2020/11/12 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
毕业生求职自荐信怎么写
2014/01/08 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
爱国演讲稿400字
2014/05/07 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
护校行动方案
2014/05/31 职场文书
小学生常见病防治方案
2014/06/06 职场文书
小兵张嘎观后感
2015/06/03 职场文书
详解Python flask的前后端交互
2022/03/31 Python