用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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
DWR中各种java方法的调用
May 04 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
js实现div色块碰撞
2020/01/16 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python字符串详细介绍
2015/05/09 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
机电一体化求职信
2014/03/10 职场文书
世界读书日的活动方案
2014/08/20 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android