学习笔记：会员管理页面的交互效果

做了一个多月的项目总算快结束了。一个网站的开发到了后期总是很无趣的，不仅有视觉疲劳，而且每天都只能做一些修修补补的事情，没有新想法、没有新挑战，从早到晚都要盯着密密麻麻的JS代码/CSS代码——改代码比写代码要痛苦多了……反正，做这类事情让人很容易疲劳……还会让人没力气写BLOG……

最近被经理调出来做下一个项目的前期工作，今天做了一个会员管理的页面，用来给客户做演示，“会员管理”听上去就只是那种无趣的后台页面，不过经理要求加入一些富客户端技术，因为是web2.0网站嘛-___-b ，于是我便正好借这个机会练习一下:

这是今天完工的半成品，接下来还要用Ajax在页面里显示会员列表、字母查询等，把添加、删除、编辑、查询、帮助等功能都做在一个页面里，另外，还要连接一个很复杂的数据库……不过目前的页面里已经实现了几种交互功能。在这里记录一下几个问题：

查看全文!

做了一个多月的项目总算快结束了。一个网站的开发到了后期总是很无趣的，不仅有视觉疲劳，而且每天都只能做一些修修补补的事情，没有新想法、没有新挑战，从早到晚都要盯着密密麻麻的JS代码/CSS代码——改代码比写代码要痛苦多了……反正，做这类事情让人很容易疲劳……还会让人没力气写BLOG……

最近被经理调出来做下一个项目的前期工作，今天做了一个会员管理的页面，用来给客户做演示，“会员管理”听上去就只是那种无趣的后台页面，不过经理要求加入一些富客户端技术，因为是web2.0网站嘛-___-b ，于是我便正好借此机会练习一下:



这是今天完工的半成品，接下来还要用Ajax在页面里显示会员列表、字母查询等，把添加、删除、编辑、查询、帮助等功能都做在一个页面里，另外，还要连接一个很复杂的数据库……不过目前的页面里已经实现了几种交互功能。在这里记录一下几个问题：

首先是布局中遇到的问题，为了适应高分辨率，整体上是采用固定宽度（868px），居中用“margin-left:auto;margin-right:auto;”，顶部工具栏是自适应宽度，但是在低分辨率下（浏览器宽度小于868px），顶部工具栏不能撑满整个网页，而是始终跟浏览器的宽度一样（因为body的100%是以浏览器窗体为边界），给工具栏的外部容器设定固定宽度就不能适应高分辨率，让外部容器的宽度自适应又不能兼容低分辨率……这个问题不知道有没有解决办法……

在css2.1标准下没有通过W3C的校验，出问题的是：

opacity:0.7——属于css3，只有firefox 1.5+和opera9+支持，要兼容IE必须用滤镜filter:alpha(opacity=70);
overflow-y:hidden——这个属性很早就有了，IE6能实现，但W3C把它移到了css3盒模型里
*html .headbar ul——这种hack无法通过校验，而且不兼容IE7（在IE7里要用 *+html），所以我把兼容IE的样式放到了条件注释里：

<!--[if lte IE 6]>
<link href="forie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

修改之后可以通过css3的校验。

在交互方面，本来是想做一些类似flickr里编辑照片标题的效果，但最后仍然变成了YY风格 XD

每项信息都呈现在一个“BOX”里，onclick事件会让这个“BOX”改变样式，显示出文本输入框，最开始我把“保存”的函数放在文本输入框的onblur事件里，后来发现这样问题很多，如果用户在修改信息后直接点击其他“BOX”会同时触发两个事件，如果点击速度太快，IE里的页面会闪动，如果用户连续点击同一个“BOX”，也会出问题……所以后来删掉了这个事件，改成了一个专门的SAVE按钮。

左边栏里做了一个更新提示框（纯属尝试，暂时不管它是否有利于改善用户体验），每次点击BOX时，都在提示框里创建一个新的DIV，直接把这一栏的标题文字作为DIV的ID。取出标题文字时遇到了浏览器兼容的问题，比如这样一个元素：<span>标题文本</span>，用obj来代表span对应的节点对象，IE里可以用obj.innerText获得标题文本，而firefox不支持innerText，要用obj.childNodes.item(0).textContent这样的写法。

标题文字的末尾都带有冒号，用text.substr(0,ajaxboxid.length-1)可以取出文本的第1至倒数第2个字符，删掉冒号。

因为可修改信息的“BOX”很多，无法用ID来查找操作对象，所以经常要从触发事件的元素出发查找其他节点，这里遇到一个问题，HTML代码里的空格、换行，都会被视做TEXT节点，但IE里会自动过滤这些节点，所以为了兼容各浏览器，寻找某个节点时不能逐级的用childNodes、nextSibling之类的东西来操作，而必须要用循环来遍历每一级的所有节点，判断节点的类型，方法是用nodeType，它的值是数字，HTML元素节点是1，属性值是2，文本节点是3……

印象比较深的就是这些……