用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 相关文章推荐
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 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获取中文拼音首字母类和函数分享
2014/04/24 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
学习vue.js计算属性
2016/12/03 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
JS实现购物车特效
2017/02/02 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
python编写实现抽奖器
2020/09/10 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
大学生学业生涯规划
2014/01/05 职场文书
网页美工求职信范文
2014/04/17 职场文书
诚信承诺书模板
2014/05/26 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript