浏览器多标签控件的实现

最新推荐文章于 2021-06-05 05:14:23 发布
最新推荐文章于 2021-06-05 05:14:23 发布
阅读量517 收藏
点赞数
分类专栏： VC/MFC 文章标签： 浏览器 文档 ie 框架 button border
 

示例工程下载：http://download.csdn.net/user/kissyfish

IE浏览器的多标签模式已日趋占据浏览器市场的主流模式，回想IE6.0的单文档多实例年代，那时候浏览多网页是非常痛苦的事情。原本有限的空间就要被那些烦琐的网页所占据，要从这些烦琐的网页中切换到自己要查看的网页更是要浪费很多时间。现在许多第三方IE浏览器针对IE浏览器所显示出来的漏洞进行修补以后，多标签浏览器也应运而生。如今遨游、世界之窗、TT等都是在多标签浏览器的基础之上，占领软件市场的。微软也不该示弱，IE7.0也就相继问世。

IE多标签栏的主要特点是：单实例多文档模式，文档间的切换是通过标签实现。一个实例就可以包容多个文档，查看网页是何其的方便。

构成IE多标签栏的界面要素包括工具栏和标签。工具栏采用CDialogBar做为标签的容器，标签采用自绘按钮来实现,CTabCtrl做标签不容易实现自绘（自绘的时候有灰色的border出现）。

在CDialogBar的宽度发生改变的时候，其上面的按钮标签应做适当的调整。当然在足够容纳按钮标签的时，可以给一个设定值。若空间有限的话，则就适当缩小标签的大小，其上的内容通过提示框提示。所以只要响应CDialogBar的WM_SIZE来调整标签的摆放方式。至于标签栏的自绘通过响应WM_PAINT消息就可以做到。

  1. void CTabBar::OnSize(UINT nType, int cx, int cy)
  2. {
  3.     CDialogBar::OnSize(nType, cx, cy);
  4.     CRect rcClient;
  5.     GetClientRect(rcClient);
  6.     int nBarWidth = rcClient.Width();   
  7.     int nTabWidth = nBarWidth-120;
  8.     int nCount = m_ptrArray.GetCount();
  9.     
  10.     if(nCount*m_nWidth>nTabWidth)
  11.     {
  12.         //平均分配位置
  13.         int nAveWidth = nTabWidth*1.0/nCount;
  14.         for(int i=0; i<nCount; i++)
  15.         {
  16.             CRect rcBtn;
  17.             TABINFO* pTabInfo = (TABINFO*)m_ptrArray.GetAt(i);
  18.             pTabInfo->pTabButton->GetClientRect(&rcBtn);
  19.             pTabInfo->pTabButton->MoveWindow(nAveWidth*i, (rcClient.Height()-rcBtn.Height())/2, nAveWidth, m_nHeight, FALSE);
  20.         }
  21.     }
  22.     else
  23.     {
  24.         //固定大小
  25.         for(int i=0; i<nCount; i++)
  26.         {
  27.             CRect rcBtn;
  28.             TABINFO* pTabInfo = (TABINFO*)m_ptrArray.GetAt(i);
  29.             pTabInfo->pTabButton->GetClientRect(&rcBtn);
  30.             pTabInfo->pTabButton->MoveWindow(m_nWidth*i, (rcClient.Height()-rcBtn.Height())/2, m_nWidth, m_nHeight, FALSE);
  31.         }
  32.     }
  33.     Invalidate();
  34. }

当选中标签后，鼠标移动到标签右边的时候，则会出现一个关闭按钮，用来关闭文档。所以这个里面涉及到按钮的自绘原理，这样的文章比较多，这里就不多做说明。不过俺想提个问题，对于按钮的0nDrawItem与DrawItem，是否有什么区别，如果将下面换成OnDrawItem消息响应函数是否可以？实在不懂得的话可以去跟踪CButton的源代码，就知道了。

  1. void CTabButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
  2. {
  3.     ASSERT(lpDrawItemStruct->CtlType == ODT_BUTTON);
  4.     CRect rcItem    =   lpDrawItemStruct->rcItem;
  5.     HWND hWnd       =   lpDrawItemStruct->hwndItem;
  6.     UINT nState     =   lpDrawItemStruct->itemState;
  7.     HDC hDC         =   lpDrawItemStruct->hDC;
  8.     CDC dc;
  9.     dc.Attach(hDC);
  10.     dc.SetBkMode(TRANSPARENT);
  11.     CString strTitle;
  12.     GetWindowText(strTitle);
  13.     if (m_bSel)
  14.     {
  15.         if(!m_bmpBmpBkgnd.IsNull())
  16.         {
  17.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(0,0,10, m_bmpBmpBkgnd.GetHeight()), 
  18.                 CRect(m_bmpBmpBkgnd.GetWidth()/4*2, 0, m_bmpBmpBkgnd.GetWidth()/4*2+10, m_bmpBmpBkgnd.GetHeight()));
  19.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(4,0,rcItem.right-10, m_bmpBmpBkgnd.GetHeight()), 
  20.                 CRect(m_bmpBmpBkgnd.GetWidth()/4*2+10, 0, m_bmpBmpBkgnd.GetWidth()/4*3-10, m_bmpBmpBkgnd.GetHeight()));
  21.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(rcItem.right-10,0,rcItem.right, m_bmpBmpBkgnd.GetHeight()), 
  22.                 CRect(m_bmpBmpBkgnd.GetWidth()/4*3-10, 0, m_bmpBmpBkgnd.GetWidth()/4*3, m_bmpBmpBkgnd.GetHeight()));
  23.         }
  24.         if(!m_bmpIcon.IsNull())
  25.         {
  26.             m_bmpIcon.Draw(dc.m_hDC, CRect(4, 4, 4+m_bmpIcon.GetWidth(), 4+m_bmpIcon.GetHeight()),  
  27.                 CRect(0,0,m_bmpIcon.GetWidth(), m_bmpIcon.GetHeight()));
  28.         }
  29.         CRect rcLabel;
  30.         rcLabel.left =  rcItem.left+4*2+16;
  31.         rcLabel.top  = rcItem.top;
  32.         rcLabel.right = rcItem.right -  (4*2+16);
  33.         rcLabel.bottom = rcItem.bottom;
  34.         dc.SetTextColor(RGB(0xff,0xff,0xff));
  35.         dc.DrawText(strTitle, &rcLabel, DT_SINGLELINE | DT_VCENTER | DT_WORD_ELLIPSIS);
  36.         if(m_bOverCloseButton)
  37.         {
  38.             if(!m_bmpClose.IsNull())
  39.             {
  40.                 m_bmpClose.Draw(dc.m_hDC, CRect(rcItem.Width()-m_bmpClose.GetWidth()/3-5,(rcItem.Height()-m_bmpClose.GetHeight())/2,rcItem.Width()-2, (rcItem.Height()-m_bmpClose.GetHeight())/2+m_bmpClose.GetHeight()), 
  41.                     CRect(m_bmpClose.GetWidth()/3, 0, m_bmpClose.GetWidth()/3*2, m_bmpClose.GetHeight()));
  42.             }
  43.         }
  44.         else
  45.         {
  46.             if(!m_bmpClose.IsNull())
  47.             {
  48.                 m_bmpClose.Draw(dc.m_hDC, CRect(rcItem.Width()-m_bmpClose.GetWidth()/3-5,(rcItem.Height()-m_bmpClose.GetHeight())/2,rcItem.Width()-2, (rcItem.Height()-m_bmpClose.GetHeight())/2+m_bmpClose.GetHeight()), 
  49.                     CRect(0, 0, m_bmpClose.GetWidth()/3, m_bmpClose.GetHeight()));
  50.             }
  51.         }
  52.     }
  53.     else
  54.     {
  55.         if(!m_bmpBmpBkgnd.IsNull())
  56.         {
  57.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(0,0,10, m_bmpBmpBkgnd.GetHeight()), 
  58.                 CRect(0, 0, 10, m_bmpBmpBkgnd.GetHeight()));
  59.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(10,0,rcItem.right-10, m_bmpBmpBkgnd.GetHeight()), 
  60.                 CRect(10, 0, m_bmpBmpBkgnd.GetWidth()/4-10, m_bmpBmpBkgnd.GetHeight()));
  61.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(rcItem.right-10,0,rcItem.right, m_bmpBmpBkgnd.GetHeight()), 
  62.                 CRect(m_bmpBmpBkgnd.GetWidth()/4-10, 0, m_bmpBmpBkgnd.GetWidth()/4, m_bmpBmpBkgnd.GetHeight()));
  63.         }
  64.     
  65.         if(!m_bmpIcon.IsNull())
  66.         {
  67.             m_bmpIcon.Draw(dc.m_hDC, CRect(4, 4, 4+m_bmpIcon.GetWidth(), 4+m_bmpIcon.GetHeight()),  
  68.                 CRect(0,0,m_bmpIcon.GetWidth(), m_bmpIcon.GetHeight()));
  69.         }
  70.         CRect rcLabel;
  71.         rcLabel.left =  rcItem.left + 4*2+16;
  72.         rcLabel.top  = rcItem.top;
  73.         rcLabel.right = rcItem.right -  (4*2+16);
  74.         rcLabel.bottom = rcItem.bottom;
  75.         dc.SetTextColor(RGB(0xff,0xff,0xff));
  76.         dc.DrawText(strTitle, &rcLabel, DT_SINGLELINE | DT_VCENTER | DT_WORD_ELLIPSIS);
  77.     }
  78.     dc.Detach();
  79. }

    值得注意的是，CdialogBar的按钮命令消息是先发给主框架窗口处理，如果主框架窗口没有为其提供相应的响应函数，则命令的消息路由就中断，按钮则会出现disabled状态。或者你也可以获取到这个命令消息后，重载OnCmdMsg再将这个命令消息发往其他窗口。然后就可以通过按钮的消息反射机制，使按钮能够自己处理自己的事件，比较贴近面向对象的设计。由于命令消息响应函数里面没有将发命令消息的对象传到CtabBar中，这样CtabBar如果靠按钮ID来设置主键唯一标志一个标签按钮的话，那那就会占用很多的ID。本设计并没有这么做，在给ctabbar提供相的相关通知，是在里面发送一个通知消息到ctabbar的，其中LPARAM就可以保存按钮标签对象。这样标签栏就可以实现对底下标签的操作。以下就是按钮发送通知消息给标签栏的实现细节。

  1. #define NM_TBSEL WM_USER+1
  2. void CTabButton::OnBnClicked()
  3. {
  4.     CTabBar* pTabBar = (CTabBar*)GetParent();
  5.     pTabBar->SendMessage(NM_TBSEL, 0, (LPARAM)this);
  6. }
  7. HRESULT CTabBar::OnNmTbSel(WPARAM wParam, LPARAM lParam)
  8. {
  9.     CTabButton* pTabButton = (CTabButton*)lParam;
  10.     SetCurSel(pTabButton);
  11.     CChildFrame* pChildFrame = GetChildFrameByTabButton(pTabButton);
  12.     pChildFrame->MDIActivate();
  13.     pChildFrame->MDIMaximize();
  14.     return TRUE;
  15. }

总体的设计思想是：标签栏应该用一个数组来存放标签，但由于一个标签又是跟一个CchildFrame一一对应起来，两者应该可以相互访问，效率比较高的话可以用cmap映射来实现。本设计采用一个结构体来存储这两个关键要素。

  1. typedef struct _TABINFO 
  2. {
  3.     CChildFrame* pChildFrame;
  4.     CTabButton* pTabButton;
  5. }TABINFO, *PTABINFO;

这个标签栏就可以通过一个数组维护这样的结构。至于CchildFrame和CtabButton的对应关系可以通过下面来实现，不过是个轮询过程，的确很浪费时间。

  1. CTabButton*     CTabBar::GetTabButtonByChildFrame(CChildFrame* pChildFrame)
  2. {
  3.     int nCount = m_ptrArray.GetCount();
  4.     for(int i=0; i<nCount; i++)
  5.     {
  6.         TABINFO*  pTabInfo = (TABINFO*)m_ptrArray.GetAt(i);
  7.         if(pTabInfo->pChildFrame==pChildFrame)
  8.         {
  9.             return pTabInfo->pTabButton;
  10.         }
  11.         else
  12.         {
  13.             continue;
  14.         }
  15.     }
  16.     return NULL;
  17. }
  18. CChildFrame*    CTabBar::GetChildFrameByTabButton(CTabButton* pTabButton)
  19. {
  20.     int nCount = m_ptrArray.GetCount();
  21.     for(int i=0; i<nCount; i++)
  22.     {
  23.         TABINFO*  pTabInfo = (TABINFO*)m_ptrArray.GetAt(i);
  24.         if(pTabInfo->pTabButton==pTabButton)
  25.         {
  26.             return pTabInfo->pChildFrame;
  27.         }
  28.         else
  29.         {
  30.             continue;
  31.         }
  32.     }
  33.     return NULL;
  34. }

以下是我实现的浏览器的一个截图，并附有一个vs2003的demo，具体细节可以察看这个demo。

来自 http://blog.csdn.net/kissyfish/article/details/3261056
MOKA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VFB组件：TabControl控件（多标签）
yfvb2010的专栏
12-29 266
WIN系统提供的标准控件，标签页切换。 VFB上的打开工程，就是使用这个控件，这个控件很简单，一般就是点击后，自己在事件中切换显示和隐藏其它控件即可。 常用事件，可以用第一个事件，自己写代码切换。 还有一种是自动切换页面，那么需要每个页面搞一个窗口 先新增几个子窗口 你需要多少页面，就新增几个窗口，然后选择子窗口 然后调节TAB控件合适大小，子窗口会在这个TAB内部（运行有效果，设计时看不到） 点击打开数据编辑，新增几个项目，绑定相关的窗口 测试效果，...
基于JQuery的多标签的实现
dljw41363的博客
09-18 165
最近在学习JQuery，其实也不叫学习，很久以前就学过，只是有一段时间没用，有些生疏了，于是就做几个小例子来练习练习，为了方便以后查找就将这些小示例记录下来。 今天要分享的是基于JQuery实现的多标签的切换，JQuery就不用过多介绍了，网上一搜一大堆资料，当然这样的小示例也有很多，这里只是发表一些自己的想法。 下面是本次示例所使用的HTML页面： View Code ...
MFC多标签仿Chorme浏览器Demo
12-15
CSDN自动评分,本意是直接下载的。 资源仅仅是一个MFC的demo也就是exe非源码。 当时仅仅用来多标签的效果而已。 ——分割线—————————————————————— MFC仿Chorme多标签Demo，可以拖动、交换、分离、合并。 [MFC可分离浏览器等]。多标签的用途太多了，特别在现在的发展下，功能型软件主打都是可分页、可分屏、自适应、高度自由组合等等要求。多标签灵活，功能更加密集，适合分屏、多屏的使用；比如说炒股的就需要多屏，那么就要可分离标签来搞定了。
模仿IE的多标签浏览器
10-15
一个模仿IE的浏览器，界面美观，具备基本功能，多标签式
Duilib 实现多标签多网页
07-08
c++ duilib多标签多网页的实现， 可做多标签浏览器 游戏盒子
基于duilib的多标签简易浏览器
cs1992612616的博客
12-23 1216
放图： 只实现了简单的功能，供大家学习了 下载地址：http://download.csdn.net/detail/cs1992612616/9374489
仿ie9支持多标签浏览器
01-20
仿ie9支持多标签浏览器 具有生动的界面 代码堆积而成
基于duilib和cef的多页签浏览器
07-21
一款简单的使用duilib做皮肤，cef内核的多页签浏览器，适用于初学者学习
VB 编写的一个非常漂亮网页浏览器(支持多标签)
12-11
VB编写的一个非常漂亮网页浏览器(支持多标签)，和IE浏览器功能一样
VB窗体 TAB控件 实现标签切换.rar
07-10
一个VB窗体 TAB控件 实现标签切换，来自国外的VB达人所写，选项卡中嵌套有TAB，点击后可切换窗体中的对应内容，有横向的和纵向的选项卡例子，可根据自己的需要选择使用。本代码参考价值大，希望关注。
HTML常用标签控件,HTML常用标签
weixin_30671363的博客
06-05 356
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？HTML常用标签1.布局标签&语义化1.:定义块级元素12345678【特点】元素独占一行，元素前后会自动换行，主要用于网页布局。多用于组合其他HTML元素，本身无实在意义。2.:行内元素1多个元素在一行内显示，与div标签区别在于，span随内容而占用高宽空间(紧贴内容)，而一对div标签却占用一行。3.:定义...
用C#打造支持插件的多标签浏览器（篇一）扩展WebBrowser
angelcom的专栏
11-01 5533
自从 .NET Framework 2.0 中新增了 WebBrowser 控件， 要在WinForm里面嵌入一个浏览器就更方便了。 但就WebBrowser本身而已，封装过程中，有些底层的东西找不到了，比如IWebBrowser2中的Silent，这个属性的用处简单说就是屏蔽JS错误窗口。虽然可以通过Document.DomDocument获得Document的COM接口，如常用到的IHT
使用标签控件设计多页面窗口
JJF代码男孩
05-13 1964
使用标签控件设计多页面窗口 1：使用 CTabCtrl类的InsertItem(int nitem,LPCTRSTR lpszitem,int nimage)方法 nitem表示索引位置，第一个个为0 lpszitem表示标签页文本 nimage表示标签页显示的图像索引 2 :调用CTabCtrl的SetCurSel(int item)方法设置一个标签页为当前的标签页 item表示设置当前的标签页索引，返回值是控件之前选中的标签页索引
2021超实用的浏览器插件：CSDN浏览器助手+即时搜索及个性标签页
boke112的博客
12-30 1068
老古只是一名普通站长，平时使用最多的就是搜索资料、折腾代码等，也比较喜欢使用谷歌浏览器Chrome，没想到现在CSDN博客推出这款2020最好用的Chrome插件——CSDN浏览器助手，所以老古就直接安装这款插件来体验一番。 CSDN浏览器助手插件下载地址：https://t.csdnimg.cn/1YBE 从CSDN浏览器助手官网的描述来看，这款CSDN浏览器助手的功能还是强大的，特别是搜索功能、个性化标签页、二维码转换等功能老古都非常喜欢。 CSDN浏览器助手插件的搜素功能体验 比如想.
VS2013/MFC编程入门之三十一（常用控件：标签控件Tab Control ）
热门推荐
赵小咖的博客
12-03 1万+
前面两节讲了树形控件Tree Control，本节开始讲解标签控件Tab Control，也可以称为选项卡控件。        标签控件简介        标签控件也比较常见。它可以把多个页面集成到一个窗口中，每个页面对应一个标签，用户点击某个标签时，它对应的页面就会显示。        使用标签控件我们可以同时加载多个有关联的页面，用户只需点击标签即可实现页面切换，方便灵活的进
Chromium多标签浏览器开发
cuizm的专栏
06-03 1万+
由于项目的原因，需要使用Delphi语言进行开发Chrome内核的多标签浏览功能。本着开放精神，先到网上搜索了一大圈，发现大多以IE内核的多标签浏览器居多（即WebBrowser控件）。Chromium资源以及相关介绍，少之又少，想查一些资料，都没有办法。发现一个叫DcefBrowser的控件，说是可以实现多标签浏览器。但是这是用Delphi xe编译的，低版本无法安装使用，并且在开发项目时，也比较忌讳使用太多的第三方控件。实在没办法，只能自己动手，丰衣足食。
手机浏览器中video标签控件显示不全
最新发布
09-08
手机浏览器中video标签控件显示不全的原因有两个方面。首先，iOS微信浏览器和安卓微信浏览器使用了不同的内核。iOS微信浏览器采用了Chrome内核，所以大部分属性都被支持。而安卓微信浏览器采用了X5内核，一些属性不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值