逸·Ease

来源: BlogBus 原始链接: http://ease.blogbus.com:80/logs/2005/11/t1623784.html 存档链接: https://web.archive.org/web/20060211092025id_/http://ease.blogbus.com:80/logs/2005/11/t1623784.html 作者: Deng Peng

Blogbus模板Hack（三） 2005-11-22, by dngpng 字体大小: 小 | 中 | 大 这两天事情还真多，昨晚收到Stuttgart大学来的邮件通知我被录取了，接着发现Blog被Bus的工作人员 表扬了一下 ，今天下午考交规，又顺顺利利的，虽然没考100，但98也不错啊……行了，先入正题，把我的Hack系列写完吧。 Hack No. 6: 为IE扩展:hover的使用范围 众所周知，IE这个东西有许多毛病，比如它在CSS中只承认a标签的伪类:hover，其它的元素，一概不支持。而:hover是一个很有用的东西，运用它可以解决许多元素（如表单/表格等）的onMouseover特效。而像:focus这种伪类，在IE中就更别想使用了。 我的模板中运用以上伪类的有这样几个地方： 表单的输入框（:focus）和按钮（:hover和:focus）； 如果有导航菜单，其Li元素（:hover） 下面开始对付IE。先构造一个函数initInput，用来完成表单元素的伪类模拟： function initInput(){ if(document.all&&document.getElementById){ inputGroup = document.getElementsByTagName('INPUT'); taGroup = document.getElementsByTagName('TEXTAREA'); i=inputGroup.length; j=taGroup.length; while(i--){ node1=inputGroup[i]; if (node1.className=="textfield"){ node1.onfocus=function(){this.className+="-focus";} node1.onblur=function(){this.className=this.className.replace("-focus","");} } if(node1.className=="button"){ node1.onmouseover=function(){this.className+="-over";} node1.onmouseout=function(){this.className=this.className.replace("-over","");} } } while(j--){ node2=taGroup[j]; if (node2.className=="textfield"){ node2.onfocus=function(){this.className+="-focus";} node2.onblur=function(){this.className=this.className.replace("-focus","");} } } } } 我把所有的文字输入的input都加上叫textfield的Class，而按钮的Class是button，然后遍历input（当然还有Textarea），遇到Class为textfield或button的，在它们onfocus时修改其Class，附加上-focus字符串，onblur时再删除这些字符。如果是button，还要考虑onMouseover和onMouseout的情况。 处理LI元素也大同小异，只不过我把它和别的功能合到一个函数里去了，代码见 Hack 2 。 有了这些额外的Class，就可以通过简单的CSS，来容易的控制这些元素在onfocus, onblur, onmouseover及onmouseout时的行为和表现了。 唉，费了这么半天劲，还是因为该死的IE！ Hack No. 7: 字体大小控制及记忆 字体大小控制最初是从 悬翎 那里学来的，函数里其实就是一句 function setFontSize(size){ if (document.getElementById) document.getElementById("logtext").style.fontSize=size; } 当然，正文部分要加上ID：logtext。然后在控制大小的链接上调用这个函数，如 setFontSize("12px") 之类的。 在记忆方面，还是利用 Hack No.5 中的Cookie读写函数，组合一个 initFontSzie() 函数放在window.onload里，另在window.onunload里往cookie中记录最新的文字大小的选择（最后这块我没写成函数，直接在window.onunload里写了，写成一函数比如叫 createFontSize 倒也不是不行）。 initFontSize()如下： function initFontSize(){ if (document.getElementsByTagName("BODY")[0].className != "index"){ var cookie = readCookie("fontsize"); var size = cookie ? cookie : "12px"; setFontSize(size); } } 最后的window.onload和window.onunload是这个样子： window.onload = function(){ initMenu(); initInput(); initCmtList(); initFontSize(); generateSwitcher(); } window.onunload = function(e) { var title = getActiveStyle(); createCookie("style", title, 365); if(document.getElementById && document.getElementsByTagName("BODY")[0].className != "index"){ var size = document.getElementById("logtext").style.fontSize; createCookie("fontsize", size, 365); } } Hack No. 8: 隐藏广告 广告这东西，本身我倒是不反对，毕竟是免费的东西，你不能不让人家再放点广告吧。但是bus的广告嵌入有点不厚道啊，不仅在广告周围加了一圈的table、tr、td，最后还加附了几个br，整个布局和效果就被这些玩艺生生的破坏了。搞掉广告其实很简单： iframe {display: none;} 就可以了，顶多加个限制 .entrytext iframe {display: none;} 最麻烦的是那些表格，我暂时用 .entrytext table {display: none;} 来对付，但这只建立在我Blog内容不涉及表格的前提下，不然，有用的表格也被隐藏了。 至于BR，只好也先用 .entrytext br {display: none;} .entrytext * br {display: inline;} 来搞定。 这些也都是些不是办法的办法，希望Bus的代码能够早一天变规范，也省得我费力在这些没有意义的东西上。 Update 2005-11-28: 经过横戈大侠的指点，发现提交评论的按钮在IE里工作异常，其实是IE在onfocus时认为也同时属于onmouseover情况，而我在脚本中忘记这种情况了，于是当你按下按钮时它的class会由.button变成.button-over-focus或者.button-focus-over，而这两个东西我是都没有在CSS中设定过的，于是按钮就被“打回原型”，飞到了左边，出现躲避鼠标的现在，因而也就不能被按下，评论也就不能被提交了……真是，看来给我评论的几位都有不使用IE的好习惯啊，呵呵。 上面的代码已经修改，这说明还是不仔细，这个问题以前好像就遇到过。而且看来测试的还不够，不全面，为“用户”着想的也不够……该检讨，该检讨…… Technorati Tags: IE , :hover , :focus , 字体大小 , 广告 , Web设计 , 模板 , Hack 发布于: 23:38:00 | 分类: WEB设计 | 评论(4) | Edit 将本文加入在线书签: del.icio.us | Furl | 365key Trackback URL: http://www.blogbus.com/public/tb.php/1623784 以下Blog引用了本文 如果你使用Firefox浏览器访问本站，那么在单篇汇整的页面（即评论页面）下会发现正文部分已经被分成纵向的两栏了，就像许多印刷品那样。因为我自己曾经很容易在阅读很长的一行文字后走神，所以我想实现这种分栏效果已经很久了。 今天上了一下很久未去的A List Apart，在这篇题为Introducing the CSS3 Multi-Column Module的文章里正好提到了在现有条件下实现分栏效果的方法，而且作者的理由很充分：计算机的屏幕宽度往往比其高度更大（宽屏更是如此），因此屏幕的纵向显示空间是一种稀缺资源，网页应有效利用成本相对更低的横向空间，呵呵。飞猪在他的《C》第二版形象广告中也引用了一个有趣的报告： 道琼斯公司进行的调研显示，身处网络时代的读者由于经常面对电脑屏幕，已经形成了“小尺寸内阅读”的习惯。 为了实现这一效果，不得不按照逸·Ease提到的模版Hack方法把把blogbus的广告去掉了。其实blogbus的广告很有意思，只可惜代码太不规范了。用bus的朋友可以去逸·Ease看看，除了站点本身的设计很值得借鉴之外，上面的模版Hack也是好用的很。 对模版的一些小改动 from iqwolf:痕, 2006-01-18 15:43:41