用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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
Vue中的字符串模板的使用
May 17 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
杏林同学录(二)
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP实现下载功能的代码
2012/09/29 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
js清理Word格式示例代码
2014/02/13 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
pygame实现成语填空游戏
2019/10/29 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Python通过Pillow实现图片对比
2020/04/29 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
请说出以下代码输出什么
2013/08/30 面试题
企业年会主持词
2014/03/27 职场文书
书香家庭事迹材料
2014/05/09 职场文书
保护环境建议书400字
2014/05/13 职场文书
高中班级口号
2014/06/09 职场文书
大学生党员自我评价
2015/03/04 职场文书
优秀团员自我评价
2015/03/10 职场文书