程序博客网 > php手册下载

DHTML设计VC界面《三》- Toolbar工具栏

来源：互联网 发布：php手册下载 编辑：程序博客网 时间：2024/05/17 01:10

 

 要用DHtml实现工具栏，有几个工具栏的特性要实现

1.Tooltip 鼠标移到按钮上要有提示出现，这个比较简单，HTML元素里面的title即可实现；

2.分隔栏，这个嘛也不难，做一个分隔栏的背景图做<td>即可，demo/res/splite.png即这个资源文件

3.按钮变灰，这个可以用css控制来实现

4.按钮的xp浮动效果，正常平板显示，鼠标移上按钮凸出，鼠标移开按钮凹下，这个也是需要用css来实现，后文具体交代

5.按钮的点击事件处理，这个一般有2种方法，一种是使用

DHTML_EVENT_CLASS配合css名称完成，一种是处理PreTranslateMessage事件，本文采用第二种方式，后文具体交代为什么不采用第一种方式。

 

 

基本函数集

 VARIANT m_vtEventHover;//鼠标hover事件预设
 VARIANT m_vtEventOut;//鼠标out事件预设
 VARIANT m_vtEventNull;//鼠标null事件预设
 int GetToolbarElemCount();
 int GetToolbarElemID(int index);
 void AddToolbarElem(CString img,CString text,CString title,int id,BOOL enable=TRUE);
 void EnableToolbarElem(int id,BOOL enable=TRUE);
 BOOL GetToolbarEnable(int id);
 void ClearToolbarElem();
 BOOL GetToolbarElemEnable(int id);
 

  1. int CDHtmlUIDemoDlg::GetToolbarElemCount()
  2. {
  3.     cHtmlTable tb(this->GetElem("tbToolbar"));
  4.     if(!tb.Valid()||tb.GetRowCount()<=0)
  5.         return 0;
  6.     return tb.GetRow(0).GetCellCount();
  7. }
  8. int CDHtmlUIDemoDlg::GetToolbarElemID(int index)
  9. {
  10.     cHtmlTable tb(this->GetElem("tbToolbar"));
  11.     if(!tb.Valid()||tb.GetRowCount()<=0)
  12.         return 0;
  13.     cHtmlTableRow tr = tb.GetRow(0);
  14.     if(index<0||index>=tr.GetCellCount())
  15.         return 0;
  16.     BSTR bstr;
  17.     tr.GetCell(index).mi_Elem->get_id(&bstr);
  18.     string sid = (LPCTSTR)CString(bstr);
  19.     int len = sid.rfind('_');
  20.     return atoi(sid.substr(len+1,sid.length()-len-1).c_str());
  21. }
  23. BOOL CDHtmlUIDemoDlg::GetToolbarElemEnable(int id)
  24. {
  25.     CString tid;
  26.     tid.Format("toolbar_%d",id);
  27.     cHtmlElement elem = this->GetElem(tid);
  28.     if(!elem.Valid())
  29.         return FALSE;
  30.     return atoi(elem.GetAttribute("bar"));
  31. }
  33. void CDHtmlUIDemoDlg::AddToolbarElem(CString img,CString text,CString title,int id,BOOL enable)
  34. {
  35.     CString tid;
  36.     tid.Format("toolbar_%d",id);
  37.     cHtmlElement e = this->GetElem(tid);
  38.     if(e.Valid())
  39.         return;
  40.     string s_img = img;
  41.     _replace(s_img,"/","//");
  42.     char path[_MAX_PATH];
  43.     sprintf_s(path,sizeof(path),"file:///%s%s",QueryExePath().c_str(),s_img.c_str());
  44.     s_img = path;
  45.     cHtmlTable tb(GetElem("tbToolbar"));
  46.     if(!tb.Valid())
  47.         return;
  48.     cHtmlTableRow tr(0);
  49.     if(tb.GetRowCount()<=0)
  50.         tr = tb.InsertRow(-1,0);
  51.     else
  52.         tr = tb.GetRow(0);
  53.     cHtmlTableCell tc = tr.InsertCell(-1);
  54.     if(id==0)
  55.     {
  56.         char path[_MAX_PATH];
  57.         sprintf_s(path,sizeof(path),"file:///%sres//splite.png",QueryExePath().c_str());
  58.         stringstream ss;
  59.         ss << "<img src='" << path << "' border=0>";
  60.         tc.SetInnerHtml(ss.str().c_str());
  61.     }
  62.     else
  63.     {
  64.         tc.mi_Elem->put_title(title.AllocSysString());
  66.         CString sid;
  67.         sid.Format("toolbar_%d",id);
  68.         tc.mi_Elem->put_id(sid.AllocSysString());
  70.         stringstream ss;
  71.         ss << "<table  width=68 height=64 parent=" << sid << ">";
  72.         ss << "<tr><td align=center parent=" << sid << ">";
  73.             ss << "<img src='" << s_img << "' parent=" << sid << ">";
  74.         ss << "</td></tr>";
  75.         ss << "<tr><td align=center parent=" << sid << ">";
  76.             ss << "<span parent=" << sid << ">" << text << "</span>";
  77.         ss << "</td></tr>";
  78.         ss << "</table>";
  79.         tc.SetInnerHtml(ss.str().c_str());
  81.         this->EnableToolbarElem(id,enable);
  82.     }
  83. }
  84. void CDHtmlUIDemoDlg::ClearToolbarElem()
  85. {
  86.     cHtmlTable tb(GetElem("tbToolbar"));
  87.     if(!tb.Valid())
  88.         return;
  89.     if(tb.GetRowCount()>0)
  90.         tb.GetRow(0).Remove();
  91. }
  94. void CDHtmlUIDemoDlg::EnableToolbarElem(int id,BOOL enable)
  95. {
  96.     CString tid;
  97.     tid.Format("toolbar_%d",id);
  98.     cHtmlElement elem = this->GetElem(tid);
  99.     if(!elem.Valid())
  100.         return;
  101.     if(enable)
  102.     {
  103.         elem.mi_Elem->put_className(CString("td_normal").AllocSysString());
  104.         elem.mi_Elem->put_onmouseover(this->m_vtEventHover);
  105.         elem.mi_Elem->put_onmouseout(this->m_vtEventOut);
  106.         elem.SetAttribute("bar",1);
  107.     }
  108.     else
  109.     {
  110.         elem.mi_Elem->put_className(CString("td_gray").AllocSysString());
  111.         elem.mi_Elem->put_onmouseover(this->m_vtEventNull);
  112.         elem.mi_Elem->put_onmouseout(this->m_vtEventNull);
  113.         elem.SetAttribute("bar",0);
  114.     }
  115. }

1. 按钮添加

    注意添加按钮的操作要放在OnNavigateComplete里面，而不能放在OnInitDialog里。

#define ID_ADD 1000
#define ID_START 1001
#define ID_STOP 1002
#define ID_DELETE 1003
this->AddToolbarElem("res/add.gif","添加","添加新文件",ID_ADD);
 this->AddToolbarElem("","","",0);//分隔符
 this->AddToolbarElem("res/start.gif","开始","开始工作",ID_START);
 this->AddToolbarElem("res/stop.gif","停止","停止工作",ID_STOP);
 this->AddToolbarElem("res/delete.gif","删除","删除单元",ID_DELETE,FALSE);

 

2.分隔符

 this->AddToolbarElem("","","",0)，将ID设置为0就可以加入一个分隔符

 具体代码里面可以看到

  1.     if(id==0)
  2.     {
  3.         char path[_MAX_PATH];
  4.         sprintf_s(path,sizeof(path),"file:///%sres//splite.png",QueryExePath().c_str());
  5.         stringstream ss;
  6.         ss << "<img src='" << path << "' border=0>";
  7.         tc.SetInnerHtml(ss.str().c_str());
  8.     }

就是添加一个<image src=res/splite.png>

 

3.按钮变灰

this->AddToolbarElem("res/delete.gif","删除","删除单元",ID_DELETE,FALSE);

函数最后一个参数置为FALSE就是变灰，实际就是控制cssName为tb_grey

 


 4. xp按钮浮动效果

 javascript高手都知道，用Html的Table可以模仿出一个Window按钮，而通过重载onmouseover和onmouseout2个事件加以一定的css控制就可以完全模拟出浮动效果

本文的浮动效果原理就是这样，常规时table的css为tb_normal，onmouserover时修改css为tb_hover,onmouserout时修改回tb_normal

 

原理是这样，但是要完美的实现并不是那么简单。

javascript的事件处理，我们在DHtml初始化的时候可以简单的写<tb onmouseover="this.className=aaa">，但是如果要在程序运行时去修改这个onmouseover就不那么简单了，因为对于DHtml来说，只要初始化以后，系统内部就把这个事件解释成一个VARIANT对象了，再修改时使用简单的SetInnerHtml是修改不了的，必须也是针对VARIANT对象，搜搜Google可以看到有专栏文章介绍在VC里面怎么为javascript的事件创建VARIANT。本文为了简单用了一个偷懒的方法，就是在html里面人工创建一个事件母体

<div id="eventSet" onmouseover="this.className='td_hover'" onmouseout="this.className='td_normal'" onmousedown=""></div>
然后在初始化的时候把这些事件存储到m_vtEventHover,m_vtEventOut,m_vtEventNull中

 

  1. void CDHtmlUIDemoDlg::EnableToolbarElem(int id,BOOL enable)
  2. {
  3.     CString tid;
  4.     tid.Format("toolbar_%d",id);
  5.     cHtmlElement elem = this->GetElem(tid);
  6.     if(!elem.Valid())
  7.         return;
  8.     if(enable)
  9.     {
  10.         elem.mi_Elem->put_className(CString("td_normal").AllocSysString());
  11.         elem.mi_Elem->put_onmouseover(this->m_vtEventHover);
  12.         elem.mi_Elem->put_onmouseout(this->m_vtEventOut);
  13.         elem.SetAttribute("bar",1);
  14.     }
  15.     else
  16.     {
  17.         elem.mi_Elem->put_className(CString("td_gray").AllocSysString());
  18.         elem.mi_Elem->put_onmouseover(this->m_vtEventNull);
  19.         elem.mi_Elem->put_onmouseout(this->m_vtEventNull);
  20.         elem.SetAttribute("bar",0);
  21.     }
  22. }

看看上面的代码，就知道这3个变量的作用了

 

5. 按钮事件处理

  常规的DHtml事件处理都是通过DHTML_EVENT_CLASS + css 或者 DHTML_EVENT_ONCLICK + id 实现，本文不做具体介绍，但是由于我们的按钮是<td>元素里面的内嵌<table>,通过测试发现，这种混合型的table,使用DHTML_EVENT_CLASS 并不能有效的监控到按钮区域的完全点击，也就是说有些区域点到了，事件并不触发。

   所以作者使用了更加原始的PreTranslateMessage来处理这个问题

    DHtml的PreTranslateMessage能做很多事情，例如屏蔽鼠标右键等等，这里我们只处理左键点击

 

  1. BOOL CDHtmlUIDemoDlg::PreTranslateMessage(MSG* pMsg)
  2. {
  3.     if(pMsg->message==WM_LBUTTONUP)
  4.     {
  5.         CPoint point(pMsg->pt);
  6.         ScreenToClient(&point);
  7.         IHTMLElement* pElement=NULL;
  8.         this->m_spHtmlDoc->elementFromPoint(point.x,point.y,&pElement);
  9.         if(pElement)
  10.         {
  11.             cHtmlElement elem(pElement);
  12.             if(elem.Valid())
  13.             {
  14.                 BSTR b;
  15.                 elem.mi_Elem->get_id(&b);
  16.                 CString id(b);
  17.                 string pid = elem.GetAttribute("parent");
  18.                 if(pid.empty())
  19.                 {
  20.                     CComPtr<IHTMLElement> parent;
  21.                     elem.mi_Elem->get_parentElement(&parent);
  22.                     cHtmlElement eParent(parent);
  23.                     pid = elem.GetAttribute("parent");
  24.                 }
  25.                 if(!pid.empty())
  26.                 {
  27.                     cHtmlElement elem = this->GetElem(pid.c_str());
  28.                     BOOL bar = atoi(elem.GetAttribute("bar"));
  29.                     if(bar)
  30.                     {                       
  31.                         int len = pid.rfind('_');
  32.                         int id = atoi(pid.substr(len+1,pid.length()-len-1).c_str());
  33.                         CString fmt;
  34.                         fmt.Format("Toolbar ID %d Clicked",id);
  35.                         AfxMessageBox(fmt);
  36.                     }
  37.                 }
  38.             }
  39.         }
  40.         return CDHtmlDialog::PreTranslateMessage(pMsg);
  41.     }
  42.     return CDHtmlDialog::PreTranslateMessage(pMsg);
  43. }

 
php手册下载 php手册下载
原创粉丝点击
热门IT博客
怎么设置软件锁怎么设置软件锁
商品标签制作软件商品标签制作软件
淘宝扣满12分怎么办
最优化理论与应用
淘宝卖家最严重的报复
htc htl21数据连接断开
网络女主播招聘
淘宝网天猫超市批发
淘宝装修自定义源代码
js 变量的长度
java saas 开源框架
梦幻西游生死决数据
软件行业优惠政策
淘宝偷换宝贝怎么举报
电脑桌面整理软件
godaddy域名赎回后解析
中小学图书馆软件下载
吃月饼猜9字网络流行语
解放军纪律知乎
北京知天地 刘杰 电话
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 如何判断东西半球 怎么判断东西半球 如何划分东西半球 宁贵人热依扎露半球 骑马与砍杀16世纪北半球 中国在南半球还是北半球 半神文明 半神领主 半神 半神之境 半神下载 半神半藏 4个半神 半神 魔兽 半神都有谁 综漫半神 半神她超刚超凶 炫舞时代半神 三国之半神血统 鸿都门学 半神之境 刘阿八 半神中文版下载 半神修改器下载 天泽纪 归海半神 铸星龙王是半神还是真神 神之墓地3.04半神 神之墓地怎么转半神 半筝 半饭 半糖主义 半糖主义舞蹈 半糖 少糖和半糖哪个多 半糖主义舞蹈教程 半糖bykda 半糖系女团 半糖主义歌词 半糖主义什么意思 蛋糕忌廉半糖popo 半糖主义奶茶 半糖主义简谱 花糖

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里