使用上非常简单。

1.引入jquery和插件

2.建立类似如下的html结构

a的路径指向大图路径。

3.初始化

4.原理简述

图片放大镜的原理并不复杂，当鼠标滑过图片时，不存在放大镜层，创建一个放大镜层，这个层的背景图片指向大图，当你的鼠标在图片移动时候，鼠标坐标改变了，同时改变放大镜层背景图片的位移。
当然，实际的情况会要复杂的多，你要处理下边界，不能让你的放大镜超越可视图片的边界。
zoomy有个有意思的放大镜层，是完全使用css3完成的，效果如下

圆形的放大镜层，是使用css3的圆角属性生成的，而圆形内部还有一个白色半透明的圆形层，再加上阴影，就形成了比较逼真的放大镜效果。

武器档案

• 名称：firebug
• 最新版本：1.7
• 用途：前端调试器
• 必备指数：
• 使用难度：

firebug是前端最具盛名的调试器，功能非常强悍。firebug1.7正式版现在已经发布了，完美兼容firefox4.0（无法兼容firefox4.0以下的版本），由于firebug非常易用，这里明河不一一介绍firebug的功能，只给大家介绍一些firebug的实用技巧，有些技巧是firebug1.7才有的，有些是通用的。

1.使用“debugger”关键字快速断点调试

正常如果我们想debugger下js代码，先进入“脚本”面板，然后找到要调试的js文件，最后在你需要调试的行，打上断点，最后刷新页面，如下图：

有没有更快速的断点方式呢？那就是使用“debugger”关键字快速断点调试，接着往下看。
在你要调试的代码行前面，加一行”debugger;”，比如下面的

然后刷新下页面，如下图：

断到点了！是不是很方便，你无须再切换到脚本，再花心思找对应的调试脚本，这里我们只需要加个debugger;即可，放心，脚本不会报错，当然你正式发布脚本的时候，务必把debugger;关键字去掉哦。

2.快速定位指定行的代码

比如我要快速定位到第122行的代码，你可以如下操作。
在搜索框上输入“#122”，就可以找到指定行的代码了！

3.只显示起作用的css属性

firebug1.7是默认开启的，如下图：
当勾选第一项“Only Show Applied Style”时，只显示起作用的样式，如果我们把这项去掉，看下效果。

被覆盖，不起作用的css属性就会出现了。

4.如何查看hover的css属性

加了hover属性的容器，鼠标滑过，在HTML面板右侧会出现hover属性，但你移开就没有了，如果你希望在面板中保留hover属性，看下面：

勾选最后一项hover即可。

5.如何理解脚本面板中的“堆栈”

堆栈，可以理解为执行顺序总揽，“监控”起到微观作用，让我们知道变量的赋值情况，而监控起到宏观作用，让我们知道，脚本的运行流程。
是不是用的很少？其实堆栈信息已经第一时间出现在面板了，只是很少人留意，截个图给大家瞧瞧：

高亮部分就是堆栈信息！

6.循环体内的特例调试

调试循环体，有个很杯具的地方，在循环内部打个断点，循环20次，会触发20次断点……这很愁人，影响调试效率，其实我们只需要调试循环第2次的情况。

右击断点处，会出现一个蓝色的弹出层，让你输入监控表达式，这时候输入i == 2，再按“F8”，你就会发现直接跳到第二次循环了。
（图截不下来，无法奉上图片见谅。）

7.以独立窗口的形式打开firebug

1.7firebug的面板可以变成独立窗口了，快捷键：“ctrl+F12”，也可以点击如下图的位置。

8.向控制台输出日记消息

在你的代码上输出个“36ria.com”，如下：

使用console.log的效率，个人觉得还是比原始的alert()来的高的，关键是console.log()不会中断程序执行。

9.利用命名行工具，快速定位对象

step1这个对象，是KISSY.Step()的实例，明河想要知道这个对象内部的赋值情况，只要在命令行上键入”step1″，就会在控制台上出现相关信息，然后我再点击该信息，就进入了DOM详细信息界面。

明河结语

先写到这里，firebug还有其他技巧，日后补上，欢迎前端朋友补充，感激不尽。

• 点此下载

（留意图片底部二角的阴影效果）
要实现容器阴影效果，对于css3来说只是小菜一碟，使用box-shadow类似如下代码即可搞定：

但如果要实现demo中的卷曲阴影效果，我们还需要其他的css3技巧，而这些技巧就是今天明河要讲的重点。

1.卷曲阴影效果原理说明

想要单纯使用css，不借助图片来实现卷曲阴影效果，我们需要解决一个问题：如何给一个容器加上带有一定倾斜度的阴影。有一个通俗易懂的方案，在容器内部加上二个带阴影（带旋转角度）的子容器，二个子容器的位置正好位于父容器底部的左右二个位置，然后我们再给图片设置成相对定位，z-index大于二个阴影子容器，这样图片会遮住这二个阴影子容器，就形成demo上的效果。
是的，实际上，完全可以使用这样的方案，但有个问题，即太繁琐了，我们需要另外给容器加二个层。
有没有不需要插入层，也不不要脚本，单纯使用css就可以往容器内部插内容的方法呢？
我想，有朋友已经想到了！right，就是利用:before和:after这二个伪类！

2.图片容器的css代码

我们给这个图片容器加上阴影，如果你的代码需要兼容IE，请自行加上IE阴影滤镜。
关于box-shadow这个css3阴影属性，网上相关的介绍实在太多了，猛击这里进入《CSS3属性box-shadow使用教程》，这篇文章相当不错，对box-shadow的大部分属性都已经演示到位。

3.使用:before向容器加入个带有旋转角度和阴影的内容

:before和:after这二个伪类需要和content属性结合使用，用于向容器插入新的内容 。当然这里我们不需要向容器插入特别的内容，只是需要插入一个带宽度和高度的阴影容器。
给这个内容层增加旋转：

transform这个属性还是很神奇的，可以实现很多有意思的效果。这里严重推荐阅读《CSS3–transform 变形金刚》，transform大部分属性都演示到位了。
值得一提的是skew（拉伸或倾斜），在这个demo中这是很重要的应用，我们需要生成一个平行四边形，来实现更为逼真的卷曲效果。
rotate，顾名思义，即旋转这个平行四边形，deg值为正，右旋（顺时针）；为负，左旋（逆时针）。
接下来继续给这个容器加个box-shadow阴影属性，当然值与父容器相同。

4.使用:after向容器加入个带有旋转角度和阴影的内容

与:before其实差不多，不再累述。

4.图片css

留意z-index一定要大于其他二个阴影容器。
完毕！

武器档案

• 名称：YUI Compressor
• 最新版本：2.4.2
• 用途：js/css压缩
• 必备指数：
• 使用难度：（YUI Compressor非常易用，只是配置的时候会遇到些麻烦）

YUI Compressor是java程序，如果你对java很熟悉的话，大可快速的上手使用yuicompressor.jar；如果你和明河一样，对java很陌生，没关系，一样可以使用YUI Compressor，只不过使用的是淘宝UED前端制作的批处理工具，算是可视化的YUI Compressor工具，使用极其傻瓜化。今天向大家介绍的就是这款工具。
点此下载

1.配置java运行环境

在安装YUI Compressor前，先要确保你的机子安装了JDK，并且添加了必要的环境变量。

1.安装JDK

2.配置下环境变量

这里以win7为例，请看下图：
（右击“我的电脑”，进入“属性”界面）

(新建个JAVA_HOME变量，指向你安装的JDK的根目录，比如明河把JDK安装在C:\Program Files\Java\jdk1.6.0_10，那么JAVA_HOME就指向该路径)

再新建个PATH变量（如果已经存在PATH编辑，点击“编辑”即可），值为%JAVA_HOME%\bin;（留意分号，如果已经存在PATH路径记得在值前加;号分隔符）。
明河机子上的配置是.;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
再新建个CLASS_PATH变量，值为.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

3.测试下配置是否成功

在cmd界面，输入javac

出现下面的信息，说明配置成功了。

如果出现“’javac’ 不是内部或外部命令，也不是可运行的程序或批处理文件”，说明配置有误。

2.安装YUI Compressor

运行压缩包的install.cmd，如果出现“rundll32 不是内部或外部命令，也不是可运行的程序或批处理文件”，说明java环境配置有误，请返回第一步。
安装完成后，会在你的系统右键菜单增加一个压缩文章（只有在右击文件的时候才会出现哦）。接下来以压缩包中的test.js为例。

3.YUI Compressor简易操作

右击test.js

点击“process with YUI Compressor”，稍等片刻，就会生成一个test-min.js文件，可以比较下二者的大小：

从28K到14K，效果是立竿见影！压缩率达到50%！
除了可以从XX.js生成XX-min.js，也可以从XX.source.js生成XX.js。

4.YUI Compressor结合ant

请看《ant结合yui-compressor和closure-compiler—ant入门指南（7）》，结合ant，你可以批量压缩js/css文件。

5.明河结语

强烈建议使用YUI Compressor压缩css文件，从压缩率来讲js的压缩Google Closure Compiler，更胜一筹，但Google Closure Compiler对你的代码要求很严格的哦，当然这也是好事。关于Google Closure Compiler，以后明河会给大家介绍。

扩展阅读：

• YUI Compressor 组件压缩 JavaScript 的一些原理
• 《Extreme JavaScript Compression With YUI Compressor》
• 《How does the YUI Compressor work?》

1.这样去写你的 HTML

• 推荐指数：
• 博客：幸福收藏夹

明河点评：非常好的文章，作为web前端开发者，我们几乎每天都与html标签打交道，但关于如何更好的使用html标签，更多靠我们主观的判断，来看下这篇文章，关于html标签使用的总结。

2.IDEA快捷键使用技巧整理

• 推荐指数：
• 博客：猪的明天

明河点评：明河一直想写关于IDEA的教程，苦于时间有限，迟迟未动工，感谢猪的明天，非常好的idea快捷键技巧整理。IDEA真的是一款非常好的前端IDE，严重推荐使用。

3.基于KISSY的表单验证组件Authenticate

• 推荐指数：
• 博客：何畏的博客

4.Html5初探（1）——HTML5新增标签及属性

• 推荐指数：
• 博客：冰剑的博客

5.写给同学们的一封回信

• 推荐指数：
• 博客：淘宝UED

明河点评：小马哥给一个想从事前端工作同学的回信，也许会给你些启发。

• 点此下载

1.什么是本地共享对象（ISO）

猛击这里进入查看官方文档说明，简单点讲，flash的本地共享对象就是加强版的cookies，机制上也是类似的，比如无法跨域访问，不会主动记忆用户信息。
想要在web页面js调用flash的本地共享对象，这里必然要借助flash的actionscript和javascript的通信接口：ExternalInterface。
整个过程的确比浏览器的cookies繁琐不少，幸运的是，很多js框架（包括kissy）已经帮我们封装好了本地共享对象方法，我们无需了解flash的内部实现，即可在外部轻松的调用该接口。
kissy是如何调用flash的本地共享对象的呢？

2.使用本地共享对象，需要引入的kissy模块

这三个模块，缺一不可哦，接下来明河分别简单介绍下这三个模块

3.kissy的flash模块

kissy的flash模块中，有个很重要的子模块叫：flash-embed，通过flash-embed，你可以快速的向DOM插入flash对象，你这里自由的控制flashvars（向flash对象传递一些复杂数据的参数）。

上述代码会在id为test-flash3的层上，生成一个宽高为100像素，flashvars为site=36ria.com&author=明河共影的flash对象。

4.什么是ajbridge？

ajbridge是由龙藏教主牵头开发的kissy独立项目， Actionscript 和 Javascript集合应用，包括flash文件上传、flash本地共享对象等。

5.ajbridge的store

…..总算进入整主的介绍了，store是flash本地存储模块，继承于ajbridge，同时会调用kissy的flash模块，所以想要使用store模块，必须保证flash模块和ajbridge模块已经引入。

1.请确保在服务器端运行demo页面

如果你打开的路劲类似file://这是无效的！根据明河观察使用http://localhost/也是无效的，在本地运行demo的朋友，请使用ip。

2.白名单文件

你可以在明河的压缩包内找到storage-whitelist.xml（kissy\ajbridge\store），该文件必须和store.swf在同一个目录下。

“*”允许保存所有的域的数据。

3.准备一个flash容器层层

留意不可设置这个层的display:none！

3.配置Store参数

id（flash对象的id）是必不可少的,src为swf路径，也是必不可少的，还有其他参数请看文档。

4.实例化Store

5.contentReady事件

contentReady（本地存储就绪后触发）事件是非常重要的事件，从理论上来讲针对Store的所有操作要在flash本地存储准备完成后才能操作。

上述的代码，将获取本地存储三个字段：用户名、邮箱、网站信息，并把三个信息写入到对应的输入框。

6.获取指定字段的值

7.设置存储字段

6.demo完整代码

• 点此下载

看了demo的朋友，猜猜为了实现这个效果，明河使用了几行js代码？100行？200行？曾经明河实现了一样的效果，用了195行的js代码，有兴趣的朋友可以猛击《divSlider — jquery滑动门插件（明河作品）》，而在这个demo中，明河用了0行的js代码！是的，你没看错，真的是0行，不信可以打开demo源代码看下（说这段时明河突然想起了很搞的电视广告，候总吼着八心八箭…此处省略1W字….）。
demo上的弹性滑动效果，单纯依靠css3实现的，所以请和明河一样无视IE，由于firefox不支持css3动画，所以在firefox下浏览也是有问题的，IE9也无法使用，请使用chrome测试。
明河通过这个demo，将介绍一个少见的css3属性给大家：box-flex和弹性盒模型。

1.html代码

2.css代码

所有代码都发完了…就是这么简单。我想很多朋友对css中的诸多属性很疑惑，什么是display: box？box-flex: 1;意味着什么？

3.弹性盒模型

看了demo，也许你会有疑问：是如何实现均分容器的宽度的（每张图片初始所占容器的宽度都是一样的）？按照传统的做法是使用百分比，设置每个div为20%（5张图片），然后设置成浮动布局。
但在明河贴出的代码上设置div的width:0，既然宽度为0了，demo中为什么可以实现均分呢？专门看下div（图片容器）的代码：

我想很多认真的朋友已经发现秘密了：box-flex: 1;，如果这里的1解释为比例中的1，也就是div（图片容器）是按照1:1:1:1:1来布局，这就解释了为什么可以实现均分。
从上述说明中，我们可以得出一个结论：所谓弹性盒模型，是一种按比例分配的布局方式。
在你的子容器（比如demo的图片容器div）使用box-flex前，必须保证你的父容器（比如demo的样式名为flexbox的div）已经声明了其为弹性盒模型。
如何声明呢？

display: box;（display: inline-box;也是有效的），就表明其子容器可以随意按比例分配容器宽度/高度。
留意这里浏览器兼容的处理方式，是display: -moz-box;不是-moz-display: box;。

4.box-flex

前面已经提过box-flex表明当前容器占父容器宽度/高度的比例，box-flex的值至少为1的整数。
现在考虑鼠标滑过的情况：

当鼠标滑过当前图片容器div，设置其宽度为500像素，这里出现了一种情况：如果有一个子容器的宽度是定死的，比如width:500px，那其他子容器依旧按照比例分配，这时候如何处理呢？
这是弹性盒模型的强大之处：当一个子容器是定宽的，其他子容器就不再平分父容器的宽度，而是平分（父容器宽度-该定宽容器宽度）剩余宽度，当然高度也是这种情况。
比如demo中父容器是950px，定宽容器宽度是500px，其他容器依旧是1:1:1:1，那么平分的是450px的宽度。
这就是为什么当你鼠标滑过图片容器后，宽度改变了，但其他容器宽度能够随之改变，而且可以均分。
当为什么firefox看不到滑动的动画效果呢？接着看。

5.css3的动画

transition按字面理解叫“转换”，但明显表达不到位，根据其达到的效果来看，我们姑且叫它“缓动动画”，transition动画，当你改变容器的大小、颜色、布局、透明度等就会触发，简单说明下其属性：

• 1.指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。
• 2.速度
• 3.缓动函数（效果）,有如下值：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)

firefox目前不支持该属性（目前还不知道firefox4.0是否支持）。

6.box-orient

box-orient用来确定子元素的方向,可以横向布局，也可以纵向布局。可选的值有：horizontal | vertical | inline-axis | block-axis | inherit。
默认值是inline-axis，效果等同于horizontal，横向布局。block-axis等同于vertical，纵向布局。

7.box-align

box-align指的是弹性盒模型垂直方向对齐方式，属性值有：start | end | center | baseline | stretch。
默认值为：stretch，拉伸，即父容器高度有多高，子容器也多高，可以理解为垂直方向，子容器会占满父容器高度。

8.未解之谜：width:0;

在div中的样式中有个width:0;，大家可以试下把它干掉后的效果会是咋样的，你会发现，鼠标滑过的效果变的跳跃且诡异，目前我还找不到好的解释，欢迎朋友们跟我探讨相关问题，谢谢。

9.明河结语

弹性盒模型是一个很梦幻的布局方式，推荐大家有时间可以深入挖掘下，还有其他相关属性，明河没讲解到哦。

• 点此下载

在谈KISSY.Base类之前，明河先来说说kissy中的继承，这是绕不开的话题，想要用好kissy，必须掌握kissy的继承机制。
猛击这里进入查看kissy的继承API，mix、merge、augment、extend这四个核心方法是非常重要的方法，明河严重推荐掌握，接下来明河将通过二个demo说特别明下merge和extend的用法。

1.merge

KISSY.merge(a,b)有个很经典的应用场景：合并配置参数，比如合并b对象与a对象，b的对象成员会覆盖a的对象成员。
比如：我们的步骤条组件要暴露三个参数供用户自定义，分别是width（宽度）、color（颜色）、act（当前激活步骤）；当然我们需要有默认配置参数，这样当用户不输入参数时，保证有正确的参数供组件使用。
（以下代码为模拟，参见demo页面）

从demo中可以看到，param上的成员覆盖了同名的defaultConfig上的成员，param上不存在act成员，但defaultConfig存在，所以config也存在成员act，param和defaultConfig这二个对象并不会因为合并操作而改变本身的值。

2.extend

前面说到对象的合并，现在讲讲kissy中的类与类的继承（javascript并没有类这个概念，这里是借用，可能用函数对象更准确些）。
举个例子：我们需要步骤条组件KISSY.Steps继承于TestSteps（测试用）。

可以看到，KISSY.Steps，并没有init方法，但继承于TestSteps后，一样可以调用到。

3.为什么让组件继承KISSY.Base？

在steps.js上，可以找到如下代码：

KISSY.Base是1.1.6引入的新的方法集合，当你的类继承于KISSY.Base后就拥有了属性的getter和setter方法，总所周知，javascript是没有大部分语言拥有的取值器和设值器，所以KISSY.Base模拟出该方法，利用这个特性，你可以很方便的设置参数、获取参数、重置参数，并可以监听参数改变前、改变后事件。现在这么说，的确很抽象，猛击这里进入KISSY.Base文档，再猛击这里进入 attribute文档。

举个场景作为例子：KISSY.Steps开放了width参数供用户自定义，有一种情况我们需要考虑的，即初始化结束后，用户因为某种业务需求，需要改变这个width参数，初始化后width为300，用户点击一个按钮，width变成200，当单是参数变量数值的改变是没任何作用的，我们需要一个方法，比如setWidth()，来实际改变步骤li在DOM中的宽度，当然最好还要暴露出一个getWidth()方法，供用户获取宽度。还有一种情况更复杂些，你希望暴露出changeWidth事件，当宽度改变时可以触发。当加上这些需求后，一个参数的设置也许你不会觉得增加了多少代码量，但如果你的参数很多呢？

这就是KISSY.Base的意义。有兴趣的朋友，可以看下1.1.6中的suggest.js（采用旧的kissy模块写法）和imagezoom.js（采用继承KISSY.Base的模块写法），具体体会下二者之间代码风格的差异。imagezoom供配置的参数相当丰富，如果采用旧式的写法，你会发现API非常的繁琐。

继承KISSY.Base，另外一个好处是可以直接自定义事件，而无需再继承KISSY.EventTarget，什么是自定义事件？如何自定义事件？这是系列教程事件高级篇的内容，明河将整合到构建步骤条组件里面讲，现在只是提一下，继续我们的KISSY.Base。

4.实战KISSY.Base

继承KISSY.Base有几个步骤是不得不提的。

1)在构造函数中初始化父类(KISSY.Base)

你可以在function Steps(){}这个构造函数中，发现如下语法：

这语句非常重要，如果缺少这个语句，KISSY.Base就没办法处理配置参数。至于为什么需要这样调用方式？有机会再跟大家分享。

2)继承KISSY.Base

3)配置组件的默认参数

这个步骤也非常的关键

ATTRS是Steps的静态对象（采用大写），每个对象成员对应着一个参数，每个参数又有三个成员：value（默认值）、getter（取值器，可以不用）、setter（设值器，可以不用）：

留意getter和setter方法必须有返回值，即必须有return。

4)扩展组件方法

S.augment用于复制原型prototype方法。

5)如何设置参数、获取参数？

请看demo页面，代码如下：

当继承KISSY.Base后，组件自动带有set()、get()和reset()三个方法，用法简单明了，你无须再写setWidth()，resetWidth()之类的方法。

4.明河结语

令人头晕的理论总算讲完了，没有太深入，只是让大家了解一些kissy的继承用法，下面几篇教程开始真正的逻辑处理，应用之前学的dom、event等。

移动蓝色的点，让线不出现重叠，看看你发了多少时间。

2.Z Type

……飞机游戏的原型…..

3.Cube Out

3D版的积木….

4.Bounce

……没弄明白是啥意思。

5.Sketch 3D

绘画板。

6.Conductor

是个有意思的效果，线与线相交，会发出声音，画出的随机图形像电路板.

7.Bacterium

8.Ultra Neuron Pong

9.Tank World

非一般的卡，但3d游戏的模型基本上已经出来了，是个好实验。

原文：http://www.queness.com/post/6886/9-incredible-html5-canvas-and-javascript-experiments

这次改版最大的变化是，RIA之家将改成团体博客，目前成员为四人，分别是明河、苏河、天河、飞绿，都为淘宝UED的前端工程师。明河也不再使用明河共影这个网名和账号了，哈其实就去掉“共影”….

完整的首页设计图请猛击这里进入查看。
（图片很大，请放大查看）
这一版设计浓缩了我不少新的想法和尝试，征求反馈意见中…..
新版将彻底不支持IE6、IE7，使用html5，预计月底与大家见面。

1.为什么要改成团体博客？

明河一人的精力有限，但为了保证更新速度，很多时候不会太注重文章品质，有很多的翻译也欠缺精准，希望以后可以多点时间研磨文章，多发些原创性的有指导性的文章。在改成团体博客后，博客的更新量和质量都有保证，我的三位同事在前端方面实力有保证的，敬请期待他们的文章。

2.为什么使用html5？

使用html5布局，今年会是个普及年，会有越来越多的站点重构成html5的站点，新版RIA之家上线后，我们这几个前端会给大家分享下使用html5布局的一些心得和教训。
最后感谢大家一如既往的支持！

1.HTML5 中 div section article 的区别

• 推荐指数：
• 博客：前端观察

文章摘要：关于html5的教程现在是越来越多了，但大部分文章只是很笼统的说html5有哪些好的特性，却很少有文章深入探讨html5新的特性的应用，这是这篇教程的难得之处， section和article是html5二个主推的新语义化标签，严重推荐理解。

2.从头开始做新浪微博小应用(php+js)

• 推荐指数：
• 博客：hello，javascript

文章摘要：天祁的这篇文章非常好！严重推荐阅读，特别对开发微博应用的朋友，天祁给出了oauth很好的认证示例。

3.Javascript中的命名空间

• 推荐指数：
• 博客：Web前端开发兵工厂

4.12条保持HTML代码整洁的原则

• 推荐指数：
• 博客：前端笔记

5.未知高度的图片垂直居中

• 推荐指数：
• 博客：ued.5173

1.哪些场景要考虑跨域问题？

明河这二周在处理淘宝添加收藏夹的重构，里面就有一个非常经典的跨域问题。

添加收藏弹出层外层是淘宝商城页面域名是tmall.com，而弹出层内部的页面域名却是taobao.com，接下来的问题就是我现在希望弹出层内部的高度改变了，父页面弹出层的高度也随之改变，同时子iframe内有办法使用一个按钮，关闭父页面的弹出层。
这个场景还是非常经典的，很多朋友估计多多少少都会遇到这个情况，就是有个弹出层里面嵌一个iframe，iframe内的子页面如何操作父页面的弹出层或其他元素？

2.淘宝商城是如何处理跨域的？

由于今天主要是讲html5的跨域方案，这里明河简要提一下，有机会跟大家详细分享。
淘宝商城有个专门用于处理跨域的js类TMall.XDomain，这个类会生成子iframe中生成一个新的iframe，这个iframe我们叫它代理iframe，代理iframe必须跟父页面时同域的，这样代理iframe就有权限处理父页面。
这里明河推荐阅读以下文章：

• JavaScript跨域总结与解决办法
• iframe跨域
• 关于document.domain的一些解释

3.哪些情况下存在跨域问题？

4.HTML5的window.postMessage简述

postMessage是html为了解决跨域通信，特别引入的一个新的API，目前支持这个API的浏览器有：Firefox, IE8+, Opera, Safari, Chrome。postMessage允许页面中的多个iframe/window的通信，postMessage也可以实现ajax直接跨域，不通过服务器端代理。

• 点此下载

感谢苏河哥哥提供另外个主机作为跨域测试，O(∩_∩)O哈！
在上面的demo中，明河简单演示了postMessage的用法，父页面中有二个不同域的iframe，现在我们要求这二个iframe每过一秒，向对方的内容层传递一行文字，对象一接收到文字就开始输出。

5.postMessage用法解析

这里以iframe1.html的代码为例。

1)向另外一个iframe发送消息

iframe1.html需要向iframe2.html发送消息，也就是第二个iframe，所以是window.parent.frames[1]，如果是向父页面发送消息就是window.parent。
postMessage这个函数接收二个参数，缺一不可，第一个参数即你要发送的数据，第二个参数是非常重要，主要是出于安全的考虑，一般填写允许通信的域名，这里明河为了简化，所以使用’*'，即不对访问的域进行判断。

2)另外一个iframe监听消息事件

iframe2.html中写个监听message事件，当有消息传到iframe2.html时就会触发这个事件。

整个通信过程就结束了！是不是非常简单惬意！
如果你有加域名限,比如下面的代码：

就要在onmessage中追加个判断：

6.明河结语

html5的postMessage相当强悍和易用！你可以利用这个特性解决大部分场景下的跨域问题，不用再创建个代理iframe之类的繁琐方法。严重推荐大家练习下该方法，目前的确存在浏览器差异问题，但相信以后会成为主流跨域通信方案。

在这个demo很好的展示ajax表单提交时的按钮交互处理，同时代码也不会特别复杂，算是一个学习jquery的不错demo，原文请看《Create a Simple Interactive CSS Button with jQuery》。

• 点此下载

1.构建一个简单表单

没什么太特别的地方，接下来看下表单样式，特别留意提交按钮。

2.表单样式

按钮样式设置：

cssSubmitButton这个样式，是脚本用a替换input时加上去了，也是说最后输出的按钮其实是个链接，之后会讲到，留言按钮的几种状态：可用、不可用、正在提交、鼠标滑过。按钮样式无视IE…….

3.js脚本

以下脚本会发送ajax请求，同时会给按钮添加loading样式：

大功告成！

图书档案

• 名称：Fancy Form Design（爱上表单设计）
• 翻译：夏虫
• 页数：94
• 简介：很精悍的一本书，虽然内容不算多，但关于表单设计的方方面面基本上都覆盖到了，严重推荐前端朋友阅读。

《爱上表单设计》目录结构

1.进入你的当前主题代码页面

点击“Editor”。

2.打开sidebar.php

这里我们是往侧边添加注册表单，所以打开的是sidebar.php。

3.在相应位置添加如下代码

关键点说明：
wordpress注册的服务器端页面：

注意表单内的输入框的name值请勿修改。

4.添加样式

以上样式仅供参考，请自行修改。

• 1.使用html5
• 2.彻底不再支持IE6
• 3.优化简化布局（整体的色调和风格不会有大的变化）
• 4.更友好的文章评论
• 5.更易读的文章结构

最后，祝有意、无意撞进RIA之家的朋友，新春快乐，兔年吉祥！
（PS:踏踏实实的做一个优秀的前端博客，真的不容易，特别是在中国这样的环境，抄袭、山寨、作弊、浮躁，很多时候明河很沮丧，都想放弃，最后还是坚持下来了。没有太多为读者服务之类的冠冕堂皇的理由，只是因为在写博之间自己真的成长，认识很多的朋友，帮助了一部分人，我想真就够了，就值了。信一句古话“是金子总会发光”，有价值的东西，只要坚持，总会得到别人的认可。）

1.jQuery1.5的改进细节

• 推荐指数：

文章摘要：想要了解jquery1.5底层改变的朋友不可错过，尤其是jQuery.Deferre，这个改进很有意思，回头明河去整个详细的说明。

2.facebook是如何管理代码的

• 推荐指数：
• 博客：无网不剩

文章摘要：非常好的一篇文章，严重推荐阅读，了解下facebook是如何管理代码的，当然facebook的管理方式在中国的绝大多数互联网公司是行不通的，“非死不可”，权当见闻……

3.在服务端合并和压缩JavaScript和CSS文件

• 推荐指数：
• 作者：纸口杯
• 博客：纸口杯的博客

4.打造完美的 ajax 版 Google 自定义搜索

• 推荐指数：
• 作者：fisio
• 博客：老肥的博客

文章摘要：关于如何使用google公开的ajax搜索接口，其实明河有做过相应介绍，请看《kissy+ Google’s AJAX Search API实战ajax搜索》。

5.模拟实现 Range 的 insertNode() 方法

• 推荐指数：
• 作者：怿飞
• 博客：怿飞的博客

• 点此下载

余下几篇教程将基于kissy1.1.6而不是1.1.5。

kissy模块化思想说明

虽然明河不大喜欢讲理论，不过模块化对于日后使用kissy完成中大型的web应用而言非常重要，kissy模块化思想的核心是提供一种颗粒化、松耦合、易于扩展、可异步加载、明确依赖的js代码组织方式，现在不理解这句话没关系，在实际应用后，你将体会到kissy模块化思想的先进性。在kissy1.1.5后做了拆分，独立出了seed.js文件，seed是KISSY的核心基础模块，定义了继承、命名空间、模块创建和使用等一系列方法。在《第二天Hello World—15天学会kissy》中提到过一些关键API的用法，比如KISSY.ready()、KISSY.use()。今天继续讲解模块方面的API。

1.创建一个独立的模块文件

比如是步骤条组件，创建一个steps.js，这不是必须的，你可以在一个js中包含多个模块，但明河极力推荐1个模块对应一个js文件，以便于管理，当然这样引出一个新的问题，如果模块很多，那么请求数过多了，所以发布的时候还是要使用ant或combo将模块文件合并成一个js，关于这一点，日后明河我继续深入探讨。

2.创建一个新的模块到KISSY对象

现在明河想为KISSY扩展一个步骤条组件，模块名叫steps(一般对应文件名，统一为小写),代码如下：

第一个参数为模块名，第二个参数为模块实现函数（S指的是KISSY）。

3.明确模块依赖

steps这个模块依赖于core(KISSY的核心模块包含DOM、Event、ajax等)，在KISSY.add()中传递第三个参数，代码如下：

requires为一个数组，存储所有该模块的依赖模块。kissy会自动检查模块依赖，然后会自动加载依赖模块。

4.给模块加上jsdoc注释

注释很重要，严重推荐使用jsdoc的注释格式，比如在模块文件头部加上如下注释：

有几个模块描述是必须的，fileOverview（文件用途）、creator或author（作者）、version（版本）。
大家一定会觉得奇怪，为什么版本是2.0呢？steps这个组件，明河早在去年9月就有第一个版本了，那时候刚学kissy，是当kissy的练习来写了，代码写的很粗糙，所以在上周做了彻底的重构，代码和API跟原来的完全不同，所以升为2.0。

5.创建一个组件对象

在KISSY.add()的第二个参数function内，创建一个对象，代码如下：

这个语句很关键，在外部是调用不到Steps这个对象的，我们需要将其赋值给KISSY这个命名空间，好让外部可以调用的到。
至此，模块的壳差不多搭完了，当远不够完整，接着看。

6.外部调用组件

实例化组件非常简单:

7.Steps构造函数

构造函数主要做以下几件事：

• 参数、配置的处理
• 属性的定义
• 调用初始化函数

我想很多朋友，会对这段代码有疑问。这段代码的作用在于，倘若用户不是通过new实例化的组件的，那么this这个关键字是不会指向Steps对象的，为了防止这种情况出现，在构造函数内部做个判断，确保实例化Steps。

设置目标对象，可能使用target作为属性会更准确些，为了保持和KISSY官方组件的统一，这里依旧沿用container。明河喜欢把属性的定义统一放在构造函数，便于管理。
_init这个初始化函数，也是为了保持和KISSY官方组件的统一，使用_init函数名，哈在Steps这个对象内啥事没干，真正干活的是render函数，之后我会讲到为什么不将组件初始化代码写在_init中，有些场合的确不适用一实例化类就初始化一堆的逻辑。
这里做了个约定：私有方法和私有属性加“_”前缀。

8.明河结语

参数的处理以及继承，留待下一篇教程讲解。下一篇教程有个很重要的内容：为什么让组件继承KISSY.Base。

• 点此下载

步骤条常见于电子商务网站的下单页面以及用户注册页面。步骤条通用组件很少，原因还是在大部分的步骤条使用背景图片，无法满足所有站点的配色、尺寸要求，这是明河写这个组件的目的，不通过任何背景图片产生适用于大部分站点的步骤条。那么该步骤条组件应该满足以下需求。

• 1.可以快速产生步骤条，只需提供一个ol的列表数据结构；
• 2.有多种配色方案
• 3.可以控制激活的步骤
• 4.可以自定义单步骤尺寸

以上就是明河制作的这款组件的特性，我将其命名为Steps。组件不复杂，但在真正讲述组件构建过程前，很有必要，说明下组件的原理。
步骤条的生成，难点在于箭头的生成，即使用css来生成箭头（指向是右），关于如何使用css来生成箭头，明河曾发过系列教程《jquery插件实战教程》里面有一篇教程已经提到，猛击这里进入《Colortip难点解析—jquery插件实战教程（3）》，这篇文章明河讲解了如何使用css创建各个方向的气泡箭头。

css的箭头生成过程，明河有做了完整的demo，猛击《利用css中的border生成三角，兼容包括IE6的主流浏览器》。
css生成箭头这个技巧非常好用，强烈建议掌握，如果你看了demo还有疑问继续看以下三篇文章。

• CSS border三角、圆角图形生成技术简介
• 纯CSS实现各类气球泡泡对话框效果
• Dotted&Dashed终极分析及IE6透明边框

步骤条箭头的代码

1.html结构

js会向每个li添加一个div(箭头容器)，这个div包含二个span（二个箭头），样式名为“bor“的span输出的白色背景的箭头（通过与另外一个颜色的箭头叠加产生白色边框效果），样式名为”blo”的span为带颜色的箭头。叠加产生的效果既是

上图明河截多了，实际宽度请用firebug查看。

2.css代码

留意边框的设置！二个span为绝对定位，宽度和高度必须为0，然后设置边框宽度，产生等腰三角形，具体原理请看明河贴出的几篇文章。

3.明河结语

下面几篇教程，明河将开始一步一步讲解，整个组件（模块）的构建过程，kissy的可扩展性真的不错，kissy目前已经有部分相当优秀的官方组件，比如switchable（轮换）、suggest（自动提示框）、imagezoom（图片放大镜）等，可以先看看这些组件的调用过程。

• 点此下载

1.创建一个幻灯片html结构

#slideShowContainer容器内的元素全部为绝对定位，这是由交互特点决定的，采用其他定位方式还真不好处理，绝对定位有个问题就是要处理好z-index，尤其是图片容器间的z-index，默认是后面的遮住前面的，但我们需要脚本修正为前面遮住后面的。

2.关键css代码

#slideShow这个层很关键，所有的交互都基于这个层。

3.js脚本（已加中文注释）

3.1更新图片容器li的z-index

这是很关键的处理步骤，在每次改变图片时都要触发一次。

3.2初始默认设置图片的旋转角度的理由

外层容器#slideShow旋转了90度，里面的图片自然也跟着旋转了90度，那么最终显示的图片角度是错误的。所以我们需要一个方案，不管容器如何旋转，图片显示时角度都是正确的。所以这里给每个图片加上了旋转。

3.3jquery自定义事件的使用

jquery自定义事件很重要，希望朋友们对看下相关教程。这里强烈推荐下《jquery cookbook》，关于jquery事件有非常详细的说明，英文版网上可以载的到。

3.4jquery.rotate插件的使用

上述代码，不止是旋转了容器，同时还改变了容器尺寸（恢复原来容器大小）。

这里明河以最复杂的demo5为例讲解下其API。

1.建立幻灯片html结构

2.初始化pictureMenu

3.API说明

jQuery 1.5 Beta的更新内容

1.5的最大更新：支持子类，jquery的继承终于来了！

官方的更新日记，将ajax模块重写排在第一位，明河倒是觉得支持继承，这才是jQuery 1.5最大的更新！这个功能明河期盼了很久，算是千呼万唤始出来吧。jquery之所以不适合大型复杂的web开发的一个原因就是继承机制的缺失，你写3-4个jquery插件，就会发现，代码重复率很高（插件与插件间很难继承），代码组织上有点力不从心的感觉，到现在明河甚至很少写jquery代码了。jquery的这个更新非常及时，赞一个。
更详细的使用方法，明河会在日后的教程中放出。其实现在我也不知道该如何调用…..O(∩_∩)O哈！

1.5的最人性化更新：ajax模块变了！

1.需要留意jQuery.ajax()这个函数变了！（可以放心的是依旧兼容旧的调用方式），旧的ajax请求url是写在参数{}内的，比如jQuery.ajax({url:”36ria.com”})，现在改了，jQuery.ajax(’36ria.com’,{success:function(){}});，这是接口的明显变化，其实内部逻辑实现变化也是很大的，详见1.5源代码（留意jXHR这个类）。
2.每个请求类型都支持设置超时时间和中止，还有个变化是在简化的jQuery.ajax()的API中，比如jQuery.getJson()，回调函数不必写在()参数内，你可以使用链式调用的方式在后面追加回调函数，比如jQuery.getJson().success(function(){})，（jquery有个很不好的地方，回调函数太多了，容易造成阅读困难，可以看出jquery小组在试图改变这一问题。）
3.以数组的方式来传递ajax的成功、失败、完成等回调函数，关于这一点，信息量太少，明河无法臆断其具体使用过程，等如后测试后奉上相关内容。

明河结语

关于jQuery 1.5 Beta的简单介绍到此结束，jQuery 1.5 Beta还有其他方面的更新，由于是比较细节的内容，明河就不再说明，有兴趣的朋友，请看官方的更新日记。日后会有相关教程放出，期待1.5正式版！（这个版本只建议用于学习）

1.淘宝2011新版首页开发实践

• 推荐指数：
• 作者：拔赤
• 博客：TOABAO-UED

文章摘要：文章中的幻灯片必看！包含了2011年淘宝首页改版的心得体会。2011年新版淘宝首页，是国内HTML5的重大实践，事实证明html5不止是好看，而且还是好用。

2.用js计算三次贝塞尔曲线

• 推荐指数：
• 作者：天祁
• 博客：hello,JavaScript

文章摘要：贝塞尔曲
线，是曲线绘制的基石，天祁这篇文章，虽然目前没太大意义，但html5普及后，尤其是cancas普及后，会派上大用场。

3.ES-262-3学习笔记：new操作符的工作原理

• 推荐指数：
• 作者：哈哈小老虎
• 博客：哈哈小老虎’s Blog

文章摘要：严重推荐收藏这篇文章，好文！想了解new工作原理的朋友不可错过。

4.原型设计软件Axure6：含汉化包+新增功能介绍

• 推荐指数：
• 作者：刘刚
• 博客：刘刚’s Blog

文章摘要：Axure6是web原型设计的神器，虽然跟前端关系不是很密切，但实际上交互设计离不开Axure。

5.HTML5本地存储初探

• 推荐指数：
• 作者：Robin
• 博客：前端观察

补充QA：为什么升级到1.6.1后不勾选“引入插件的jquery1.4.2库”，插件无法加载？为什么与其他插件存在冲突？

这个bug是由明河的疏忽导致的，原因可以看下面飞龙在天发的脚本。
正确的版本