2007年9月4日星期二

做点Cookie真是不容易...

设置字号那类的功能,如果不能记忆的话,其实几乎就没用了
所以cookie是早晚需要加上的功能

不过说实话,这个绝对属于way out of my league的事情,死磕了一个下午,解决了一堆完全不明白是怎么回事的问题,现在总算是有个可以接受的结果了,唉~~~你说怎么当个白痴都这么难呢

与平时一样,这次也有参考Keel's blog,其实基本的代码里面已经都给了,但饶是如此,我还是折腾了好几个小时...看来需要去弄张iq卡充值一下了

我暂时还只作了全局字号调整的cookie----正文字号调整应该是差不多的,能遇到的sx问题应该都已经遇到了----至少我希望是如此。方法大致如下

Step 1



加入三个跟实用Cookie有关的基本函数
<script type='text/javascript'>
//跟cookie有关的函数


/*
checkCookie()这个函数在页面加载的时候就执行,
其目的就是判断当前是否存在cookie保存的信息,如果没有,就实用默认参数;
达成这个目的使用到了getCookie函数,
*/
checkCookie();

function checkCookie()
{

startSz=getCookie('startSz_cookie');
if (startSz==null){
startSz=3;//默认字号为medium,index=3
}
startSz=startSz % 7;

document.writeln("<style type=\"text/css\">body {font-size:"+szs[startSz]+";}</style>");

}
/*
setCookie函数就起到保存信息的作用,里面包含了三个参数:
c_name用来指定是保存名为什么的cookie,并依据这个名称来做以后的调用
value就是这个cookie实际要保存的值
sepiredays是设置过期的时间,
在这里它还做了一个判断,如果不写这个过期的时间就表示不进行保存
*/
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate);
}
/*
这就是对现有cookie做判断的函数,为null就返回一个null,
不为null就返回指定cookie的值
*/
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end));
}
}
return null
}
</script>

这里的set/getCookie分别是用来存取cookie的,checkCookie用来在页面初始化的时候读取设置,当然,其中会用到getCookie函数

Step 2



对前面的设置字号的函数作了一些简化----和原来本质上是一样的,只是重写了一下,并且加入了setCookie函数

function setTextSize(sz){
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;

if (!document.getElementById) return;
var trgt="body";
var d = document,cEl = null;
/*if ( !( cEl = d.getElementById( trgt ) ) )*/ cEl = d.getElementsByTagName( trgt )[ 0 ];

cEl.style.fontSize = szs[ sz ];
setCookie('startSz_cookie',sz+7,365);
startSz=sz;
}

这个函数现在是直接设置字号(以前的textresize函数是用增量法设置)
所以相应的把按钮的链接也改一下,类似这样
javascript:setTextSize(startSz+1)

Step 3


前面提到过,如果希望这个字号变化对某一模块生效,该模块的所有字号设置就需要实用相对方式定义。那么相对的,如果是不希望字号变化的区域,就最好给一个绝对的字号。在我这里这个问题特别明显:在header里面我其实是没有使用任何文字的,在更改字号的时候就没有必要去刷新这个区域的东西,所以我在ccs里面加入了
#header-wrapper {
font-size: small;
}

#header{
font-size: small;
}


基本上就是如此了,效果嘛,可以测试,我在ie和ff下面都看过,个人感觉还算满意。

需要说明的几点:
1.貌似在body里面onhold checkCookie()的方式在ie下是可用的,但是在ff下面有问题;所以用了比较直接的方法;
2.在checkCookie函数里面好像不能用setTextSize设置字号,所以只好用了document.writeln---可以相应的把body里面关于font-size设置的内容删掉,反正会被覆盖。
3.在存字号startSz的时候作了一个+7的操作,然后在取出来的时候做了%7.这是实验出来的,不这样作貌似会出一些问题。至于具体原因,我也不知道,估计是超界这类的问题,但是由于很多函数的具体定义其实我都是不知道的,没有办法深究原因

0 comments: