用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 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 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中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python反射的用法实例分析
2018/02/11 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Django工程的分层结构详解
2019/07/18 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
联强国际笔试题面试题
2013/07/10 面试题
服务员自我评价
2014/01/25 职场文书
个人工作总结范文2014
2014/11/07 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
无工作证明怎么写
2015/06/15 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书