浏览器多标签控件的实现

最新推荐文章于 2021-08-31 23:47:14 发布
最新推荐文章于 2021-08-31 23:47:14 发布
阅读量2.5k 收藏 4
点赞数
分类专栏： c++技术----控件应用 文章标签： 浏览器 文档 ie 框架 button border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kissyfish/article/details/3261056
版权

示例工程下载：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);
  5.     CRect rcClient;
  6.     GetClientRect(rcClient);
  7.     int nBarWidth = rcClient.Width();   
  8.     int nTabWidth = nBarWidth-120;
  9.     int nCount = m_ptrArray.GetCount();
  10.     
  11.     if(nCount*m_nWidth>nTabWidth)
  12.     {
  13.         //平均分配位置
  14.         int nAveWidth = nTabWidth*1.0/nCount;
  15.         for(int i=0; i<nCount; i++)
  16.         {
  17.             CRect rcBtn;
  18.             TABINFO* pTabInfo = (TABINFO*)m_ptrArray.GetAt(i);
  19.             pTabInfo->pTabButton->GetClientRect(&rcBtn);
  20.             pTabInfo->pTabButton->MoveWindow(nAveWidth*i, (rcClient.Height()-rcBtn.Height())/2, nAveWidth, m_nHeight, FALSE);
  21.         }
  22.     }
  23.     else
  24.     {
  25.         //固定大小
  26.         for(int i=0; i<nCount; i++)
  27.         {
  28.             CRect rcBtn;
  29.             TABINFO* pTabInfo = (TABINFO*)m_ptrArray.GetAt(i);
  30.             pTabInfo->pTabButton->GetClientRect(&rcBtn);
  31.             pTabInfo->pTabButton->MoveWindow(m_nWidth*i, (rcClient.Height()-rcBtn.Height())/2, m_nWidth, m_nHeight, FALSE);
  32.         }
  33.     }
  34.     Invalidate();
  35. }

当选中标签后，鼠标移动到标签右边的时候，则会出现一个关闭按钮，用来关闭文档。所以这个里面涉及到按钮的自绘原理，这样的文章比较多，这里就不多做说明。不过俺想提个问题，对于按钮的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);
  12.     CString strTitle;
  13.     GetWindowText(strTitle);
  14.     if (m_bSel)
  15.     {
  16.         if(!m_bmpBmpBkgnd.IsNull())
  17.         {
  18.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(0,0,10, m_bmpBmpBkgnd.GetHeight()), 
  19.                 CRect(m_bmpBmpBkgnd.GetWidth()/4*2, 0, m_bmpBmpBkgnd.GetWidth()/4*2+10, m_bmpBmpBkgnd.GetHeight()));
  20.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(4,0,rcItem.right-10, m_bmpBmpBkgnd.GetHeight()), 
  21.                 CRect(m_bmpBmpBkgnd.GetWidth()/4*2+10, 0, m_bmpBmpBkgnd.GetWidth()/4*3-10, m_bmpBmpBkgnd.GetHeight()));
  22.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(rcItem.right-10,0,rcItem.right, m_bmpBmpBkgnd.GetHeight()), 
  23.                 CRect(m_bmpBmpBkgnd.GetWidth()/4*3-10, 0, m_bmpBmpBkgnd.GetWidth()/4*3, m_bmpBmpBkgnd.GetHeight()));
  24.         }
  26.         if(!m_bmpIcon.IsNull())
  27.         {
  28.             m_bmpIcon.Draw(dc.m_hDC, CRect(4, 4, 4+m_bmpIcon.GetWidth(), 4+m_bmpIcon.GetHeight()),  
  29.                 CRect(0,0,m_bmpIcon.GetWidth(), m_bmpIcon.GetHeight()));
  30.         }
  32.         CRect rcLabel;
  33.         rcLabel.left =  rcItem.left+4*2+16;
  34.         rcLabel.top  = rcItem.top;
  35.         rcLabel.right = rcItem.right -  (4*2+16);
  36.         rcLabel.bottom = rcItem.bottom;
  37.         dc.SetTextColor(RGB(0xff,0xff,0xff));
  38.         dc.DrawText(strTitle, &rcLabel, DT_SINGLELINE | DT_VCENTER | DT_WORD_ELLIPSIS);
  40.         if(m_bOverCloseButton)
  41.         {
  42.             if(!m_bmpClose.IsNull())
  43.             {
  44.                 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()), 
  45.                     CRect(m_bmpClose.GetWidth()/3, 0, m_bmpClose.GetWidth()/3*2, m_bmpClose.GetHeight()));
  46.             }
  47.         }
  48.         else
  49.         {
  50.             if(!m_bmpClose.IsNull())
  51.             {
  52.                 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()), 
  53.                     CRect(0, 0, m_bmpClose.GetWidth()/3, m_bmpClose.GetHeight()));
  54.             }
  55.         }
  56.     }
  57.     else
  58.     {
  59.         if(!m_bmpBmpBkgnd.IsNull())
  60.         {
  61.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(0,0,10, m_bmpBmpBkgnd.GetHeight()), 
  62.                 CRect(0, 0, 10, m_bmpBmpBkgnd.GetHeight()));
  63.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(10,0,rcItem.right-10, m_bmpBmpBkgnd.GetHeight()), 
  64.                 CRect(10, 0, m_bmpBmpBkgnd.GetWidth()/4-10, m_bmpBmpBkgnd.GetHeight()));
  65.             m_bmpBmpBkgnd.Draw(dc.m_hDC, CRect(rcItem.right-10,0,rcItem.right, m_bmpBmpBkgnd.GetHeight()), 
  66.                 CRect(m_bmpBmpBkgnd.GetWidth()/4-10, 0, m_bmpBmpBkgnd.GetWidth()/4, m_bmpBmpBkgnd.GetHeight()));
  67.         }
  68.     
  70.         if(!m_bmpIcon.IsNull())
  71.         {
  72.             m_bmpIcon.Draw(dc.m_hDC, CRect(4, 4, 4+m_bmpIcon.GetWidth(), 4+m_bmpIcon.GetHeight()),  
  73.                 CRect(0,0,m_bmpIcon.GetWidth(), m_bmpIcon.GetHeight()));
  74.         }
  76.         CRect rcLabel;
  77.         rcLabel.left =  rcItem.left + 4*2+16;
  78.         rcLabel.top  = rcItem.top;
  79.         rcLabel.right = rcItem.right -  (4*2+16);
  80.         rcLabel.bottom = rcItem.bottom;
  81.         dc.SetTextColor(RGB(0xff,0xff,0xff));
  82.         dc.DrawText(strTitle, &rcLabel, DT_SINGLELINE | DT_VCENTER | DT_WORD_ELLIPSIS);
  83.     }
  84.     dc.Detach();
  85. }

    值得注意的是，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. }
  19. CChildFrame*    CTabBar::GetChildFrameByTabButton(CTabButton* pTabButton)
  20. {
  21.     int nCount = m_ptrArray.GetCount();
  22.     for(int i=0; i<nCount; i++)
  23.     {
  24.         TABINFO*  pTabInfo = (TABINFO*)m_ptrArray.GetAt(i);
  25.         if(pTabInfo->pTabButton==pTabButton)
  26.         {
  27.             return pTabInfo->pChildFrame;
  28.         }
  29.         else
  30.         {
  31.             continue;
  32.         }
  33.     }
  34.     return NULL;
  35. }

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

多标签在浏览器中的实现
老毕专栏
06-05 2622
  前一段时间报选修，相信大家对学校的管理系统都很熟悉，应该也会注意到在进入系统后要点击选修课会强制弹出一个窗口，而不是在原来的基础上转接，我就想研究一下浏览器的标签功能的实现。要实现标签的功能，首先想到的应该就是SStab控件，这也是好多人都选取的。用它来做选项标签页很容易，可是用来做浏览器的标签就会很费力。sstab的每一个tab页都相当于一个容器，可以把webBrowser控件放
VFB组件：TabControl控件（多标签）
yfvb2010的专栏
12-29 312
WIN系统提供的标准控件，标签页切换。 VFB上的打开工程，就是使用这个控件，这个控件很简单，一般就是点击后，自己在事件中切换显示和隐藏其它控件即可。 常用事件，可以用第一个事件，自己写代码切换。 还有一种是自动切换页面，那么需要每个页面搞一个窗口 先新增几个子窗口 你需要多少页面，就新增几个窗口，然后选择子窗口 然后调节TAB控件合适大小，子窗口会在这个TAB内部（运行有效果，设计时看不到） 点击打开数据编辑，新增几个项目，绑定相关的窗口 测试效果，...
使用动态组件实现多标签
drawlessonsfrom的博客
05-09 126
一、实现效果 二、相关代码详情 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态组件</title> <style> div { width: 250px; } .tab-button {
CEF3 实现多标签页
10-13
CEF3 实现多标签页，简单实现网页版标签功能，超过一定长度标签时按左右箭头能实现标签切换
C# 基于谷歌Chrome内核 cefsharp web浏览器 多标签实例源码
03-07
在C#中实现多标签浏览器的关键在于管理和切换多个`ChromiumWebBrowser`实例。每个标签页对应一个`ChromiumWebBrowser`对象，用户可以在标签之间切换，加载不同的网页。 1. **创建标签页**：每当用户需要新建标签时...
易语言-精易Web浏览器 多标签例子
06-26
《易语言-精易Web浏览器 多标签例子》是一个基于易语言编程的网络浏览器示例，专注于实现网页浏览的多标签切换功能。易语言是一种面向对象的、中文编程的编程语言，旨在降低编程的难度，让更多人能参与到编程中来。...
易语言多标签浏览器
08-19
【易语言多标签浏览器】是一种基于易语言编程的浏览器应用，其主要特点是采用了多标签页的设计，便于用户在同一窗口内管理多个网页。该系统结构设计考虑了多种关键功能，包括窗口大小的限制、消息处理、事件回调机制...
易语言多标签CEF浏览器库web浏览器 支持html5网页访问
最新发布
06-09
4. **多标签浏览**：支持多标签页的浏览模式，用户可以在同一个应用程序中打开多个网页，提高用户体验。 源码和模块控件源码的提供意味着开发者可以深入理解库的工作原理，并根据需求进行定制化开发。源代码的开放...
vb.net实现多标签网页浏览器
05-07
【VB.NET实现多标签网页浏览器】是一个基于VB.NET 2008开发的应用程序，它提供了类似现代浏览器的用户体验，支持多个标签同时打开不同的网页，同时也集成了百度搜索引擎，使得用户可以直接在应用程序内部进行网络...
易语言-易语言WebKit/Chromium/CEF3多标签浏览器
06-26
底层基于(Chromium49/51)/(CEF3.2623/CEF3.2704)内核进行制作,支持系统XP,03,Vista,Win7/8/10 32/64。 技术支持: 内核: WebKit/Chromium/CEF3 (www.cefbuilds.com) 易框架: E(CEF3++) Template Library (www.ps-works.cn,交流,) PS: 关于无法播放flash问题的解决方法: 首先检查系统是否已经安装了相应版本的flash播放器,检查方法: 注册表“HKEY_LOCAL_MACHINE\SOFTWARE\Macromedia\FlashPlayerPepper\Version” 不为空即安装了相应的flash播放器,如果没有找到这个项,则表明没有安装这个版本的flash。 安装方法: 打开网站: https://get.adobe.com/flashplayer/?loc=cn 选择你的操作系统,播放器版本选择"FP 23 for Opera and Chromium - PPAPI", 注意将旁边的杀毒软件的勾取消掉,然后点击"立即下载",安装完成就可以播放flash了。
libCef开发的多标签浏览器2.0
09-03
libCef开发的多标签浏览器2.0，支持调出开发者模式，保存网页为PDF。都是查看官方代码例子做出来的。
基于cef4delphi 的 cef3内核 多标签浏览器
06-07
随便写的一个demo，需要以下支持： raize 下载地址：http://download.csdn.net/detail/bants/9861776 cef4delphi 下载地址：https://github.com/salvadordf/CEF4Delphi http://download.csdn.net/detail/bants/9862730 cef3 binaris : 32bit -> http://opensource.spotify.com/cefbuilds/cef_binary_3.3071.1634.g9cc59c8_windows32.tar.bz2 64bit -> http://opensource.spotify.com/cefbuilds/cef_binary_3.3071.1634.g9cc59c8_windows64.tar.bz2
duilib 多标签 浏览器
04-12
duilib 做的多标签浏览器 望大家批评指正
Duilib + CEF 实现多标签多页面浏览器实例
12-15
本例实现了多页面的声明周期维护，以及如何在Duilib中添加自己的cef控件，界面比较丑，大家见谅,
前端--详解浏览器工作原理之多标签页之间的通讯
weixin_44383261的博客
05-27 274
实现多页通讯主要有利用浏览器数据存储方式和服务器方式。浏览器数据存储方式主要用本地存储方式解决，也即调用localStorage、cookie等本地存储方式。服务器方式主要使用websocket（全双工通讯）技术使多页标签都监听服务器推送事件来获得其他标签页发送的数据。 浏览器存储 （1）调用localStorage 建立两个html文件，页面1： <body> <input type="" name="" id="name" value="" /> <inpu
使用Cef和Qt做一个跨平台的多标签多窗口浏览器
SLAMD_1的博客
08-31 3767
使用Cef和Qt做一个跨平台浏览器？ 提示：这篇文章主要介绍 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录使用Cef和Qt做一个跨平台浏览器？前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas
cefsharp 多标签_标签效应
weixin_39524247的博客
11-08 525
标签反应原理心理学上有一个经典名词——“标签效应”。这说的是当一个人被一个词语名称贴上标签时，他就会作出自我印象管理，使自己的行为与所贴的标签内容相一致。这种现象是由于贴上标签后面引起的，故称为“标签效应”。美国心理学家贝科尔认为：“人们一旦被贴上某种标签，就会成为标签所标定的人。”之所以会出现“标签效应”，主要是因为“标签”具有定性导向的作用，无论是“好”是“坏”，它对一个人的“个性意...
一个多标签浏览器，解决了新窗口问题
06-17
一个多标签浏览器，一个多标签浏览器，解决了新窗口问题
多标签IE6风格浏览器控件VB源码解析
使用VB6（Visual Basic 6.0）作为开发语言，这款控件能够实现丰富的浏览器操作，如打开新标签、关闭标签、前进、后退等，且具有良好的兼容性和扩展性。" 知识点详述： 1. 多标签浏览器控件概念： 多标签浏览器...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值