用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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 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
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
python集合的新增元素方法整理
2020/12/07 Python
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
经典洗发水广告词
2014/03/13 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
学术会议通知
2015/04/15 职场文书
部门2015年度工作总结
2015/04/29 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Go语言基础知识点介绍
2021/07/04 Golang