用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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 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
memcache命令启动参数中文解释
2014/01/13 PHP
PHP中echo和print的区别
2014/08/28 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
js表单登陆验证示例
2016/10/19 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Flask数据库迁移简单介绍
2017/10/24 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
如何基于python实现不邻接植花
2020/05/01 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
python中count函数知识点浅析
2020/12/17 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
什么是lambda函数
2013/09/17 面试题
个人简历的自荐信
2013/10/23 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
食品安全责任书
2014/04/15 职场文书
房屋维修协议书范本
2014/09/25 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js