用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 相关文章推荐
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 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
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
postman和python mock测试过程图解
2020/02/22 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
最好的商品表达自己:Cafepress
2019/09/04 全球购物
先进人物事迹材料
2014/12/29 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书