用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实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 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数据库连接
2006/10/09 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
jQuery基础框架浅入剖析
2012/12/27 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
计划生育宣传标语
2014/06/21 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
公司更名通知函
2015/04/24 职场文书
学术会议领导致辞
2015/07/29 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
原生JS实现分页
2022/04/19 Javascript