用htc组件制作windows选项卡

在网页中模拟制作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);

}

赞 (0)

相关推荐

  • 用htc组件制作windows选项卡

    在网页中模拟制作windows风格选项卡的方法可以有很多种,这里向大家介绍一个比较简单的方法--用htc组件制作. 使用htc的好处是可以自由调用,有点批处理的感觉,例如你有很多网页都要用到这个选项卡,那么你只要做一个htc就可以了,然后在不同的网页中分别调用,而不必重复制作.使用起来很方便,可以节约很多时间. 具体制作方法如下: 一.下载mpc.htc 首先去微软站点下载一个名为mpc.htc的组件,这是制作windows选项卡的原材料. 二.编辑网页,调用mpc.htc 1.将html标签写

  • Python制作Windows按键通知脚本

    Python制作Windows按键通知脚本

    目录 前言 1.准备 2.源码使用与解析 2.1 源码使用 2.2 源码分析 3.扩展触发通知 前言 对于键盘没有背光灯的同学而言,切换大小写或控制Num键开关的时候没有提示,经常需要试探性地输入一些字符来判断开关是否打开,体验非常糟糕. 因此,有人就想到自制脚本这一招,一旦触发大小写切换或Num键切换就进行windows通知提示: https://github.com/skate1512/Toggle_Keys_Notification 今天我们来试试这个脚本,此外,我们还可以基于这个项目,扩

  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • JS制作类似选项卡切换的年历

    本文实例为大家分享了用JS制作简易的可切换的年历,类似于选项卡,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ background-color: green; border-radius: 20px; pad

  • 微信小程序自定义组件实现tabs选项卡功能

    本文为大家分享了微信小程序实现tabs选项卡功能的具体代码,供大家参考,具体内容如下 一个自定义组件由 json wxml wxss js 4个文件组成.要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件) components/navigator/index.json { "component": true } components/navigator/index.wxml <!-- 自定

  • JS制作可以选项卡切换的年历

    本文实例为大家分享了用JS制作简易的可切换的年历,类似于选项卡,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ background-color: green; border-radius: 20px; pad

  • Web上功能强大的DbGrid表格HTC组件[只需在Table中指定样式就可以完成多种功能可扩展]

    Grid.htm 复制代码 代码如下: <style> INPUT { DefineINPUTOnClick:expression(this.onclick=function(){if(this.type=="button"){this.style.color=chooseColor();}}); } </style> <script> var iGridRowCount=0; var iGridColCount=0; function create

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • Python制作Windows系统服务

    最近有个Python程序需要安装并作为Windows系统服务来运行,过程中碰到一些坑,整理了一下. Python服务类 首先Python程序需要调用一些Windows系统API才能作为系统服务,具体内容如下: #!/usr/bin/env python # -*- coding: utf-8 -*- import sys import time import win32api import win32event import win32service import win32serviceuti

  • Jquery组件easyUi实现选项卡切换示例

    Jquery组件easyUi实现选项卡切换示例

    本文实例为大家分享了Jquery easyUi选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hre

随机推荐