2009年终于又过去了，这一年我最大的事件貌似应该是毕业，读研；可是在我心里，最终选择了前端这条道路才是最重要最有意义的事，这个决定将影响我的一生。
09年的最后一周过得有点颓废，工作任务忙得差不多了，学习任务却停滞下来了。新的一年要赶紧学完手头的两本书，再买本JavaScript的大部头慢慢研究，离找工作的时间其实不远了，晚飞的笨鸟要怎么赶上前辈？只有多飞才行。
2010，come on！
2010的第一帖
Posted in 其他
Leave a comment
webkit、iframe、scrollHeight、offsetHeight的怨念
今天在实现一个iframe高度自适应的问题时遇到了一些问题，一开始用的scrollHeight获得子页面高度，在FF和IE系列中没什么问题，后来测试了webkit核心的浏览器，发现当页面内容高度没有超过浏览器显示高度时（浏览器右边不出现滚动条时）这个scrollHeight实际上和浏览器的clientHeight相等，想想的确很合理，于是改用offsetHeight。但是三种浏览器对offsetHeight的解释又有所不同，大概关系是IE>FF>>Webkit，Webkit的差距比较明显。
后来不得不采用js的webkit一个特殊的识别方法对其做hack，然后特别得增加30px，识别代码如下：
var isWebkit =
navigator.userAgent.indexOf("AppleWebKit") > -1;
JavaScript如何获取url参数
前一段用到的技术，下面是网上的代码，原理很简单，就是js的字符串处理，寻找?号后面的名值对，写下来以后备用：
[code=jscript]
function QueryGET(TheName)
{
var TheValue;
if(window.location.href.indexOf("?") == -1)
return "default";
var urlt = window.location.href.split("?");
var gets = urlt[1].split("&");
for(var i=0;i
{
var get = gets[i].split("=");
if(get[0] == TheName)
{
TheValue = get[1];
break;
}
}
return TheValue;
}
[/code]
近期项目总结
今天基本完成了实验室的项目报告网站的主要功能：用户登录，项目日志等等。本来是打算用asp来写的，可是在xp上搭iis搭了半天都没成功，于是一气之下就用php写了一个。由于网站的临时展示性质，没有使用数据库，而是将用户和项目日志等数据保存在服务器的xml文件中，学了很多xml的相关操作，很有意思。网站主要使用了jquery和php的技术。界面如下：
主要实现的功能有
1.右侧导航条的弹下弹出效果(jquery的slipup slipdown)
2.右下角的主题颜色切换效果，也是jquery！（真强大啊真强大）
3.项目日志的xml添加(php readfile)，读取(javasript)，删除(php dom)。
项目日志的xml结构：日志标题，日志内容，发布日期，发布作者，时间戳（好似数据库表中的主键，主要用来唯一标识日志，以便删除的时候定位。）
4.登录的session判断。
5.其他细节。
今天工作总结
今天主要完成了两件事：
1.实现了网页界面主色调的cookie管理，选择色调以后再刷新不会回到初始颜色上了。主要使用了jquery的一个cookie插件。使用下面的方法读取和写入cookie。
mycolor = $.cookie("color");
$.cookie("color",mycolor);
2、在前面设计的基础上实现了iframe的设计，这样可以减少页面重复载入的过程，两个版本下一步看情况采用。
今晚还碰到了一个及其郁闷的问题。在ie6下突然发现一个原来写的js函数出问题了，弹出错误窗口，其他浏览器都没有问题。但是我查看了一下代码，没有任何问题，百思不得其解。后来照着代码我重新打了一遍（没有打注释），运行成功。。。我发誓代码一模一样。
Posted in 本人动态
Leave a comment
ie6的absolute定位bug
今天在设定几个绝对定位的元素出现问题，本来将元素的position设为absolute后定位，元素会参照最近的一个position为relative的祖先元素（如没有，则参照body）来定位，可是IE6下的位置却十分离谱。
百度之：
position:absolute定位在IE6下存在left和bottom的定位错误问题。
解决办法有两种：1、给父层设置zoom:1触发layout。 2、给父层设置宽度（width）。
IE6中很多Bug都可以通过触发layout得到解决，以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。下列的CSS属性或取值会让一个元素获得layout：
position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题
float:left|right 由于layout元素的特性，浮动模型会有很多怪异的表现
display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它，这也可能也是这个CSS属性的唯一效果----让某个元素有layout
width: 除auto外的任何值
height: 除auto外的任何值
zoom: 除auto外的任何值
一个无耻的简单老问题，用户名和密码
我们常常需要写一个小小的登录表单，像以下这样的样式：
好了，现在出现一个完美主义者问题，这两个输入框前面的文字不怎么对齐啊。我们很快发现原来用户名是三个字，而密码是两个字，怎么办？基本上只有一个解决办法，把密码弄成三个字那么宽，那么就得在密码中加入空格，很快就可以有下面这个版本：
不过好像一个空格不够宽，下面是两个空格的版本：
没有变化啊！原来多余的空格会被浏览器trim掉。我们试试＆ｎｂｓｐ吧。
好像还是有问题，特别是在ie6/ie7下。
最后在网上查到一种方法，就是切换你的输入法，在密码中输入全角空格。试试：
行了，对得很齐，这种方法适用于各主流浏览器。当然，如果你说css的字间距或是表格排版能解决也没问题，不过都需要更多的代码来解决。什么？！你一直使用“账号”“密码”，当我没说吧！
纯css无js动态菜单效果
这几天在读HTML XHTML CSS基础教程（第六版），不愧是经典教材，里面提供了很多经典实用的好技术。其中就包括这个用纯css实现的动态菜单效果。
看这个代码：
<ul>
<li>菜单项
<ul>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
</ul>
以上是一段采用ul-li内嵌ul-li的形式组成的html结构，先将子菜单隐藏，然后利用li伪类:hover对其作用，写如下的css代码：
ul li ul
{
display:none;/*子菜单隐藏*/
}
ul li:hover ul
{
display:block;/*当鼠标经过菜单项时，子菜单显示*/
}
上面的注释解释了原理。可以点击这里查看示例
不过这种方法无法使用在IE6/7下，因为IE6/7中“只对于a元素支持:hover。这真是一种浪费！”（引用书里的原话），需要加入js才可以实现类似的效果。