用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中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
解决Vue动态加载本地图片问题
Oct 09 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 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python实现选择排序
2017/06/04 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Python测试线程应用程序过程解析
2019/12/31 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
个人简历的自荐信
2013/10/23 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
机械操作工岗位职责
2014/08/08 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python