jCuteForm插件，针对单选、多选、下拉框的一个替代美化插件。jCuteForm实际上是3个插件的组合，可以分别拿出来使用，它们是： jRadio, jCheckbox, jSelect。
而且不同于其他一些美化插件的工作原理，是对现有的<radio />,<select />等标签进行拆解，内容再封装，生成div模拟的方式，外观定制有些繁琐，而且比较难调控。本插件跳过这几步，依旧遵循ToFishes系列插件结构，表现，行为相分离的原则，结构自定（提供的Demo使用em，a等标签，只是需要一些class等给插件提供参考点，即使是这些class也可以自定），外观由前端人员根据结构自定预先写好，之后调用jCuteForm实现功能。
今天给一个同事简单讲如何去把一个psd效果图实现为一个html网页。很自然的就总结出了自己是如何过来的。
应该是水到渠成了吧。从3年多前开始由 阿捷 （可惜无缘其人）的《XHTML+CSS经典重构教程》入门，很感谢他对w3c标准的推广，以致于偶从一个dw表格布局都不熟悉，直接开始了手写XHTML+css的路程。
而js方面也是，当偶2年前知道jQuery的时候，以致于偶从一个js不熟悉的情况下，直接用jQuery实现了很棒的效果。
前端暂时应该还没有大学专业课程学习的吧。而偶的成长完全是在工作中大量实践、应用起来的。
因此，偶深深的觉得：没有不会的，只有不用的。工作是最好的学习课堂。不会很多东西没关系，只要能跟随工作的需要一步步提高就行了。
学习css和jQuery，一是《XHTML+CSS经典重构教程》+CSS手册，二是来源于网络的jQuery15天教程+jQuery手册。由此，偶另外的一个经验就是：知道如何用，知道啥能用。
偶然被同事引发的研究（他在做一个透明背景，问了偶），如何设置透明背景。貌似游戏类网站最多这种应用。
透明背景可以是纯色，也可以是背景图，偶只用纯色测试了。
大概思路：由于透明会继承到子元素，从而不能达到满意效果，故写一个冗余标签p，设置背景透明，然后将其绝对定位，并置于内容层之下，达到背景透明的目的。
RT…
安逸啊，安逸！很符合Nature的感觉。。不过，这个图也够大的了（这个vps限流量的，在未知的情况下，还是少点流量的好）
看图：
发布了jTabView插件，看着代码好像很复杂，原理却很简单，其他的功能都是围绕这个做的扩展。
如果不需要那么复杂的功能，用起来倒是杀鸡用牛刀了，而且代码也不简洁。以下就是核心实现代码，做了一个简单tab插件。
/* 简单选项卡插件 */
;(function($){
$.fn.TabSimple = function(c){
c = $.extend({
tab: ".s-tab", //标题项
con: ".s-con", //内容项
curr: "curr", //当前高亮的css类名
event: "click" //触发的事件，jQuery所支持的所有事件
},c);
return this.each(function(){
var tab = $(this).find(c.tab);
var con = $(this).find(c.con);
tab.bind(c.event, function(){
var i = tab.index($(this));
tab.removeClass(c.curr); //或tab.find("." + c.curr).removeClass(c.curr)
$(this).addClass(c.curr);
con.hide().eq(i).show();
});
});
};
})(jQuery);
HTML结构自定义了，跟ToFishes系列jQuery插件 – jTabView选项卡式浏览所述一致。
2010-10-14，Release Update V2：
;(function($){
$.fn.jTabSimple = function(c){
c = $.extend({
tab: ".tabs li", //标题项
con: ".tab-con", //内容项
curr: "curr", //当前高亮的css类名
index: 1, //默认显示的tab
remote: false, //远程加载
loading: null, //自定义loading的提示html片段
event: "click" //触发的事件，jQuery所支持的所有事件
},c);
return this.each(function(){
var tab = $(this).find(c.tab);
var con = $(this).find(c.con);
var index = tab.index(tab.filter("." + c.curr)) + 1;
if(index == 0)
index = c.index;
tab.bind(c.event, function(){
var i = tab.index($(this));
return toggle(i);
});
function toggle(i){
tab.removeClass(c.curr).eq(i).addClass(c.curr);
if(c.remote){
var loading = c.loading || '<div class="loading"></div>';
con.html(loading);
$.get(tab.eq(i).find("a").attr("href"), function(ret){
con.html(ret);
});
return false;
} else {
con.hide().eq(i).show();
}
};
toggle(index - 1);
});
};
})(jQuery);
这个插件相对来说灵活性一般，而且js对html有些地方侵入操作，工作中针对UI效果图开发的。
看下截图：
因为灵活性不高，除非对css比较熟悉，所以这里放出完整的html结构，css样式定义。
早在工作中，写一些图片列表时候就有的这种感觉。怎么写的呢？一个li，里面img左浮动，其他内容不变，即可形成左侧缩略图，右侧描述信息的样子，看这个图：
结构类似于<img /> <div>introduction</div>，如果在firebug下看，可以发现div区域是包括img区域的，但是内容会环绕图片。div不设置宽度，此时div是和父级元素（li）是一样宽度的。一次偶然我随手给div加了个overflow:hidden,发现div覆盖区域适应了内容宽度，不再包含img区域了。然后用zoom:1的设置使IE也达到此效果。IE6有点瑕疵，div和img会有空白相隔。
而本文就是来源于此发现，从而很容易的实现3栏布局：两侧栏固定宽度，中间自适应宽度。无需其他说明，看代码就一切明了了。
html:
<body>
<div class="side fl">
左侧栏
</div>
<div class="main">
<div class="side fr">
右侧栏
</div>
<div class="main">
中间自适应
</div>
</div>
</body>
css:
.fl, .fr {float:left;display:inline;}
.fr{float:right;}
.side {width:200px;height:500px;background:#ccc;}
.main {height:500px;overflow:hidden;zoom:1;border:1px solid red;}
是的，就是这么简单简洁的代码，点击这里可以看到Demo。
再来一个完整页面源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>两侧固定宽度，中间自适应宽度布局</title>
<style type="text/css">
#left {float:left;width:200px;background:red}
#main, #mid {overflow:hidden;zoom:1;background:green}
#right {float:right;width:200px;background:pink}
</style>
</head>
<body>
<div id="left">left</div>
<div id="main">
<div id="right">right</div>
<div id="mid">center</div>
</div>
</body>
</html>
linux下对文件重命名有两种命令： mv ，rename
mv /dir/file1 /dir2/file1
两个参数，第一个是源文件，第二个是目的地，如果第二个参数文件名不一样，则会重命名。
当两个参数不带目录，只有文件名时，那就是重命名了。这是单个文件的重命名。
rename才是真正的批量重命名命令。而且他是3个参数，不是2个。
arg1：旧的字符串
arg2：新的字符串
arg3：匹配要重命名的文件，可以使用3种通配符，*、?、[char]，*表示任意多个字符，?表示单个字符，[char]匹配char单个自定的精确字符，可以填写任意字符，foo[a]*表示只匹配fooa开头的文件名，如果一个文件是foobcc.txt，是不会被匹配的。
值的注意的是，此命令在不同的linux版本也有不同，Debian一系的操作系统别有用法。举例说明：
比如/home下有两个文件 abbcc.txt, addbb.txt , a.txt
我想把a替换为xxx，命令是这样的 ： rename “a” “xxx” *.txt
那么它会首先去匹配有哪些文件需要修改，这里凡是.txt后缀的文件都会被匹配，如果改成?.txt则只会匹配到一个文件，那就是a.txt。然后把匹配到的文件中的a字符替换为xxx，注意测试时abab.txt这样的，只会替换第一个a，有待再了解。
说到Debian一系的操作系统，比如Ubuntu，这个命令这样使用是不对的，报错，向下面这样的：
Bareword “a” not allowed while “strict subs” in use at (eval 1) line 1.
经过Google之后发现有这样的说法：
On Debian-based distros it takes a perl expression and a list of files. you need to would need to use:
rename ‘s/foo/foox/’ *
这里是一个perl表达式，好理解点说就是综合了前两个参数为1个，这样就只需要2个参数，而非上面所说的3个参数形式。
所以在Ubuntu下执行上面举例的重命名时，命令是这样的：rename ‘s/a/xxx/’ *.txt
由于没有深入应用，今天是群里有人问了，于是自己动手实践了一下，总结上面简单的用法，也算以备后忘吧。
IE6为众前端所不喜，不仅仅是功能支持很落后，还有一大堆的bug。而且，就连写个注释都能引起莫名奇妙的bug。
好久没碰到了，但是今天写了一个简单的页面，随手添了一个空的注释<!– –>，随后被复制了好几处，于是有了好几个空的注释。结果发现问题了。
1、好大一个空白间距。如同插入了一个水平的空白行，30px那么高。
2、文字被复制溢出（呃。。。想不起叫什么名字了），就是在容器之外，明明没有边框，没有文字的地方，出现了容器内容里的文字。
往往这些问题发生在有浮动的元素情况下。而注释为空或不为空都会偶尔发生这些bug。貌似空的注释更容易出现。
另记一个注释引起的问题。IE6要使用png24透明图片，借助一个js：DD_belatedPNG_0.0.8a-min.js，那么有时在应用了透明的元素旁边写了一些注释，会出现意料外的情况，貌似那次是元素位置歪了吧，去掉注释就ok了。
总结：ie6很多问题，字体大小，行高，高度，浮动，注释。。。这些皆可以成为原因，也可以成为解决的方法。
网上有不少jQuery的选项卡插件，官方的tab貌似也不错，但用来用去哪有自己写的顺手。
该插件实际使用于公司旗下网站 – 易扑网（eapoo.com）， 在网站开发过程中编写，同时扩展了不少功能。
本插件遵循 结构、表现、行为 相分离的原则，所以，html结构与css样式（决定UI）请自己决定。
