这段时间做分页组件，其中很多地方使用了Ajax提交。但实际中经常出现，在页码输入框中输入页码后按下回车，嵌在外层的表单被提交的情况。于是上网搜索了一番，总结了表单提交的几种情况：
- 点击以下几种按钮：input type=”submit”、button type=”button”和input type=”image”会提交表单。其中不带type的button，FF默认其为submit按钮，而IE则为button按钮
- 脚本控制提交
- 回车键提交表单，分为以下几种情况
- 表单里有submit类按钮
- 表单里只有一个input type=”text”输入框（此时只要有按钮，都会提交表单）。要解决这个问题，可以加一个display:none的输入框（经测试，chrome5下该方法无效）
近期的一个项目中，要使用到一个圆形的透明背景，为了实现这个要求，我将这张透明背景导出为png24格式的图片。在初步的测试中，取得了很完美的效果，没有锯齿。
但是IE6对png的支持是有限的，不支持png24的alpha透明（IE6支持png8的索引透明）。随后找到了一个很方便的解决方法：通过AlphaImageLoader滤镜来使之透明。语法如下：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
这个滤镜的作用是：在对象容器边界内，在对象背景和内容之间显示一张图片。其中，src是必选项，指定背景图像的地址sizingMethod指定图片在容器边界内的显示方式（crop、scale和默认值image）。
在IE6使用这个技巧后，达到了透明的效果。但是引发了另一个问题：无法与用户交互了（比如输入、按钮控件）等。我这里使用的办法是将背景应用到一个不承载交互行为的元素上，通过定位的方式使之显示在我需要的位置上。
完整的代码在这里：
1 2 3 | background:url(moon.png) no-repeat; _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=moon.png); |
demo请点击这里。
要想用好一款软件，掌握其常用的快捷键是必须的。之前使用IrfanView的时候，由于对其快捷键不甚明了，一些操作做起来十分地难受。比如把图片缩放到100%，比如使图片适合窗口，比如使窗口适合图片。后来用了一段时间的Picasa Photo View，但这款软件只适合于看图，并不适合于做些图片处理方面相关的工作，于是又重新回到IrfanView的怀抱。现在把IrfanView的常用快捷键整理一番，记录如下：
+ 放大
- 缩小
space 下一张
backspace 上一张
enter 全屏/窗口切换
f 切换图片适合窗口/客串适合图片ctrl+h 原始大小（亦可通过f完成）
l 左旋转图片
r 右旋转图片
h 水平翻转图片
v 垂直翻转图片
前几天写了这么一段代码：
1 2 3 4 5 6 7 8 9 10 11 12 | <style type="text/css"> a{ display:inline-block; margin-left:150px; width:150px; height:35px; text-indent:-9999em; background: (btn.png); } </style> <div><a>下一步</a></div> |
考察各浏览器对inlink-block的支持情况，结果如下：
- IE6-7，以及兼容模式下的IE8：不完全支持。只对默认具有inline布局的元素有效
- IE8、FF3.0+、Safari、Chrome、Opera：支持
这样看来，上面给出的代码应该能完美地运行在目前主流的浏览器上。但测试的结果不是这样的，在IE6－7以及兼容模式下的IE8下，按钮所在的位置一片空白，但可以看出它已经占据了页面上的某一位置。
问题出在text-indent属性上，测试结果表明：
- text-indent为负时，元素向左偏移
- text-indent为正时，元素向右偏移
在这种情况下，元素的偏移量由text-indent和margin的值决定，比如：
margin-left:-10px;text-indent:10px;
相当于：
margin-left:0;text-indent:0；
元素没有偏移，那么解决之道是？
一个简单的解决方案是在IE6、7下不要用inline-block了，比如这样设置
display:inline-block !important;display:block;
IE6、7不认识important。这样IE6、7下会显示一个块级元素，而其他浏览器则显示为inline-block元素；
这次问题是出在inline-block和text-indent相遇了，那么这样的问题是否会出现在其他元素上呢？考察元素的默认样式，可知：input、select、button、textarea的默认display皆为inline-block。那么简单地考察下button的表现，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style type="text/css"> div{ border:4px solid blue; } button{ width:100px; height:24px; border:medium none; background:red; text-indent:20px; text-align:left; padding:0; } </style> <div><button>我是按钮</button></div> |
结果如下图：
可见，在IE6－7下inline-block与text-indent的相遇是一件多么囧的事情啊。
通过快捷键”u”可以切换google reader到全屏模式，但这个的全屏模式也仅仅是将导航部分（包含订阅的列表部分）隐藏掉而已，实际上真正的阅读面积并没有扩大多少。我希望中的“全屏模式”应该是这个样子的：
- 没有google的链接、登录信息吊顶；
- 没有google reader的logo，搜索框移到其他位置上
- 整个订阅的阅读部分的面积尽可以地大
根据这个要求，在网上找了下，发现了这个可能吧博主写的 Jason Ng’s Google Reader Optimized，试用后发现它在google reader的全屏模式下有些问题，一些元素存在重叠现象。于是自己重新写了个油猴脚本，这个脚本很简单，重置了一些样式罢了。我写的效果是这样的：
这段脚本我放在了userscripts上，地址是：http://userscripts.org/scripts/show/77959。
使用方法很简单，chrome的话直接点击安装即可，firefox则需要安装一个油猴的扩展：GreaseMonkey。opera的话可以直接将以下样式保存成css文件，然后在站点首选项-显示中设定我的样式表为该文件：
1 2 3 4 5 6 | #gbar,#guser,#logo-container,.gbh,#chrome-view-links{display:none} #search{left:auto;right:4px;top:1px;} #main{top:0;height:100%;} #viewer-footer{display:none; } #viewer-top-controls{padding:0 3px;} #chrome-header{padding:3px 11px;} |
greasemoney真是个好东西！
Update 2010.07.04
对#main增加了height:100%的定义，使之能全屏显示
在IE6-7中对父容器使用overflow:hidden，然后在子元素中使用：position:relative时会产生这么一个bug，父容器的overflow失效了。代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 | #container{ height:300px; overflow:hidden; background:#333;color:#b20000; } #container p{ position:relative; height:180px; border:10px solid #b20000; border-width:10px 0; text-indent:2em; margin:0;padding:0; } |
在IE6-7下的效果如下：
从图中可以清楚地看到，ie6下overflow:hidden并没有生效。点击这里可查看demo。
修复这个问题的方法很简单，给父容器一个position:relative。
如果不了解vim编辑器，可以点击这里查阅维基百科上的介绍。vim的学习曲线比较陡峭，它和editplus、notepad++等编辑器不同，在这里鼠标不起太多的作用，主要的操作通过命令来完成的。在这里我总结在开发中使用vim的经验。
vim里可以把多个命令互相组合，从而达到神奇的效果。一般地还可以在命令前加上数字，以表明重复执行。帮助系统在vim里十分强大，遇到不清楚的命令可以通过“help -命令”来查看相应的帮助内容。无事时也可读读帮助里的内容
打开文件：
- :cd 进入目录
- :e 打开文件
- :tabnew 在新的标签页打开文件，其中 :tabp转到上一个标签页，:tabn转到下一个标签页 :tabr 转到第一个标签页 :tabl 转到最后一个标签页 :tabc 关闭当前标签页
- :w 保存文件
基本移动：
- 小幅移动：h、j、k、l控制光标向左、上、下、右移动
- 单词移动：e移到到当前单词结尾处，E移动到当前字串结尾处；b移动到上一单词词首，而B则移动到上一个字串首；w移动到下一个单词首，W移动到下一个字串首。关于单词和字串的区别：单词是通过’skeyword’选项中的字符来确定的，而字串则是以空白字符来确定的。
- 行内移动：0到达行首，^到达行的第一个非空白字符处，$到达行未，还有一个g_命令，其功能似与$相同。空格移动下一个字符
- 回车移到下一行，+移到下一行开头，-移到上一行开头
- 4j将向下跳4次（即下跳4行），效果和直接按下4再敲回车一致
- 段落移动：{和}，节间移动：[和]
- 其他：
- H到达当前窗口首行，M到达当前窗口中间行，L到达当前窗口底部。如果在H、L之前加上数字，比如3L，则是到达距底部3行处，3M则是到达距底部3行处
- ctrl+f，ctrl+b以全屏向下、向上滚动，ctrl+d、ctrl+u以半屏向下、向上滚动
- N%，到达N%行处，比如共有200行，则10%将到达第20行；而10G，则将到达第10行；G将到达最后一行；gg到达第一行
- \’.跳到最后修改的那一行，`.跳到最后的修改点。这条很有用
- Ctrl+O 沿着跳转记录向回跳，Ctrl+I则是向前跳。:ju可以列出跳转的足迹
- {},[],()此类匹配间的移动:%
- 通过搜索来移动：
- /searchWord，比如/var，将向下查找var这个匹配。如果要向上搜索，则使用?。在多个搜索结果间移动使用n(下一个匹配)和N（前一个匹配）。如果是/var/e，则将停留在匹配处的最后一个单词上，/var/e+2则将停留在匹配处最后一个单词的下两个字符处。注意搜索支持正则表达式
- *向下搜索与当前光标处单词匹配项，而#则是向上
- 用于当前行的f、F命令。比如fa，将向后搜索a的匹配，而F则是向前。3fa则表示向后搜索第三个a的匹配
编辑
- a附加，A行末附加。比如当前行的内容是“uxcod.inf”,此时光标在d处，键入命令ae，则内容将会变成“uxcode.inf”，光标停留在e处，再键盘Ao，则内容将变成“uxcode.info”
- s删除当前字符并插入，S删除当前行并插入
- x删除当前字符，而X删除前一个字符，相当于退格键
- d删除命令，D删除至行末，dd删除当前行,dG删除至文件尾
- c修改字符，C修改至行末。c命令要与其他命令配合使用，如cfa，修改到下一个a出现的地方（相当于删除然后转入编辑模式）
- r替换字符，R进行替换模式。进入替换模式后，将根据输入逐个替换字符
- y复制，Y行复制
- p粘贴（在当前字符后），P粘贴（在当前字符前）
- i进入编辑模式，I到行首插入
- J合并两行
- >> 缩进，<<反缩进
- = 自动格式化，如想对全文进行格式化，则是gg=G，把这命令分解一下：1、gg转到文件首；2、=执行自动格式化；3、G执行到文件尾，有意思吧
- guu行小写，gUU行大写，g~~行大小写翻转（~是大小写翻转的意思）。如果要把当前单词转为小写，则执行bgue，依此类推
- ddp交换两行,xp交换两个字符。因为删除后的内容会放到寄存器里，而粘贴会从寄存器里取内容
- 替换命令:[range]s/被替换的内容/替换的内容/[flags]。这个替换命令内容很多…这里就不讲了，基本的如:%s/ab/cd/g 将整个文件里的ab替换成cd，而:s/ab/cd/g将当前行所有的ab替换成cd
- u撤销上一次操作，U撤销对本行的所有修改。Ctrl+R则是恢复上一次操作
一些命令收集
比如这样的结构：
function fun(a,b,c)
此时光标在第一行b字符处，如果想删除括号内的”a,b,c”，方便的做法是:di)。如果想改写，则可以使用:ci)。依此类推，可用的还有}、”、’、]等，这个操作对多行内容亦有效。
aw、aW、iw、iW、as、is、ap等命令，详情见：VIM中的文本对象（text-objects）
插件
- zen coding for vim 这个插件对于前端开发者十分方便，它可以帮助更快速地编写html、css文件
- matchit 更方便地在配对处跳转
- surround 方便地操作诸如”"、”这类的结构，可以很好地插入、改写、删除这样的结构，比如把abc改写”abc”
- mru 列出最近操作的文件
- 其他…
配置文件
更新记录
创建于2010年4月24日
感谢郭嘉，我终于再次开通了博客。上一次是在去年的11月未，当时的域名是royalar.cn，不久这个域名阵亡于cn域名备案事件中了。当时为了博客先后买了两个空间，第一个空间如今用于SSH，速度颇快，用之甚爽；第二个空间则服务于博客。
现今我就职于快乐淘宝，UED、前端开发工程师，工作地点在杭州，到现在已有一个月了。上一份工作是在厦门一公司担任程序工程师，很奇怪的名字，这个职位一般是称为开发工程师吧。在这家公司里，做过项目开发，也就是开发信息管理这类的系统，后面又转去做软件开发，搞的是dephi的软件开发，但这些与自己的兴趣存在着相当大的偏差，于是慢慢地动了重新找工作的心思。今年的三月份，年后回公司上班，坚定了想法。随即开始定向投简历，得到了淘宝的面试机会，而后来到了杭州，来到了淘宝，最后定格于快乐淘宝。
这个博客还是使用wordpress构建，主题基于titan修改而成。在我设想的效果里是有一些头部和尾部的背景图片的。头部是月亮外加ET外星人，而尾部则是海滩椰子树，但抠了两棵椰子树后，我最终放弃了。目前我在PS上的功能实在是弱得很，在来淘宝之前，我只会用PS简单地加工下图片，连切图的经历都未曾有过。还好这里有专业的视觉设计师，可以设想在不久的将来，咳..在提高PS的能力后，这个主题将会充实起来。主题中使用的图标来自于20 Free Marker-Style Icons，这种风格的图标我很喜欢，简单清晰。同样为了节省工作量，很多效果采用css来构建，这样不来IE下看起来很戳，建议使用Firefox、Chrome、Opera（10.5以上版本）之类的浏览器，它们能让你获得更好的浏览体验。
我将在这个博客里与大家分享UED工作中的心得与体会，分享生活工作中的感悟和快乐。thanks!