CSSBOX.net

JS 异步加载

Thu, 17 May 2012 15:00:00 +0800

在 IE 系列浏览器中，我们可以通过 onreadystatechange 监听元素加载状态，

然后通过 readyState 属性判断元素是否加载完成。

Chrome、FireFox 等标准浏览器中，我们则可以通过 onload 监听元素是否加载完成。

/**
 * 判断元素是否加载成功
 */
node.onload = node.onreadystatechange = function() {
    if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
        alert("加载成功！");
    }
};

最后附上 DEMO 一枚，供为参考。

DOM 节点关系与操作

Mon, 14 May 2012 15:00:00 +0800

节点关系

// 父节点
someNode.parentNode
// 子节点
someNode.childNodes
// 子节点个数
someNode.childNodes.length
// 第一个子节点
someNode.firstChild
// 最后个子节点
someNode.lastChild
// 上一个同胞节点
someNode.previousSibling
// 下一个同胞节点
someNode.nextSibling

// 仅元素节点 IE9 / chrome / firefox

// 子节点个数
someNode.childElementCount
// 第一个子节点
someNode.firstElementChild
// 最后个子节点
someNode.lastElementChild
// 上一个同胞节点
someNode.previousElementSibling
// 下一个同胞节点
someNode.nextElementSibling

操作节点

// 向节点的子节点列表的末尾添加新的子节点
someNode.appendChild(newchild)
// 在已有的子节点前插入一个新的子节点
someNode.insertBefore(newchild, refchild)
// 将某个子节点替换为另一个
someNode.replaceChild(new_node, old_node)
// 从子节点列表中删除某个节点
someNode.removeChild(node)
// 创建指定的节点的精确拷贝
someNode.cloneNode(include_all)

基于 BACKBONE.JS 的贪吃蛇

Sun, 19 Feb 2012 16:00:00 +0800

记得去年D2上倔倔同学分享了关于豆瓣说的前端MVC，

也是那次分享中我第一次知晓了BACKBONE.JS的存在。

这个贪吃蛇其实在去年的7月份就已完成其大部份功能，

但出于对前端 MVC 的学习便有了对其进行重构的想法。

现在完成的也只是其最基本的游戏功能，还有许多优化的地方。

有兴趣的朋友可以从这里获取游戏源码，我也会持续更新完善！

最后附上 DEMO 预览地址：http://gaoli.github.com/snake

JS 图片预加载技术

Thu, 15 Dec 2011 16:00:00 +0800

项目开发中时常需要用 JS 判断一张图片是否加载成功，

如果图片加载成功，则执行其相应的 onload 绑定事件，

这个就是我们所说的图片预加载技术，先上最终版代码：

function loadImage(url, callback) {   
    var img = new Image();   
    img.onload = function () {   
        img.onload = null;   
        callback(img);   
    }   
    img.src = url;   
}

经测试发现 IE6、IE7、IE8：

如果图片已经存于浏览器缓存中，那么再次对该图片发起请求时，

浏览器就会直接从缓存中加载，这样就无法触发其 onload 事件。

而在 IE9、Chrome、FireFox：

无论图片是否存于浏览器缓存中，都会触发其 onload 事件。

所以上述代码中我们先要为 img 绑定 onload 事件，再为其赋值 src 地址！

更多参考文献：

再谈javascript图片预加载技术

关于图片的预加载,你所不知道的

jQuery 1.7 统一事件绑定API

Sat, 05 Nov 2011 15:00:00 +0800

jQuery 1.7 已经正式发布！

你可以从 jQuery CDN 获取代码：Production Development

新版本新增 .on() 和 .off() 事件绑定API，

从此统一了以往版本中的三种事件绑定方法，

两个方法名也更加的精简，方便记忆与书写。

下面是两个新增方法的调用格式：

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );

当提供 selector 参数时 .on() 与 .delegate() 方法类似，

通过选择器（selector）过滤页面元素，提供事件委派处理。

省略或置空 selector 时 .on() 与 .bind() 方法类似。

使用 .on() 方法时需注意，如果 data 参数为字符串类型，

不得省略 selector 参数，否则 data 将被误认为 selector。

通过对象为 data 提供参数，你永远不需要担心这种特殊情况。

所有现有的事件绑定方法（以及他们相应的解除绑定方法），

都会在 1.7 版本中得以保留，但官方更推荐我们使用新的API。

以下是新旧事件绑定API的几个对比例子：

$('a').bind('click', myHandler);
$('a').on('click', myHandler);

$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);

$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');

$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);

$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');

$('a').live('click', fn);
$(document).on('click', 'a', fn);

$('a').die('click');
$(document).off('click', 'a');

更多新版发布详情可以点击查看 jQuery 官方博客 jQuery 1.7 Released

楼坊街 - 万圣节魔法点灯

Fri, 28 Oct 2011 15:00:00 +0800

赶在万圣节前夕，楼坊街二期终于新鲜出炉啦！

为了能配合实现本期主打的魔法点灯效果，

特别引用了一款名为 Color animation 的 jQuery 插件，

使用这款插件可以轻松实现文字、背景、边框的颜色属性动画。

无奈万恶的 IE6 并不支持 PNG24 透明，只能做渐进增强处理。

这期时间太仓促，下期努力给大家带来更有越儿的交互体验！

附上本期专题地址：http://topic.19lou.com/home/2011/lfj2.html

CSS3 Gradients

Sun, 16 Oct 2011 15:00:00 +0800

HTML5 CSS3 必将是以后的前端的发展方向，

特别是在移动端，高端浏览器给攻城师们带来的愉悦无以言表。

偶然在 webkit 官网上看到一篇关于 CSS3 Gradients（渐变）的文章，

感觉非常不错，于是利用空余时间将其中的实例部分翻译了下，

本人 E 文不太好，有些是照按自己理解翻译，希望对大家学习有帮助吧！

附上原文地址：http://www.webkit.org/blog/1424/css3-gradients/

The New Gradient Syntax

新的语法包含四个渐变函数：

linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()

这些函数名无需过多的解释，但我之后会谈到更多关于循环渐变。

循环渐变与非循环渐变的语法是相同的，这是件好事儿。

因为规范仍是初稿阶段，所以我们在这些渐变函数前加以-webkit-前缀。

当以后规范不再是初稿阶段，我们将能够不加前缀而使用他们。

Linear Gradients

为元素盒模型填充线性渐变是最常用的。你只需要考虑渐变从哪个方向开始。

有两种方式去指定他。第一种，你可以指定渐变从哪个方向或角落开始：

-webkit-linear-gradient(left, white, black)

-webkit-linear-gradient(top right, white, black)

你甚至可以省略第一个参数，他将默认为top并给出一个垂直渐变。

第二种，你可以指定渐变的角度：

-webkit-linear-gradient(135deg, white, black)

角度按逆时针方向旋转，0度时为从左向右方向。

注意在所有这些情况下，渐变足够大以填满元素盒模型。

Radial Gradients

径向渐变更加复杂，在填充时有更多的选项。

最简单的形式是以元素盒模型中心为渐变起始，向外填充至每个角落：

-webkit-radial-gradient(white, black)

这相当于 -webkit-radial-gradient(center, ellipse cover, white, black)。

第一个参数为可选，默认为 center ，也可以是一个点（就像 background-position ），

他允许你将原点放置到其它地方：

-webkit-radial-gradient(10% 30%, white, black)

原点位置后面的参数用来指定渐变的形状和大小，这是两种方式之一。

这种方式用一些关键词来描述形状（circle，ellipse）和

大小（closest-side，closest-corner，farthest-side，farthest-corner，contain，cover）例如：

-webkit-radial-gradient(30% 30%, closest-corner, white, black)

-webkit-radial-gradient(30% 30%, circle closest-corner, white, black)

如果你愿意，你还可以分别指定径向渐变的水平与垂直结束半径：

-webkit-radial-gradient(center, 5em 40px, white, black)

Color Stops

为渐变指定颜色停靠点很容易；最简单的情况下，你只需要提供一个颜色列表：

-webkit-linear-gradient(left, red, green, blue)

这样会使所有的颜色平均分布于渐变之上。

如果你愿意，你还可以为个别颜色定位具体的停靠点，然后让浏览器分配其它剩余的：

-webkit-linear-gradient(bottom left, red 20px, yellow, green, blue 90%)

那些渐变轴线可能是条对角线；那么百分比则相应对角线的长度。

颜色的停靠点相同会使颜色之间过渡强烈：

-webkit-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue)

Repeating Gradients

循环渐变 repeating-linear-gradient() 和 repeating-radial-gradient()

拥有完全相同的简写语法，且整个渐变将被循环填充：

-webkit-repeating-linear-gradient(left, red 10%, blue 30%)

这些停靠点将被循环用于调整他们首尾相连，这常常会导致颜色之间过渡强烈。

你可以避免循环末尾的颜色:

-webkit-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%)

19楼前端架构浅析

Sun, 25 Sep 2011 15:00:00 +0800

今天最大的收获是认识了许多业内的朋友，

D2沙龙还是相当给力的，希望能够越办越好！

下面奉上我今天分享的PPT，希望攻城师们之间以后能有更多的交流...

Win7 下搭建 Node.JS 环境

Sat, 10 Sep 2011 15:00:00 +0800

Node.JS 现在是火的一塌糊涂，但其环境搭建却难住了一部份感兴趣的同学，

我开始也一直想寻找一个简易搭建的方法，但最终还是活生生被逼到 Linux 。

但我想说的是不断的在两个系统中切换实在是件苦逼的事儿，

还好官方网站已经放出了解决方案，只要下载 node.exe Windows executable，

无需任何繁琐的步骤，就能在 Windows 下一步到位搭建好 Node.JS 环境，轻松打印出 Hello World！

你也可以点击这里前往 Node.JS 的官方主页进行下载。

FireRainbow - Firebug JS 语法高亮

Fri, 09 Sep 2011 15:00:00 +0800

这是一款专为 Firebug 设计的 Javascript 语法高亮插件，

可以直接在 Firefox 的附加组件管理器中搜索 FireRainbow 或访问其官方主页下载。

安装完插件按提示重启 Firefox 后，切换到脚本标签页就可以看到效果啦！

对于习惯用 jQuery 写 JS 代码的同学作者还提供了另外一款名为 FireQuery 的插件，

用于在 Firebug 中显示 jQuery 语法高亮。