用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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
Javascript与vbscript数据共享
Jan 09 Javascript
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 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
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
php实现网站插件机制的方法
2009/11/10 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
javascript定时器完整实例
2015/02/10 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
Python删除空文件和空文件夹的方法
2015/07/14 Python
python使用mysql数据库示例代码
2017/05/21 Python
详解python编译器和解释器的区别
2019/06/24 Python
利用python求积分的实例
2019/07/03 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python绘制热力图示例
2019/09/27 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
护理专业本科生自荐信
2013/10/01 职场文书
党员个人总结范文
2015/02/14 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
Django中celery的使用项目实例
2022/07/07 Python