作者：idd.chiang 发布时间：April 29, 2010 分类：Javascript/AS
在网上有幸看到夷人通过IE与非IE浏览器对垂直制表符支持特性搞出的一段简短的条件：
var ie = !+"\v1";
以上出至32 bytes, ehr ... 9, ehr ... 7!!! to know if your browser is IE(需翻墙)
而更有牛人，据说是俄国大力士用6byte的长度将上面已经看似不能再短的判定条件记录刷新，如下：
//IE下为true var ie = !-[1,];
利用了IE与标准浏览器在处理数组的toString方法的差异做成的。对于标准游览器，如果数组里面最后一个字符为逗号，JS引擎会自动剔除它。
自己试验了一下，效果还不错，推荐给大家看看
if(!-[1,]){
alert('是IE！')
}else{
alert('非IE！')
}
该方法是否值得推广必须经得各位的多番验证，现在还不能说是最有效的方法，不过这种取巧能在很多需要敏捷开发时用到。
作者：idd.chiang 发布时间：April 11, 2010 分类：Javascript/AS,YUI/Jquery/mootool
鼠标事件触发隐藏tip显示经常遇到，表现形式多种多样，无外乎都是鼠标触碰或点击一个元素（给他个名字：触发者），弹出或新建一个元素，类似Tooltip一样，暂称新元素为“被激活元素”，被激活元素的出现位置绝大部分都是以相对于触发者位置出现，所以，在Y.Postip的实例化中，放出相对于触发者的25个位置可以设置，并允许对默认位置进行自定义距离的设置。
纠结了一下被激活元素的内容该如何展现，为了使用途广泛一些，可以设置被激活元素是自定义内容，也可以是某个dom对象，同时为了能让被激活元素的UI能灵活设置，又放出className能自定义。
作者：idd.chiang 发布时间：March 26, 2010 分类：Javascript/AS,YUI/Jquery/mootool
刚开始学写些YUI3的widget，看到很多人用Jquery实现Slider，Jayli也用YUI3写过Slider+Tab的控件，鉴于自己也常用到这个小玩意儿，索性写一个。
曾经看到过flash的Slider对于翻页时候的切换效果是对被切换的那页进行动画，渐隐然后飞走，这个效果我一直念念不忘，当然，这个效果被我做组件中去了。这个组件的Dom基本结构是相对固定，属于常用幻灯HTML结构，配置可对切换方式（effect）、动画类型（animtype）、每帧停留时间（delay）、是否自动播放（autoplay）、鼠标处理换帧方法（eventype）等进行设置；同时提供Y.Slider对象方法有停止stop(),播放start(),上一帧pre(),下一帧next()，跳转至n帧view(n-1)；下面介绍下怎么使用这个幻灯组件，直接查看Demo：
1.HTML基本结构如下
<div class="sliderbox" id="demo1"> <div class="sb-window"> <div class="img-roll"> <a href=""><img src="img/roll1.jpg" alt=""/></a> <a href=""><img src="img/roll2.jpg" alt=""/></a> <a href=""><img src="img/roll3.jpg" alt=""/></a> <a href=""><img src="img/roll4.jpg" alt=""/></a> </div> </div> <div class="sb-paging"> <a href="#" rel="1" class="active">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div> </div>
其中id=demo1是在Y.Slider构造时用作hook；
作者：idd.chiang 发布时间：March 2, 2010 分类：HTML/CSS,Javascript/AS,前端观察
近几年WEB前端发展日趋成熟，DIV布局已经作为前端人员的必修课，DIV+CSS可以让Web页面展现无所不能，但当DIV滥用时，各种混乱 div布局导致代码可读性极低。此时yahoo最先提倡标签语义化和classname语意命名，但HTML4.01中的标签数目比较小，对于日新月异的 web布局支持实在有限，语意到最后的结果就是，classname无数,为语意存在的各种单词、拼音、字母充斥在页面。
HTML5 w3c已经推出有很长一段时间了，新增的标签也是为了以上弊端以及新功能。下面让ie6\7识别HTML5新增标签这种方法其实是一个取巧。这种做法对于代码洁癖者是个福音，也符合渐进增强Progressive Enhancement、优雅降级（Graceful Degradation）的原则，“好奇害死猫”，往下看，也让我们尝尝鲜吧。
下面先看看HTML5标签搭建的简单博客 » HTML5 Demo
一段简单的脚本，让ie6、ie7能识别HTML5新增标签，脚本如下：
(function(){if(!/*@cc_on!@*/0)return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),
i=0,
length=e.length;
while(i<length){
document.createElement(e[i++])
}
})(); 作者：idd.chiang 发布时间：February 28, 2010 分类：HTML/CSS,Javascript/AS,前端观察
经常会使用Photoshop去取自己想要的颜色,选色还得等待PS的长时间loading，费时费力。抽空整理了两个互联网开源的颜色拾取器，加了转化、拷贝，方便使用。
1.颜色拾取器（Canvas） Color Picker 2.0
这个工具有点像illustrator里的颜色选择器，有HSV，RGB两种颜色设置，CSS3现在已经广泛支持这两种颜色属性，如：hsl(240,100%,50%) 和 rgba(255,0,100,0.8)；对于获得颜色的值，如果我们使用PS，还得打开颜色管理器，这个工具可以有效增加前端工程师颜色选择的效率。工具栏中颜色渐变条是对Canvas Dom的getContext() 方法返回线性颜色渐变的一个 CanvasGradient 对象在Canvas画布上。
2.颜色拾取器 Color Picker 1.0
两个工具都用到了一个开源颜色转换脚本 (Color_Conversion_Library)，这样我们很容易互相换算各种WEB颜色格式,第三个转换就是一个简单尝试。
直接去感受下在线颜色拾取器：在线颜色拾取器
作者：idd.chiang 发布时间：February 23, 2010 分类：HTML/CSS,Javascript/AS
经常碰到图文列表的排列，怎样既符合语义化标签又能扩展出多种表现形式呢。自己做过许多布局设计，总结出一点小经验和技巧。
列表的HTML构成：
<div class="box">
<ul>
<li>
<div class="item">
<a href="url"><img src="src" alt=""/></a>
<h3><a href="url">TITLE</a></h3>
<p>Description</p>
</div>
</li>
... items ...
</ul>
</div>在列表布局中，我们经常会选用float属性来实现横向排列，要实现每一行都整齐排列，我们必须固定列表项的高度，否则会发生意想不到的混乱表现。但实际应用中，图片不一定都同尺寸，按比例来表现势必会与我们固定列表高度或宽度相驳，也许还有图片底边对齐的要求。为了实现这种效果，这里用到了ie6不支持的display:inline-block；ie通过使用“display:inline;zoom:1”来hack。
下面直接上例子：
Demo 值得推荐的图文列表以及CSS布局类型切换
不得不提到一点，如果使用display:inline-block做排列的话，标签换行在Firefox下会引起letter-spacing的bug，如下图：
解决方法是通过将排列元素（例子中是li）的父层（例中ul）设置letter-spacing:-6px;然后再将排列元素letter-spacing还原为默认值0;
