用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 相关文章推荐
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
浅析Jquery操作select
Dec 13 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
three.js实现圆柱体
Dec 30 Javascript
JS PHP字符串截取函数实现原理解析
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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
PHP 压缩文件夹的类代码
2009/11/05 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php模板原理讲解
2013/11/13 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python错误的处理方法
2020/06/23 Python
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
勾股定理课后反思
2014/04/26 职场文书
授权委托书怎么写
2014/09/25 职场文书
党员倡议书
2015/01/19 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
nginx结合openssl实现https的方法
2021/07/25 Servers