Blogbus模板Hack（三）

这两天事情还真多，昨晚收到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的好习惯啊，呵呵。

上面的代码已经修改，这说明还是不仔细，这个问题以前好像就遇到过。而且看来测试的还不够，不全面，为“用户”着想的也不够……该检讨，该检讨……

作者: Peng | 分类: Web设计与开发 | 发布于: 2005-11-22, 23:38:00 | 评论 (11) | Trackback (1) Tags: IE 字体广告模板 Hack

11 条评论

Super panda

2009-04-22 12:34:00

可以帮我做个末班么
猪头宝宝

2006-07-06 08:40:50

你好久没来了.

来的时候可不可以,直接帮我加在CSS.

我会感激你.

-=-

哈
猪头宝宝

2006-06-28 06:24:55

太难了,不能直接在我发的CSS加吗?

-~-
D.P. 回复猪头宝宝说：
不难不难，就在你发的CSS里加上就可以了：在<style>和</style>之间加你要加的东西。
(2006-07-23 05:30:31)
猪头宝宝

2006-06-22 06:43:59

弄了好多次

具体怎么加,帮帮我好吗

<STYLE TYPE="TEXT/CSS">

A{

color:#000000;

text-decoration:none;

}

A:visited {

color:#000000;

}

A:hover {

color:#ffffff;

}

SELECT {

BACKGROUND-COLOR: #FFFFFF;

COLOR: #000000;

FONT-FAMILY: MS Shell Dlg,Tahoma, sans-serif;

FONT-SIZE: 9pt ;

border: 0px #CCCCCC double;

}

INPUT {

color: #333333;

background-color: #FFFFFF;

border: 1px #CCCCCC double;

FONT-FAMILY: MS Shell Dlg,Tahoma, sans-serif;

FONT-SIZE: 9pt;

}

TEXTAREA {

BACKGROUND-COLOR: #FFFFFF;

COLOR: #000000;

FONT-FAMILY: MS Shell Dlg,Tahoma, sans-serif;

FONT-SIZE: 9pt ;

border: 1px #CCCCCC double;

}

OPTION {

FONT-SIZE: 9pt;

BACKGROUND-COLOR: #F3F3F3;

COLOR: #51485F;

}

FORM {

FONT-FAMILY: MS Shell Dlg,tahoma;

font-style: normal;

line-height: normal;

font-weight: normal;

}

body{

}

td,body{

font-size:9pt;

color:#000000;

font-family: Verdana,Helvetica,Arial;

}

.calendar{

background-color:#A0A0A0;

}

.week{

font-size:9px;

background-color: #DCDBDB;

}

.day{

background-color: #FFFFFF;

}

.today{

font-size:9px;

background-color:#CCCCCC

}

.time{

font-size:10px;

color: #000000;

}

.diaryTitleBg{

padding:1px;

color:#717171;

font-weight:bold;

font-size:10pt;

background-color:#FFFFFF;

}

.diaryTime{

background-color:#000000;

}

.diaryBody{

padding:4px;

border-top:solid 1px #ffffff;

border-bottom:solid 1px #ffffff;

background-color:#FFFFFF;

}

.diaryBody a:link{

text-decoration: underline;

}

.diaryBody a:visited{

text-decoration: underline;

}

.diaryBody a:hover{

text-decoration: none;

}

.diaryBody a:active{

text-decoration: underline;

}

.postBy{

padding:3px;

background-color:#ffffff;

}

.blogname{

width:750px;

text-align:left;

border-bottom:dotted 1px #c0c0c0;

font-size:14px;

}

.blogdescr{

width:750px;

text-align:left;

}

BODY {

BORDER-RIGHT: #ffffff 2px solid; BORDER-TOP: #ffffff 2px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-WEIGHT: normal; FONT-SIZE: 12px; OVERFLOW-X: hidden; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff

}

.bar{

padding:1px;

border:solid 1px #ffffff;

background-color:#FFFFFF;

color:#ffffff;

font-weight:normal;

}

.barBody{

padding:3px;

border-left:solid 1px #ffffff;

border-right:solid 1px #ffffff;

border-bottom:solid 1px #ffffff;

}

.nav{

border:solid 1px #ffffff;

text-align:left;

width:750px;

}

.cmtBody{

padding:3px;

border-top:solid 1px #ffffff;

}

.recmtBody{

padding:3px;

border-bottom:solid 1px #ffffff;

background-color:#ffffff;

}

.cmtPost{

padding:2px;

border-bottom:solid 1px #ffffff;

}

.calendar_h{

font-weight:normal;

background-color:#FFFFFF;

color:#ffffff;

font-weight:bold;

}

.c_a{

color:#ffffff;

font-weight:normal;

font-style: italic;

}

.quote{

width:80%;

background:#ffffff;

color:#ffffff;

}

</style>
D.P. 回复猪头宝宝说：
请参考我的CSS文件：http://dengpeng.name/ease/style/simpleblue/all.css
(2006-06-22 19:19:36)
猪头宝宝

2006-06-17 20:08:48

要加在哪呀?

<p style="margin-top: 0px">　</p>

<div style='width:511px;padding-left:18;FLOAT:left; height:282px'>

<div class='diaryTitleBg'>



</div>

<div class='diaryTime'>

<b><font size="2">

</font></b>

</div>

<div class='diaryBody'>



</div>

<div class='postBy'>

<a href='mailto:'></a>   <font size="2">Posted at  </font><span class='time'><font size="2">   <a href=''>Edit</a> </font></span></div>

<p>
猪头宝宝

2006-06-12 09:15:27

如何屏蔽广告,是在CSS里改吗

iframe {display: none;}

.entrytext iframe {display: none;}

具体要加在哪里呢

我试了好多次都没用

谢谢你～
D.P. 回复猪头宝宝说：
就是加在CSS中
(2006-06-19 07:27:01)
J.co

2006-06-06 15:22:01

看了Ｎ次，始终还是丈二和尚摸不清，理解力还是有限．

至于blogbus的作用，可否给我发个E-mail来讲解呢？
Joseph

2006-03-26 04:09:11

请问能否详示如何搞定广告，页面里的.js总是去不掉。
fantom

2005-11-25 10:29:44

真有意思~``
lxwj

2005-11-23 18:22:51

恩，明白了...

原先就没class...照所说的，加了个...ok了
dngpng

2005-11-23 16:44:04

那就看你的文章所在的Class是什么了，比如我的正文是由<div class="entrytext> ... </div>包起来的，所以……
lxwj

2005-11-23 09:39:01

.entrytext iframe {display: none;}]

还是没看明白...呵呵～

.entrytext换成文章所在的class？分类？

换成.diaryBody？

e.a.s.e