仿 Office 2003 的工具条

【 tulaoshi.com - Javascript 】

工作之余做了这个小东西
仿Office 2003的工具条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用Css和Javascript做的
菜单就不做了，偷懒中

感兴趣的朋友可以和我联系，大家交流交流．运行代码框
<html<head<meta http-equiv="Content-Language" content="zh-cn"<meta http-equiv="Content-Type" content="text/html; charset=gb2312"<title仿Office 2003的工具条</title<script/*----------舜子制作Menu Javascript Made by PuterJamE-mail:puterjam@etang.com-------------*/ var listnum=0; var menu_height; var menu_width; var menu_left; var menu_top; var topMar = 1; var leftMar = -2; var space = 1; var isvisible;function listbox(listname,buttonname,valuename){this.listname=listnamethis.buttonname=buttonnamethis.valuename=valuename}function listaction(obj,action,showlist,scroll,tw){num=obj.id.charAt(obj.id.length-1)if (!scroll) {scroll=0}if (!tw) {tw=105}listbox=eval(lb[num].listname)listbutton=eval(lb[num].buttonname)listvalue=eval(lb[num].valuename)switch (action) { case 0: listbox.className="getlist";listbutton.className="listover" break; case 1: if (listbox.gf=="0") {listbox.className="lostlist";listbutton.className="menubar"} break; case 2: for (i=0;i<lb.length;i++) { if (num!=i.toString()){ nlistbox=eval(lb[i].listname) nlistbutton=eval(lb[i].buttonname) nlistvalue=eval(lb[i].valuename) nlistbox.className="lostlist";nlistbutton.className="menubar" nlistbox.gf="0" } } ShowMenu(listbox,showlist,tw,scroll);listbox.className="getlist";listbox.gf="1" listnum=num; break; }}function HideMenu() { var mX; var mY; var vDiv; var mDiv;if (isvisible == true){vDiv = document.all("listDiv");mX = window.event.clientX + document.body.scrollLeft;mY = window.event.clientY + document.body.scrollTop;if ((mX < parseInt(vDiv.style.left)) || (mX parseInt(vDiv.style.left)+vDiv.offsetWidth) || (mY < parseInt(vDiv.style.top)-menu_height) || (mY parseInt(vDiv.style.top)+vDiv.offsetHeight)) {vDiv.style.visibility = "hidden";isvisible = false;}}if (isvisible==false){ for (i=0;i<lb.length;i++) { listbox=eval(lb[i].listname) listbutton=eval(lb[i].buttonname) listvalue=eval(lb[i].valuename) listbox.className="lostlist";listbutton.className="menubar" listbox.gf="0" }}}function ShowMenu(obj,vMnuCode,tWidth,scroll) {vMnuCode = "<table id='submenu' cellspacing=0 cellpadding=0 bgcolor=#ffffff border=0 style='width:"+tWidth + ";border-collapse: collapse' class='listDiv'<tr height=23<td nowrap align=left" + vMnuCode + "</td</tr</table";menu_height = obj.offsetHeight;menu_width = obj.offsetWidth;menu_left = obj.offsetLeft + leftMar+2;menu_top = obj.offsetTop + topMar + menu_height + space-3;vParent = obj.offsetParent;while (vParent.tagName.toUpperCase() != "BODY"){menu_left += vParent.offsetLeft;menu_top += vParent.offsetTop;vParent = vParent.offsetParent;}listDiv.innerHTML = vMnuCode;listDiv.style.top = menu_top;listDiv.style.left = menu_left;if (scroll==0) {listDiv.style.overflow="visible";listDiv.style.width=tWidth}else {listDiv.style.overflow="scroll";listDiv.style.width=tWidth+18}listDiv.style.visibility = "visible";var cssopaction=submenu.filters[0].opacitysubmenu.filters[0].opacity=0; submenu.filters.Apply(); submenu.filters[0].opacity=100; submenu.filters.Play(); isvisible = true;}function menuitem(lightcolor,normalcolor,icon,title,url){this.lightcolor=lightcolorthis.normalcolor=normalcolorthis.icon=iconthis.title=titlethis.url=url}function bulidmenu(arrayname){var menuarray=eval(arrayname)menucontent='<table border="0" width="100%"'for (i=0;i<menuarray.length;i++){if (menuarray[i].title!="_line"){if (menuarray[i].url!="_disable"){css="getitem"}else{css="lostitem"}if (menuarray[i].icon.length==0){content='<table cellspacing="0" cellpadding="0"<tr<td style="text-indent:4px" class="'+css+'"'+menuarray[i].title+'</td</t </div> <p style="color:#333;margin:10px 0;">来源:http://www.tulaoshi.com/n/20160129/1483553.html</p> </div> <div id="tls-pages" class="tls-pages"></div> <ul class="pages-two"> <li class="pages-two-item"> <span>上一篇：</span> <a href="/n/20160129/1483552.html">禁止右键、Ctrl键和复制功能的JS代码</a> </li> <li class="pages-two-item"> <span>下一篇：</span> <a href="/n/20160129/1483554.html">《讨鬼传 极》关于锁镰无限天岩户配魂方法介绍</a> </li> </ul> </div> </div> <div class="contain-left read-more"> <p class="inter-tit rel"> <a href="javascript:;">看过《仿 Office 2003 的工具条》的人还看了以下文章</a> <a href="/diannao/" class="C_hs_nr_111_a">更多>></a> </p> <ul class="read-list clearfix style-circle"> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1482768.html">仿Office 2003的工具条</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1483553.html">仿 Office 2003 的工具条</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1615776.html">真彩工具条</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1506383.html">赶走office中烦人的嵌入式工具条</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1626977.html">VC制作真彩工具条</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1483483.html">Javascript制作浮动的工具条</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160215/1562152.html">《征途2》庄园工具条</a> <span class="fr">02-15</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1484323.html">如何定制浮动工具条</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1484594.html">可以显示多行文字的工具条</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1482610.html">javascript制作浮动的工具条</a> <span class="fr">01-29</span> </li> </ul> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner2_780')</script></div> <div class="contain-left site-output"><script>tls.output.www_news('banner3_780')</script></div> <div class="vertical-tab-box contain-left"> <div class="recommend-tit clearfix"> <div class="recommend-tit-cont">延伸阅读</div> </div> <div class="lx-news-box"> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1484261.html">让工具条显示256色图像</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160129/1484261.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201601/29/e349e764d7a6f0113c77239e996ea73b_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/cyuyanjiaocheng/" target="_blank">C语言教程</a> <a href="http://www.tulaoshi.com/cyuyanhanshu/" target="_blank">C语言函数</a> </div> <div class="ks-news-desc"> 如何让工具条显示256色图像 编译：hangwire 下载范例源代码 问题：    论坛中有很多人提出：基于Windows的程序如资源管理器（Explorer.exe），IE等都能显示出漂亮的工具栏图像和图标。但是，用MFC开发的应用程序一般都只能显示16色的工具栏图像和列表视图（如CListView）图像，...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner4_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1484338.html">如何实现24位色工具条</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160129/1484338.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201601/29/a35b162bcfcddaa3ae5766af29d9f81b_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/cyuyanjiaocheng/" target="_blank">C语言教程</a> <a href="http://www.tulaoshi.com/cyuyanhanshu/" target="_blank">C语言函数</a> </div> <div class="ks-news-desc"> 如何实现24位色工具条 作者/NorthTibet 下载源代码 大家知道IE的工具条都是多彩的，本文介绍如何在自己的应用程序里实现24位色工具条。如图一所示： 图一  第一步： 在mainframe.h文件中声明成员变量： CToolBar m_ho...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1484515.html">如何去掉浮动工具条中的“关闭”按钮</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160129/1484515.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201601/29/0daa722d68798d0e84c8e8166f9193fd_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/cyuyanjiaocheng/" target="_blank">C语言教程</a> <a href="http://www.tulaoshi.com/cyuyanhanshu/" target="_blank">C语言函数</a> </div> <div class="ks-news-desc"> 如何去掉浮动工具条中的“关闭”按钮 作者/NorthTibet 下载源代码     在C++/MFC框架应用程序里，当浮动工具条被拖离主窗口后，一般都有一个“关闭”按钮，如图一所示： 图一      本来这个按钮完全是按照Windows应用程序的UI设计规范而设计...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner5_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1507561.html">如何赶走烦人的嵌入式工具条</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160129/1507561.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201601/29/3455ff25b2f92980aae97b2b006d3349_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/bangongruanjian/" target="_blank">办公软件</a> </div> <div class="ks-news-desc"> 嵌入式工具条困扰着喜欢尝试新软件的朋友们。大家请看图1，这是一个Word2003软件的界面截图，在图中可以清楚地看到Word原本不多的编辑区正在被这些“不请自来的客人”肆意地侵蚀着。 在这里之所以称其为“不请自来”是因为每当安装这些软件时，它们都会自作主张地将自己的快捷工具条嵌入到常用软件中，也正是这些对我们没什么用的工...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1615812.html">如何嵌入（Docking）一个工具条</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1615812.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/a5706884bda53c8858eec80250b6609d_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/bianchengyuyan/" target="_blank">编程语言</a> <a href="http://www.tulaoshi.com/wangluobiancheng/" target="_blank">网络编程</a> </div> <div class="ks-news-desc"> 如何嵌入（Docking）一个工具条(How To Docking A Toolbar EnableDocking(CBRS_ALIGN_ANY); // Initialize dialog bar m_wndQuickConnect if (!m_wndQuickConnect.Create(this, IDD_QUICKCONNECT,//IDD_QUICKCONNECT is a toolbar </div> </div> </div> <div class="news-more-btn"> <a class="btn btn-block btn-default" title="查看更多精彩" href="/diannao/">查看更多精彩>></a> </div> </div> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner6_780')</script></div> </div> <!--width 300--> <div class="conter_300"> <div class="contain-right site-output"><script>tls.output.www_news('right1_300')</script></div> <div class="Member clearfix"> <div class="Menber_tx_1 rel"> <a href="/user/free闪亮理想/1/"> <img class="member-img" src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" width="70" height="70" alt="free闪亮理想"> </a> <a href="/user/free闪亮理想/1/" id="username">free闪亮理想</a> </div> <div class="Menber_tx_ww"> <div class="Menter_tx_ww_1"> <p>经验教程</p> <a href="/user/free闪亮理想/1/">45</a> </div> <div class="Menter_tx_ww_1 right_j"> <p>收藏</p> <a href="/user/free闪亮理想/2/">49</a> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right2_300')</script></div> <!--最新文章、热门文章--> <div class="hop_gg clearfix js-tab"> <div class="hop_gg_s clearfix tab_control2"> <a class="js-tab-item active" href="javascript:;">最新文章</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active"> <ul> <li><a href="http://www.tulaoshi.com/n/20160129/1483552.html">禁止右键、Ctrl键和复制功能的JS代码</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483551.html">AutoCAD三维建模教程：打造一个逼真的篮球</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483550.html">HTML语言剖析（八）表单标记</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483549.html">AutoCAD三维建模教程：再创篮球新画法</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483548.html">AutoCAD教程：三维弹簧球的画法</a></li> </ul> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right3_300')</script></div> <div class="hop_gg clearfix js-tab newest-msg"> <div class="hop_gg_s clearfix"> <a href="javascript:;" class="js-tab-item active" >Javascript</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active" > <ul class="news-list mt5 has-ad-list"> <li class="news-list-item"> <span class="range-type">01</span> <a href="http://www.tulaoshi.com/n/20160129/1483586.html">弹出网页窗口全攻略</a> </li> <li class="news-list-item"> <span class="range-type">02</span> <a href="http://www.tulaoshi.com/n/20160129/1483555.html">鼠标右键显隐效果</a> </li> <li class="news-list-item"> <span class="range-type">03</span> <a href="http://www.tulaoshi.com/n/20160129/1483553.html">仿 Office 2003 的工具条</a> </li> <li class="news-list-item"> <span class="range-type">04</span> <a href="http://www.tulaoshi.com/n/20160129/1483552.html">禁止右键、Ctrl键和复制功能的JS代码</a> </li> </ul> </div> </div> <div class="site-output"><script>tls.output.www_news('right4_300')</script></div> </div> <div class="fixed-right"> <div class="hop_gg clearfix"> <h3>精华推荐</h3> <div class="jinghua-list"> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1608673.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/71b7adbc998a623d2375b257ccbb12e3_thumb_189.jpg" alt="如何让工具条显示256色图像"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160219/1608673.html">如何让工具条显示256色图像</a> </p> <p class="jinghua-item-tag">wxh607lbwt6rah</p> </dd> </dl> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1595095.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/920d59b04cb8c5216ce7d8595c52b78a_thumb_189.jpg" alt="js+css实现的仿office2003界面"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160219/1595095.html">js+css实现的仿office2003界面</a> </p> <p class="jinghua-item-tag">earth王瑞玲</p> </dd> </dl> <div class="site-output"><script>tls.output.www_news('right5_300')</script></div> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1612363.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/be2c74f52447b02304e87b908ba12db1_thumb_189.jpg" alt="用VB制作IE工具条自定义按钮"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160219/1612363.html">用VB制作IE工具条自定义按钮</a> </p> <p class="jinghua-item-tag">执念终需了</p> </dd> </dl> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right6_300')</script></div> <!--百科推荐--> <div class="hop_gg clearfix"> <h3>热门标签</h3> <div class="hot-tag-box-item"> <a class="hot-tag col_7" href="http://www.tulaoshi.com/office/" title="office">office</a> <a class="hot-tag col_2" href="http://www.tulaoshi.com/huazhuanggongju/" title="化妆工具">化妆工具</a> <a class="hot-tag col_2" href="http://www.tulaoshi.com/weiyanggongju/" title="喂养工具">喂养工具</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/fangzhuang/" title="仿妆">仿妆</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/wpsaofficejiaocheng/" title="wps office教程">wps office教程</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/shangzhuanggongju/" title="上妆工具">上妆工具</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/gongjupeijian/" title="工具配件">工具配件</a> <a class="hot-tag col_2" href="http://www.tulaoshi.com/webgongju/" title="WEB工具">WEB工具</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/dizhuanggongju/" title="底妆工具">底妆工具</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/fushigongju/" title="辅食工具">辅食工具</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/meijiagongju/" title="美甲工具">美甲工具</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/dingzhuanggongju/" title="定妆工具">定妆工具</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/kaifagongju/" title="开发工具">开发工具</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/fangshaizhuang/" title="仿晒妆">仿晒妆</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/liaotiangongju/" title="聊天工具">聊天工具</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/xuanyafangzhuang/" title="泫雅仿妆">泫雅仿妆</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/jiekefangzhuangjiaoxue/" title="杰克仿妆教学">杰克仿妆教学</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/qingjiegongjujianbihua/" title="清洁工具简笔画">清洁工具简笔画</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/chuxuezhejichuhuazhuanggongju/" title="初学者基础化妆工具">初学者基础化妆工具</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/laodonggongjujianbihua/" title="劳动工具简笔画">劳动工具简笔画</a> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right0_300')</script></div> </div> </div> <div class="float_bottom js-share-box" id="fixbottom"> <div class="float_bot_1"> <a href="javascript:;" class="icon-share icon-share71" id="weixin_show_btn"></a> <img src="https://pan.baidu.com/share/qrcode?w=150&h=150&url=http://m.tulaoshi.com/n/20160129/1483553.html" style="right:0;left:0;top:-130px;display:none; border:1px solid #e5e5e5; background:#fff; padding:10px; width:100px" id="weixin_show"> </div> <a href="javascript:;" class="icon-share icon-share11 js-share-weibo">微博分享</a> <a href="javascript:;" class="icon-share icon-share21 js-share-qq">QQ分享</a> <a href="javascript:;" class="icon-share icon-share31 js-share-qzone">QQ空间</a> <a href="http://m.tulaoshi.com/n/20160129/1483553.html" class="icon-share icon-share41">手机页面</a> <a href="javascript:;" class="icon-share icon-share51" id="fav_site_btn" data-url="http://www.tulaoshi.com/n/20160129/1483553.html">收藏网站</a> <a href="javascript:;" class="icon-share icon-share61" id="totop">回到头部</a> </div> <div class="c_xins" style="display:none;"> <a href="http://m.tulaoshi.com/n/20160129/1483553.html"> 仿 Office 2003 的工具条 移动版</a> </div> </div> <!--footer底部--> <script type="text/javascript">tls.output.show_foot();</script> <!-- 尾部 --> <!--www_news PC内容页面--> <script src="http://static.tulaoshi.com/js/pc_show.min.js"></script> </body> </html>