DHTML设计VC界面《四》- TabCtrl标签栏

 

 

DHtml中的TabCtrl模拟比toolbar模拟简单得多

也就是简单的CSS即可实现

本文使用了3个css来实现

 .tab_current
 {
  cursor:hand;
 border-bottom:1px solid #406DB0;
    font:normal 9px 'Trebuchet MS','Arial';

  height:23px;
  padding:2px 6px 0 6px;
  line-height:19px;
  text-align:center;
  color:#ffffff;
}
 .tab_normal
 {
  cursor:hand;
    font:normal 9px 'Trebuchet MS','Arial';

  height:23px;
  padding:2px 6px 0 6px;
  line-height:19px;
  text-align:center;
  border-bottom: 1px solid #CAE2FD;
  color:#aeaeae;
 }
 .tab_hover
 {
  cursor:hand;
 border-bottom:1px solid #CAE2FD;
    font:normal 9px 'Trebuchet MS','Arial';

  height:23px;
  padding:2px 6px 0 6px;
  line-height:19px;
  text-align:center;
  color:#ffffff;
 }

 

函数集

 

 int m_currentTab;
 void AddTabElem(CString text,CString title,int id);
 void ClearTabElem();
 void SwitchTabElem(int id);
 int  GetTabElemCount();

2. int CDHtmlUIDemoDlg::GetTabElemCount()
3. {
4.     cHtmlTable tb(this->GetElem("tbTab"));
5.     if(!tb.Valid()||tb.GetRowCount()<=0)
6.         return 0;
7.     return tb.GetRow(0).GetCellCount();
8. }
9. void CDHtmlUIDemoDlg::AddTabElem(CString text,CString title,int id)
10. {
11.     cHtmlTable tb(this->GetElem("tbTab"));
12.     if(!tb.Valid())
13.         return;
14.     cHtmlTableRow tr(0);
15.     if(tb.GetRowCount()<=0)
16.         tr = tb.InsertRow(-1,0);
17.     else
18.         tr = tb.GetRow(0);
19.     CString css;
20.     if(tr.GetCellCount()==0)
21.         css = "tab1";
22.     else
23.         css = "tab2";
24.     cHtmlTableCell tc = tr.InsertColumn(-1);
25.     tc.mi_Elem->put_className(css.AllocSysString());
26.     stringstream ss;
27.     ss << "<div id='tabelem_" << id << "' class='tab_normal'>" << text << "</div>";
28.     tc.SetInnerHtml(ss.str().c_str());
29. }
30. void CDHtmlUIDemoDlg::ClearTabElem()
31. {
32.     cHtmlTable tb(this->GetElem("tbTab"));
33.     if(!tb.Valid())
34.         return;
35.     if(tb.GetRowCount()>0)
36.         tb.GetRow(0).Remove();
37. }
38. void CDHtmlUIDemoDlg::SwitchTabElem(int id)
39. {
40.     char sid[100];
41.     sprintf_s(sid,sizeof(sid),"tabelem_%d",id);
42.     cHtmlElement elem = this->GetElem(sid);
43.     if(elem.Valid())
44.     {
45.         elem.mi_Elem->put_className(CString("tab_current").AllocSysString());
46.     }
47.     if(this->m_currentTab>=0)
48.     {
49.         sprintf_s(sid,sizeof(sid),"tabelem_%d",this->m_currentTab);
50.         cHtmlElement elem = this->GetElem(sid);
51.         if(elem.Valid())
52.             elem.mi_Elem->put_className(CString("tab_normal").AllocSysString());
53.     }
54.     this->m_currentTab = id;
55. }

添加标签的代码

 this->AddTabElem("标签1","我的标签1",TAB_1);
 this->AddTabElem("标签2","我的标签2",TAB_2);
 this->SwitchTabElem(TAB_2);

由于只是演示而已，所以只要标签添加的函数，并没有标签管理的函数，读者可以自行添加。

处理事件也很简单，使用DHTML_EVENT_CLASS+CSS即可

2. BEGIN_DHTML_EVENT_MAP(CDHtmlUIDemoDlg)
3.     DHTML_EVENT_CLASS(DISPID_HTMLELEMENTEVENTS_ONMOUSEOVER, _T("tab_normal"),  OnMouseOverTab)
4.     DHTML_EVENT_CLASS(DISPID_HTMLELEMENTEVENTS_ONMOUSEOUT, _T("tab_hover"),  OnMouseOutTab)
5.     DHTML_EVENT_CLASS(DISPID_HTMLELEMENTEVENTS_ONCLICK, _T("tab_hover"),  OnClickTab)
6. END_DHTML_EVENT_MAP()
9. HRESULT CDHtmlUIDemoDlg::OnMouseOverTab(IHTMLElement *phtmlElement)
10. {
11.     phtmlElement->put_className(CString("tab_hover").AllocSysString());
12.     return S_OK; 
13. }
14. HRESULT CDHtmlUIDemoDlg::OnClickTab(IHTMLElement *phtmlElement)
15. {
16.     BSTR bstr;
17.     phtmlElement->get_id(&bstr);
18.     string sid = (LPCTSTR)CString(bstr);
19.     int pos = sid.find('_');
20.     int id = atoi(sid.substr(pos+1,sid.length()-pos-1).c_str());
21.     CString fmt;
22.     fmt.Format("Tab ID:%d click",id);
23.     AfxMessageBox(fmt);
24.     this->SwitchTabElem(id);
25.     return S_OK;
26. }
28. HRESULT CDHtmlUIDemoDlg::OnMouseOutTab(IHTMLElement *phtmlElement)
29. {
30.     phtmlElement->put_className(CString("tab_normal").AllocSysString());
31.     return S_OK;
32. }