Paul Irish 和 Jonathan Neal 创建了一个有趣的实例站点，内容关乎大量参数可调整的 CSS 示例，支持参数修改后的即时预览功能。

CSS3, Please! 将会带你领略这些令人意想不到的 CSS 新规则：

1. border-radius
2. box shadow
3. gradients
4. rgba support in backgrounds
5. transforms
6. font-face

这是一个非常适合学习 CSS3 的页面，有兴趣不妨一试。

官方网站：http://css3please.com

相关文章

• CSS3 基本要素概览 (0)
• CSS 3.0 参考手册（中文版） (11)
• 用 CSS3 实现未来的 Web (6)
• 芒果教你清除浮动 (1)
• 5 个简单实用的 CSS 属性 (5)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• 使用 CSS3 创建下拉菜单 (3)
• Data URI 初探及其自动化 (0)

PT Banana Split

Allstar Regular

Offensive Bold

Spranq eco sans

Dekers Bold

WC ROUGHTRAD

SF Orson Casual Heavy

Champagne & Limousines

Malgecito

VAL

Cyclo

Arkitech

Diavlo Book

Faith Collapsing

Delicious Heavy

Aerovias Brasil NF

Arista

SF Buttacup Lettering

Yanone Kaffeesatz Bold

Saunder

Curvic

karabinE

UglyQua

Requiem

CurlyJoe

Yelly

NK122

Decker

Sansumi Bold

Santana Bold

英文原稿：30 Free Fonts For Creative Projects | WebDesignerWall
翻译整理：30 款用于创意项目的免费字体 | 芒果

随机文章

• 使用 .htaccess 实现 301 域名重定向 (5)
• 更改 WordPress 标签云字体大小和显示数量 (1)
• 雅虎 1.99 美元国际域名 (3)
• Page SEO，查看所有页面的 PageRank 值 (0)
• 收到 CO.CC 免费域名 $1 美元推荐费 (10)
• 阿瓜，分享从身边开始 (1)
• Midomi，根据哼唱的歌声搜索音乐 (6)
• BgPatterns，网页背景图案生成工具 (3)

<div class="clear"></div>
.clear{clear:both;}

更为优良的 CSS 代码是：

.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;}

这个方法目前已经广泛使用，淘宝、口碑，都是这种用法。通过 after 伪类 :after 和 针对 IE6 的独立 CSS Hack 来实现，完全兼容主流浏览器。

当然，这在通过 CSS 在元素之后追加 "." 并不必要，因为还需要 visibility 来隐藏掉它。通过优化，代码如下：

.clear:after{content:"020";display:block;height:0;clear:both;}
.clear{zoom:1;}

其中，020 指在容器后添加空格，这样就避免使用 visibility 隐藏可视性了。

另外，芒果不推荐使用空 div 的方法。单单为了清除浮动而在结构良好的 HTML 中插入没有语义的容器，未免有些突兀。

相关文章

• CSS3 Please! CSS3 即时预览体验 (0)
• CSS3 基本要素概览 (0)
• 5 个简单实用的 CSS 属性 (5)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (0)
• 我的二零零九，芒果一周年 (10)
• Closure Compiler，压缩！还是压缩！ (5)

RGBA

前面的 3 个值是 RGB 颜色值，最后一个值是透明度的级别（0 = 透明，1 = 不透明）。

RGBA 可以应用于与颜色的任何属性，如字体颜色，边框颜色，背景颜色，阴影颜色等。

Text Shadow

文字阴影的结构顺序为：x 轴偏移，y 轴偏移，模糊，颜色。

设置一个负值的 x 轴偏移将阴影转移到左侧。设置一个负值的 y 轴偏移转将阴影转移到顶部。别忘了，你可以在阴影颜色中应用 RGBA 值。

您也可以指定一个文本阴影列表（以逗号分隔）。下面的示例使用两个文本阴影声明制作了文字凸版效果（顶部 1px 和底部1px）。

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

Border Radius

边界半径 (border radius) 的写法类似内边距 (padding) 和 外边距 (margin) 属性（例如：border-radius:20px）。为使浏览器渲染边界半径属性，需要在属性名称加上前缀，Webkit 引擎的浏览器为 "-webkit-"，Firefox 则为 "-moz-"。

您可以为每个边角指定不同的值。注意：Firefox 和 Webkit 的边角属性名称是不相同的。

Box Shadow

盒阴影的结构和 text-shadow 相同，x 轴偏移，y 轴偏移，模糊，颜色。

同样，您可以设置一个以上的盒阴影。下面是三个盒阴影声明示例。

-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

英文原稿：The Basics of CSS3 | WebDesignWall
翻译整理：CSS3 基本要素概览 | 芒果

相关文章

• CSS3 Please! CSS3 即时预览体验 (0)
• CSS 3.0 参考手册（中文版） (11)
• 用 CSS3 实现未来的 Web (6)
• 芒果教你清除浮动 (1)
• 5 个简单实用的 CSS 属性 (5)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• 使用 CSS3 创建下拉菜单 (3)
• Data URI 初探及其自动化 (0)

1、CSS Clip

剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素：你必须指定其 position 属性为 absolute，然后指定相对于元素的 top，right，bottom，left 值。

图片剪辑实例（演示）

以下示例演示了如何使用 clip 属性掩盖一张图片。首先，指定 <div> 元素为 position:relative，然后指定 <img> 元素为 position:absolute，并且根据实际需要设定 rect 值。

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

图像调整尺寸和剪辑（演示）

在这个示例中，我将展示如何调整图像尺寸和剪辑图片。素材图片是矩形的，我想将其削减至 50％ 的尺寸，用来创建一个正方形格式的缩略图。因此，我用宽度和高度属性来调整图像，并使用 clip 剪辑属性予以掩盖。然后用 left 属性将图片移开左侧 15px 的距离。

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

2、Min-height （演示）

min-height 属性允许你指定元素的最小高度，适用于需要平衡布局的情况。我将它用于 Job 面板上，以确保内容区域高于侧边栏。

.with_minheight {
  min-height: 550px;
}

IE6 的 Min-height hack

注：神奇的 IE6 原生不支持 min-height 属性，不过幸好有一个 min-height hack。

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

3、White-space（演示）

white-space 属性指定了元素中空白的处理方式。比如，指定 white-space:nowrap 会阻止文本自动换行。

em {
  white-space: nowrap;
}

4、Cursor（演示）

如果你改变了按钮的行为，其指针也应该随之改变。比如，当一个按钮不可用时，指针应该改变为默认的箭头，来表明它不可点击。因此，cursor 属性在开发 Web 应用程序时相当有用。

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5、Display inline / block（演示）

如果你不知道：块级元素是作为独立的一行来渲染的，而行内元素是在同一行被渲染的。<div>，<h1> 和 <p> 标签都是块级元素，<em>，<span>，<strong> 都是行内元素。通过 display:inline 或 block 的方式，你可以重设这些元素的 display 样式。

.block em {
  display: block;
}

.inline h4, .inline p {
  display: inline;
}

英文原稿：5 Simple, But Useful CSS Properties | WebDesignWall
翻译整理：5 个简单实用的 CSS 属性 | 芒果

相关文章

• CSS3 Please! CSS3 即时预览体验 (0)
• 芒果教你清除浮动 (1)
• CSS3 基本要素概览 (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (0)
• Closure Compiler，压缩！还是压缩！ (5)
• YUICompressor，强大的前端代码压缩工具 (1)

随着 CSS 向 CSS3 的不断演进，圆角的处理不再是一个棘手的问题。但是我们伟大的 IE 同志坚守着那份愚昧与无知。不过为了效果，还是不得不做一点牺牲，能用图片做圆角就尽量用图片吧。

RoundedCornr 用于自定义配置生成圆角效果的对应 HTML/CSS 代码以及边角料图片。提供了以下几个待设定参数：

以像素计算的圆角半径大小 (Corner radius in pixels)、背景颜色 (Background color)、容器颜色 (Box color)。

配置完成后，点击 Create RoundedCornr 按钮，会引导向一个预览页面，并同时输出 HTML/CSS 代码，以及生成的四个边角图片。对于快速制作圆角效果来说还是灰常方便的，值得一试。

官方主页：http://roundedcornr.com

随机文章

• WordPress 随机日志调用代码 (12)
• Alarmcocky，在线闹钟提醒服务 (3)
• 芒果教你清除浮动 (1)
• 53 个不可或缺的 CSS 技巧 (6)
• WP-T-WAP，为 WordPress 添加 WAP 访问功能 (1)
• IE6，即将到来的末日？ (9)
• CSS 有序列表 ol 和无序列表 ul (1)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)

1. 将事件处理程序附加到一个或多个元素
2. 自动延缓暂不可用元素的事件注册
3. 自动纠正作用域，可选作用域赋值
4. 浏览器事件对象的自动抽象
5. 将任意对象发送到某一个事件
6. Utility 方法访问需要浏览器抽象的事件属性
7. 自动清除事件监听
8. 自定义事件的创建和订阅机制
9. 在检测到 DOM 元素时即刻执行函数

入门

使用 Event 和 Custom Event Utilities (自定义事件工具包) 需要在页面中包含以下源文件：

<!-- Dependency -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js" ></script>

<!-- Event source file -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js" ></script>

Event 和 Custom Event components (自定义事件组件) 分别由 YAHOO.util.Event 和 YAHOO.util.CustomEvent 定义。

基本事件

为 DOM 添加事件处理程序，需要简单定义，并同时指定需绑定元素和事件类型等参数，将其传递给 Event Utility:

var oElement = document.getElementById("elementid");
function fnCallback(e) { alert("click"); }
YAHOO.util.Event.addListener(oElement, "click", fnCallback);

代码注释：

1. 声明变量 oElement 并将其赋值为特定的 DOM 元素。
2. 定义回调函数，fnCallback(e)，以处理特定事件。
3. 调用 YAHOO.util.Event 对象的 addListener 方法为 DOM 元素绑定事件。addListener 方法需要三个参数：要绑定事件的元素 (oElement)，要绑定的事件，以及回调函数。

通过元素 ID 添加事件处理程序，使用以下代码：

function fnCallback(e) { alert("click"); }
YAHOO.util.Event.addListener("elementid", "click", fnCallback);

这个例子与第一个类似。但是，此处我们通过 HTML ID ("elementid" 作为一个字符串) 来查找元素，而不是通过传递一个指向元素对象的变量。Event Utility 尝试通过 ID 属性值找到 DOM 元素，如果不能立即找到，则在页面就绪后继续查找元素，最多长达 15 秒。这种“自动延缓”机制使你在许多情况下，可以直接将事件代码写入脚本，而不是从那些只能在页面就绪后才能执行的函数中分离出来。

为多个元素添加事件处理程序，使用以下代码：

// array can contain object references, element ids, or both
var ids = ["el1", "el2", "el3"];
function fnCallback(e) { alert(this.id); }
YAHOO.util.Event.addListener(ids, "click", fnCallback);

代码注释：

1. 为页面元素的 HTML ID 属性声明一个数组。该数组以字符串的形式存储 HTML ID (如代码所示)，也可以接受对象引用变量。
2. 声明回调函数，fnCallback(e)，用于处理特定事件。
3. 调用 YAHOO.util.Event 的 addListener 方法，为 DOM 元素绑定事件。此处 addListener 方法的第一个参数是 ID 数组，而不是一个单独的元素或 ID。

阅读更多细节请查阅 使用事件 和 使用自定义事件 中的示例，或者参考 API 文档。也可以查阅关于如何使用 addListener 添加事件的 第一个 Event Utility 示例 教程。

注：开发人员经常不知道在哪里可以找到 DOM 事件的完全列表（例如 "click"、"mousemove" 等等），但至今仍然没有完美的手册，Danny Goodman 的 DHTML: The Definitive Reference 可能比较全面。PPK 关于怪异模式的 Event Compatibility Table 可能是线上最好的兼容性评估。Event Utility 对事件处理程序的绑定没有任何限制；它将尝试为你提供的任何事件名称添加监听。你有责任确保所使用的事件得到当前浏览器开发环境的支持。

使用事件

这部分描述了 Event Utility 的一些常用功能和使用方法。包括以下部分：

Handler Attachment Deferral
Automatic Scope Correction
Automatic Event Object Browser Abstraction
Send an Arbitrary Object to the Event Handler

延缓附加处理程序

如果你尝试在页面完全就绪前为元素添加处理程序，Event Utility 会尝试定位元素。如果元素不可用，事件会定期检测，直到 window.onload 事件被触发。处理程序延缓只能在通过元素 ID 添加处理程序时生效；如果您尝试添加的对 DOM 对象的引用尚不可用，该组件无法获取你试图访问的对象。

自动作用域纠正

附带 Internet Explorer 的 attachEvent 方法的事件处理程序在 window 作用域内被执行，因此回调函数中的特殊变量 this 引用了 window 对象，这并不是非常有用。更令人烦恼的是，实际上 Internet Explorer 中的事件对象不提供查找已注册事件的元素的可靠方法；基于标准的浏览器通过 currentTarget 属性对此给予了良好支持，但 IE 不存在这个属性。

默认情况下，Event Utility 自动调整执行环境的作用域，因此 this 关键字会遵循 W3C-兼容浏览器中的 addEventListener 行为，查找绑定事件的 DOM 元素。此外，事件订阅者可以覆盖作用域，因此 this 关键字会查询传入 addListener 的自定义对象。

浏览器事件对象的自动抽象

当事件触发后回调函数接收的第一个参数总是实际事件对象。没有必要在 window.event 中查看。

发送任意对象到事件处理程序

在面向对象的 JavaScript 开发中，通常通过指定自定义对象的成员方法来监听事件，在响应时访问内部属性和执行内部方法。由于事件处理程序 (默认情况下) 在元素作用域内执行，而不是监听方法的父级对象的作用域，自定义对象的属性不能通过 "this" 关键字获得。你可以通过以下方法解决这个问题：(1) 创建闭包 (2) 创建自定义对象和元素之间的循环引用。

Event Utility 使你能够直接将自定义对象传递给事件处理程序，因此不必使用其他方法 (有潜在漏洞的) 访问该自定义对象。将自定义对象作为第四个参数传给 addListener 方法，作为第二个参数传给回调函数 (第一个参数是事件对象本身)：

function MyObj(elementId, customProp, callback) {
   this.elementId = elementId;
   this.customProp = customProp;
   this.callback = callback;
}

MyObj.prototype.addClickHandler = function() {
   YAHOO.util.Event.addListener(this.elementId, "click", this.callback, this);
};

function fnCallback1(e, obj) {
  // the execution context is the html element ("myelementid")
  alert(this.id + " click event: " + obj.customProp);
}

function fnCallback2(e, obj) {
  // the execution context is the custom object
  alert("click event: " + this.customProp);
}

var myobj = new MyObj("myelementid", "hello world", fnCallback1);
var mydata = { id: 10 };

// One way to add the handler:
myobj.addClickHandler();

// This will do the same thing:
YAHOO.util.Event.addListener("myelementid", "click", fnCallback1, myobj);

// If we pass true as the final parameter, the custom object that is passed
// is used for the execution scope (so it becomes "this" in the callback).
YAHOO.util.Event.addListener("myelementid", "click", fnCallback2, myobj, true);

// Alternatively, we can assign a completely different object to be the
// execution scope:
YAHOO.util.Event.addListener("myelementid", "click", fnCallback2, mydata, myobj);

移除事件

你可以通过调用 YAHOO.util.Event.removeListener 并使用与创建事件时同样的事件签名来移除事件监听器。

YAHOO.util.Event.removeListener("myelementid", "click", fnCallback1);

如果不方便保存原先用于注册事件的回调函数的引用参数，而且事件具有唯一监听者，你可以调用不带参数的 removeListener 函数。这样做将删除所有通过 addListener 为指定元素和事件类型添加的监听。

YAHOO.util.Event.removeListener("myelementid", "click");

YAHOO.util.Event.getListeners 允许你检索所有通过 addListener 方法绑定的元素监听。或者，你可以检索指定类型的监听：

// all listeners
var listeners = YAHOO.util.Event.getListeners(myelement);
for (var i=0; i>listeners.length; ++i) {
    var listener = listeners[i];
    alert( listener.type   ); // The event type
    alert( listener.fn     ); // The function to execute
    alert( listener.obj    ); // The custom object passed into addListener
    alert( listener.adjust ); // Scope correction requested, if true, listener.obj
                              // is the scope, if an object, that object is the scope
}

// only click listeners
var listeners = YAHOO.util.Event.getListeners(myelement, "click");

YAHOO.util.Event.purgeElement 允许你移除所有通过 addListener 方法注册的元素监听。或者，可以指定特定类型的监听，此外，该元素的子节点也会被清除。

// all listeners
YAHOO.util.Event.purgeElement(myelement);
// all listeners and recurse children
YAHOO.util.Event.purgeElement(myelement, true);
// only click listeners
YAHOO.util.Event.purgeElement(myelement, false, "click");

使用 focusin 和focusout 事件

由于 DOM 中的 focus 和 blur 事件不支持冒泡，可以使用 Event Utility 的 focusin 和 focusout 事件替代 DOM 中可聚焦元素的 focus 和 blur 事件处理程序。focusin 和 focusout 事件使监听单一元素、监听元素所有子节点触发的 focus 和 blur 事件成为了可能。由于减少事件监听数目是一个行之有效的性能提高策略，使用 focusin 和 focusout 事件有助于加速任何需要监听可聚焦元素的网页或应用程序。

创建 focusin 监听

考虑以下 HTML 代码：

<div id="toolbar">
    <input type="button" id="button-cut" name="button-cut" value="Cut">
    <input type="button" id="button-copy" name="button-copy" value="Copy">
    <input type="button" id="button-paste" name="button-paste" value="Paste">
</div>

监听每个 toolbar 容器中每个按钮的 focus 事件时，通常需要对每个按钮添加离散的监听事件。然而，使用 Event Utility 则可以单独监听容器元素 (此处是 <div id="toolbar">)，并在每个按钮获得焦点时予以通知。

YAHOO.util.Event.on("toolbar", "focusin", function(e) {

    YAHOO.log("target: " + e.target.id);

});

使用 mouseenter 和 mouseleave 事件

受 Internet Explorer 的 mouseenter 和 mouseleave 事件影响，Event Utility 提供了在所有 A 级浏览器中监听 mouseenter 和 mouseleave 事件的功能。为应对在鼠标悬停和移开时执行 DOM 操作，使用 mouseenter 和 mouseleave 可以提高性能，因为他们不会冒泡，DOM 的变化将不会过于频繁。

mouseenter 和 mouseleave 功能被封装在一个单独的 Event Utility 增强模块中，因此监听 mouseenter 和 mouseleave 事件必须在包含 Event Utility 之后引入 event-mouseenter 模块。

<!-- Dependency -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js" ></script>

<!-- Event source file -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js" ></script>

<!-- Dom source file -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/dom/dom-min.js" ></script>

<!-- MouseEnter source file -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/event-mouseenter/event-mouseenter-min.js" ></script>

创建 mouseenter 和 mouseleave 监听

考虑以下 HTML 代码：

<div id="container">
    <ul>
        <li><em>Item Type One</em></li>
        <li><em>Item Type Two</em></li>
        <li><em>Item Type Three</em></li>
    </ul>
</div>

以下代码将为列表容器 (<div id="container">) 添加 mouseenter 和 mouseleave 监听。mouseenter 监听会在鼠标进入容器时被调用一次。mouseleave 监听会在鼠标离开容器时被调用一次。

YAHOO.util.Event.on("container", "mouseenter", function (e) {

    YAHOO.log("Mouse entered: " + this.id);

});

YAHOO.util.Event.on("container", "mouseleave", function (e) {

    YAHOO.log("Mouse left: " + this.id);

});

使用委托方法

事件委托 (Event delegation) 支持在父级元素上应用单独的事件处理程序，来监听影响后代元素的交互行为。因为后代元素的事件将冒泡到父级元素，对于减少特定网页上事件处理程序的资源消耗问题，这可能是一个可靠的、非常有效的缓解策略。(你可以在这篇 YUIBlog 文章中阅读更多有关事件委托的内容)

创建委托事件监听

考虑以下 HTML 代码：

<div id="container">
    <ul>
        <li id="item-1"><em>Item Type One</em></li>
        <li id="item-2"><em>Item Type Two</em></li>
        <li id="item-3"><em>Item Type Three</em></li>
    </ul>
</div>

使用 delegate 方法，需要将委托容器的元素 id 作为第一个参数 (此处是 <div id="container">) 传入。第二个参数是需要委托的事件类型，第三个参数是事件监听函数，第四个参数是定义后代元素 (监听被调用时必须按照顺序匹配事件目标) 的 CSS 选择器。

以下示例将为容器 (<div id="container">) 绑定一个单独的 click 事件监听。但这个监听器只有在事件目标为 <li> 时被调用。

YAHOO.util.Event.delegate("container", "click", function(e, matchedEl, container) {

    //  The list item that matched the provided selector is the default scope
    YAHOO.log("Default scope: " + this.id);

    //  The list item that matched the provided selector is also passed
    //  as the second argument in case the scope of the listener
    //  is adjusted
    YAHOO.log("Clicked list item: " + matchedEl.id);

    //  The actual click target, which could be the matched item or a
    //  descendant of it.
    YAHOO.log("Event target: " + YAHOO.util.Event.getTarget(e));    

    //  The delegation container is passed as a third argument
    YAHOO.log("Delegation container: " + container.id);

}, "li");

使用 onAvailable 和 onContentReady 方法

onAvailable 允许你定义一个函数，一旦元素在 DOM 中被检测到，该函数即刻执行。其目的是减少在渲染行内脚本和 HTML 代码时发生时序问题。这并不意味着用来为文档就绪后的最终元素定义处理程序；而是用来在加载过程中检测元素。

onAvailable 的参数签名和 addListener 相似，只省略事件类型。

 function TestObj(id) {
   YAHOO.util.Event.onAvailable(id, this.handleOnAvailable, this);
 }

 TestObj.prototype.handleOnAvailable = function(me) {
   alert(this.id + " is available");
 }

 var obj = new TestObj("myelementid");

<div id="myelementid">my element</div>

onContentReady 方法使用和 onAvailable 相同的语法。两者之间的实质差异在于，onContentReady 等待直到 DOM 中的目标元素和其直接后继元素响应 getElementById。这保证了目标元素的内容被完全载入 (除了可以通过脚本添加的任何动态内容)。如果 onContentReady 一直检测不到直接后继元素，它将随 window.load 事件触发。

使用 onDOMReady 方法

onDOMReady 允许你定义一个函数，一旦 DOM 呈可用状态，该函数即刻执行。DOM 在结构完整之前不会被视为可用；如果脚本试图在未就绪的 DOM 中插入信息，一些浏览器本身的 bug (主要在 IE 中) 会导致浏览器崩溃或者页面载入失败。DOM 会在图片完成载入之前就绪，然而，这样的 onDOMReady 通常是使用 window 对象的 load 事件的一个优良选择。

 function init() {
    YAHOO.util.Dom.setStyle("hidden_element", "visibility", "");
 }
 YAHOO.util.Event.onDOMReady(init);

 // As with addListener, onAvailable, and onContentReady, you can pass a data object and adjust the scope
 // YAHOO.util.Event.onDOMReady(init, data, scope);

使用 CustomEvent 对象

CustomEvent 对象使你能够定义和使用 DOM 中默认不可用的事件 - 即应用程序中自定义的特定事件。这部分描述了几个 CustomEvent 组件的通用方法并提供一些示例。包括以下内容：

Defining a Custom Event
Subscribing (Listening) to a Custom Event
Creating a Callback
Triggering the Event

定义一个自定义事件

定义一个自定义事件类型，需要创建一个 CustomEvent 对象实例：

// custom object
function TestObj(name) {
    this.name = name;
    // define a custom event
    this.event1 = new YAHOO.util.CustomEvent("event1", this);
}

CustomEvent 构造器创建了一个全新的自定义事件；它需要一个必要参数和三个可选参数：

type - 事件类型。这个字符串会返回到接收这个事件的监听，以此获知事件的发生。
scope - 监听方法触发时所在的作用域；如果没有指定作用域，默认为 window 对象。
silent - 默认为 false。如果为 true，在调试模式下该事件的活动将不被记录。
signature - 指定事件监听的签名。选项为：

YAHOO.util.CustomEvent.LIST (默认)：
参数一：事件名称
参数二：发送到触发事件的参数数组
参数三：(可选) 一个由订阅者提供的自定义对象
YAHOO.util.CustomEvent.FLAT：
参数一：传递到触发事件的第一个参数。如果你需要传递多个参数，使用数组或者对象字面量。
参数二：一个由订阅者提供的自定义对象

事件订阅者可以覆盖作用域，因此 this 关键字指向传递到 subscribe 方法的自定义对象。

订阅 (监听) 自定义事件

订阅一个自定义事件，需要使用 subscribe 方法：

// a custom consumer object that will listen to "event1"
function Consumer(name, testObj) {
    this.name = name;
    this.testObj = testObj;
    this.testObj.event1.subscribe(this.onEvent1, this);
}

在这个示例中，event1 是在上一小节创建的自定义事件对象。使用 subscribe 方法监听该事件。subscribe 方法需要两个参数。第一个是回调函数；第二个是自定义对象 (详细参考 Send an Arbitrary Object to the Event Handler)。当事件被触发时，回调函数被调用，并且自定义对象作为第三个参数被传递到该回调函数 (当使用默认参数签名；当使用单位签名时，自定义对象作为第二个参数)。

创建回调函数

为自定义事件创建回调函数：

Consumer.prototype.onEvent1 = function(type, args, me) {
    alert(" this: " + this +
        "\n this.name: " + this.name +
        "\n type: " + type +
        "\n args[0].data: " + args[0].data +
        "\n me.name: " + me.name);
}

该示例中 type 参数是事件类型 (此处为 "event1")，args 是所有传入自定义事件触发方法的参数数组，并且 me 是我们创建订阅事件时传入的自定义对象。

触发事件

触发一个自定义事件：

// random test data to be used as an event argument
function TestData(data) {
    this.data = data;
}

// create an instance of our test object
var t1 = new TestObj("mytestobj1");

// create the event consumer, passing in the custom
// object so that it can subscribe to the custom event
var c1 = new Consumer("mytestconsumer1", t1);

// create a data object that will be passed to the consumer when the event fires
var d1 = new TestData("mydata1");

// fire the test object's event1 event, passing the data object as a parameter
t1.event1.fire(d1);

该示例中 t1 是我们创建的测试对象，event1 是 CustomEvent 示例，d1 是测试数据。这个示例产生以下输出：

 this: [object Object]
 this.name: mytestobj1
 type: event1
 args[0].data: mydata1
 me.name: mytestconsumer1

英文原稿：YUI 2: Event Utility | Yahoo! Developer Network
翻译整理：YUI 2: Event Utility | 芒果

相关文章

• YUI 2: Dom Collection (0)
• YUI 2: YAHOO Global Object (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• JavaScript 匿名函数代码模式 (0)
• Closure Compiler，压缩！还是压缩！ (5)
• YUICompressor，强大的前端代码压缩工具 (1)
• 使用 JS 文件调用 Google AdSense 广告 (2)
• 10 款基于 JavaScript 的 WYSIWYG 编辑器 (1)

以下是 13 款实用的 Google Chrome 扩展：

Color Picker
Color Oicker 允许你快速获取任意颜色的 Hex 和 RGB 代码！提供关于色调，饱和度和平衡度的建议。

Firebug Lite
Firebug Lite 适用于 Web 开发人员，允许你编辑，调试，在任何页面实时监测控制 CSS，HTML 和 JavaScript 代码。

Domain Availability Checker
这款扩展用于检查域名是否可以注册。直接在工具栏上点击按钮输入待检查域名即可。

Aviary Screen Capture
Aviary Screen Capture 允许你对任意网页进行截图，并可以直接通过 Aviary.com 应用程序在浏览器中编辑图片。使用它能使访问 Aviary 网站和工具更为方便。

Lorem Ipsum Generator
Lorem Ipsum Generator 提供了一个生成文本排版的简单方法。

IE Tab
使用 Internet Explorer 在 Chrome 标签中展示网页。有一些站点只能用 IE 展现，使用这款扩展你可以查看那些站点，而不用离开 Chrome。对开发人员而言这也是用于测试 IE 渲染引擎的强大方式，也便于那些使用 ActiveX 控件和本地文件管理器视图（例如 file://URLs）的情况。

MeasureIt!
MeasureIt! 提供了一把用于获得任意页面元素宽度高度的尺子。

PlainClothes
该扩展可以重设浏览器默认样式。试想：文字是黑色的，背景是白色的，未访问链接是蓝色的，访问过的链接是紫色的，所有的链接均有下划线。或其他任何你喜欢的颜色。所有文本均依照你设定的默认字体来渲染（定义“Options” > “Under the Hood” > “Change font and language settings”）。

Eye Dropper
Eye Dropper and Color Picker 扩展支持从任意页面或者高级设色器中拾取颜色。

Speed Tracer
Speed Tracer 是一款用于识别并修复 Web 应用程序性能问题的工具。它将从浏览器底层获取应用程序运行数据并予以视觉化的呈现。Speed Tracer 作为一个 Chrome 扩展， 可以用于 Windows 和 Linux 系统平台。

Pendule
Pendule 扩展了 Chrome 浏览器内建的开发工具。

Resolution Test
Resolution Test 能够改变浏览器窗口尺寸，方便开发人员预览网页在不同屏幕状况下的呈现。它包括一个常用的方案和自定义选项。

Snippy
Snippy 允许你保存网页片段以供将来使用。它可以抓取富文本，指定保存格式，方便用以捕捉段落，图片，链接等。

英文原稿：13 Useful Google Chrome Extensions for Web Developers | Web Design Ledger
翻译整理：13-useful-google-chrome-extensions-for-web-developers | 芒果

相关文章

• 发放 8 份 Google Wave 邀请 (22)
• 使用 JS 文件调用 Google AdSense 广告 (2)
• Google 新增上下文相关搜索建议 (4)
• 来自 Google 的网页音频播放器 (12)
• 提高 Google 搜索体验的 6 个技巧 (4)
• Google PageRank 再次更新，芒果心神不宁 (13)
• 谷歌短信提醒，免费订阅天气预报 (3)
• PageRank 更新，芒果 PageRank 值升至 1 (3)

订阅数目分布如下：

Google Reader：238
鲜果：55
抓虾：23
其他：16

尽管数据量较小，却足以说明 Google Reader 的市场占有率已经遥遥领先。鲜果虽然占据了一席之地，但其与 Google Reader 的差异好比百度和谷歌中国，份额影响并决定着命运。而且根据芒果的观察，鲜果的订阅数偶尔会出现无法被 FeedBurner 抓取的情况，稳定性还亟待加强。

关于 FeedBurner：

FeedBurner 是好东西，比国内的废品 FeedSky 强悍得多。作为全球最大的 RSS 托管服务网站，数据统计分析、RSS 输出优化、阅读器兼容、邮件订阅、Google Adsense 广告，无一不是强大而实用。对于芒果而言，相比较于 FeedBurner 鸡肋的域名绑定 (MyBrand) 功能，FeedSky 的唯一好处也仅限于此。

关于 Google Reader：

Google Reader 的崛起丝毫没有压力，RSS 订阅本身门槛较高，在并未普及的互联网时代，这种稍微高级的应用成功的寥寥无几，抓虾死了，鲜果沦为了阅读社区。芒果也一直使用 Google Reader，除了内容聚合，简洁的阅读模式在用户体验上也更为舒适和轻松。

相关文章

• FeedBurner 托管地址的细微变化 (3)
• Tabbloid，以电子杂志形式发布 RSS (7)
• FeedSmith，RSS Feed 重定向插件 (2)
• 2 款 RSS Feed 订阅统计插件 (1)
• 18 款 WordPress RSS 管理插件 (1)

然而，这份代码不兼容 Internet Explorer 或现有的许多旧版本浏览器。它只能在支持 CSS 变换属性的 Google Chrome，Safari 和 Firefox 3.5+ 浏览器下正常工作。

必备条件：支持 CSS 变换属性的浏览器
演示地址：http://joncom.be/code/css-clocks/

英文原稿：Pure HTML Clocks using Javascript & CSS Rotation | WebAppers
翻译整理：使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 | 芒果

相关文章

• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (0)
• Closure Compiler，压缩！还是压缩！ (5)
• YUICompressor，强大的前端代码压缩工具 (1)
• 模块化之 HTML CSS 以及图片 (4)
• Web 开发与设计师速查手册大全（上） (2)
• 用 JavaScript 实现 HTML 代码运行框 (0)
• CSS3 Please! CSS3 即时预览体验 (0)

查看演示：http://www.webdesignerwall.com/demo/css3-dropdown-menu

预览

下图展示了不兼容 CSS3 情况下的菜单样式。

使用了一个渐变图像

白色透明的图像用于实现渐变效果。因为新的 CSS3 渐变特性还没有得到所有浏览器的支持，使用简便背景图片更为安全。

渐变的强度可以通过切换背景图像的上移或下移来改变。此外，渐变颜色可以很容易地通过改变背景颜色来调整。

CSS 代码

我不打算解释逐行解释 CSS 代码。下面的图片很好地解释了编写下拉菜单的关键点。

英文原稿：CSS3 Dropdown Menu | WebDesignerWall
翻译整理：使用 CSS3 创建下拉菜单 | 芒果

相关文章

• CSS3 Please! CSS3 即时预览体验 (0)
• CSS3 基本要素概览 (0)
• 70+ 必备的 CSS3 和 HTML5 教程资源 (1)
• CSS 3.0 参考手册（中文版） (11)
• 用 CSS3 实现未来的 Web (6)

每个小组都由其拥有者建立和开始。可以邀请朋友，同事，论坛会员，一起参与问题的讨论。 Qhub 提供了站点自定义功能。社区创建人拥有对社区的完全管理权限，包括会员和内容。当然，更为强大的是，它还提供域名绑定的功能。

如果有人问你一个问题，你有没有答案，为什么不开放给网络社区来共享呢？

演示案例：http://help.qhub.com
官方主页：http://qhub.com

英文原稿：Build Your Own Q&A Community with Qhub | WebAppers
翻译整理：使用 Qhub 建立自己的问答社区 | 芒果

随机文章

• 兼容不同浏览器的 CSS Hack 写法 (0)
• 25+ 最有用的网页设计开发类博客 (3)
• Twitter 默认网址缩短服务更换为 Bit.ly (0)
• 超强在线压缩/解压缩 PHP 脚本 (2)
• WP-Click-Tracker，链接点击跟踪插件 (1)
• 16 款优秀的 Firefox SEO 插件 (2)
• 2 款 WordPress 主题在线编辑器 (0)
• 8 个 JQuery 技巧和窍门 (1)

1、将博客文章提交到社会化书签网站。
社会化书签网站大都有比较可观的用户群体。可以尝试在 Digg，StumbleUpon 和美味书签 (Delicious) 大量添加博文，发布优质文章，不但可以导入流量，还能获得相关的反向链接。

2、与同类博客建立关系。
和定位一致的博客建立关系是至关重要的。这意味着，增加了彼此互访的机率，促进资源的相互吸收。此处并不是在谈论友情链接交换，而是指高质量的自然链接。

3、博客留言评论。
以读者的身份通过留言评论来引入链接，虽然很多博客对评论内容中的链接做了 nofollow 处理，但这并不是一无是处的。有时，可以通过指向某个相关博客文章的方式，而不是直接指向主页，这能够在很大程度上提升搜索排名。

随着时间的推移，博客受众越来越广，反向链接也不断增长，此时就可以逐渐减少这些工作。也就是说，每一次发布文章后，一般都会被引用几次，而优质的文章甚至可以被引用几十次。因此反向链接和权重的提升会很自动化地展开，你只需要关注博客内容即可。

增加单篇文章的反向链接可以参考以下两点：

1、拥有一份 HTML 网站地图。
网站地图即在博客的某个单独页面中，可以链接到所有曾经发布过的文章。可以通过利用文章存档的方式。这是一个非常有效的均衡分配方式，因为所有博文链接都会产生联系，而且将链接到博客的所有文章页面。WordPress 可以采用芒果推荐过的 Google XML Sitemaps 插件。

2、在博文中相互链接引用。
链接到旧的、相关的文章也可以提高 PageRank 和搜索引擎排名，为读者带来更多的阅读价值。当你编写新文章时，请试图找一些内容相关的文章链接。

最后，请注意，过多的反向链接没有必要，并不能对 PageRank 产生良性影响。如果反向链接数目适当，并使用以上两种方法，你的链接资产自然会遍布整个博客，即便是没有反向链接的页面，也会获得一些 PageRank 值。

英文原稿：How Do I Get Backlinks to My Posts, Making Sure They Will Get a Good PageRank? | Daily Blog Tips
翻译整理：增加反向链接以提高 PageRank 的几个方法 | 芒果

相关文章

• 没有大不留大不留大不留的芒果 (7)
• Google PageRank 再次更新，芒果心神不宁 (13)
• 6 款 PageRank 值查询工具 (2)
• PageRank 更新，芒果 PageRank 值升至 1 (3)
• PageRankAlert，Google PageRank 监测工具 (1)
• CheckPageRank，PageRank 真假查询 (1)
• Page SEO，查看所有页面的 PageRank 值 (0)
• Google PageRank 算法详解 (0)

如果说 FastStone 很牛叉，那么 PicPick 就是灰常牛叉。 PicPick 提供了三大功能，即图像编辑、截取屏幕、辅助工具。

1. 图像编辑

图像编辑不但提供了类似画图工具的简单功能，而且支持剪贴板、缩放、旋转、图像效果等基本处理方式。另外，标签式操作方案更贴近 Photoshop 等软件，比较容易上手。

2. 截取屏幕

支持截取全屏、活动窗口、控件（指定区域）、矩形区域、固定区域、手绘区域，可进行重复截取、滚动截屏等操作。截取的图像允许指定保存格式，也可以指定输出方式，更甚者是直接发送到诸如 Facebook、Twitter、MS Office 办公软件的第三方应用程序。

3. 辅助工具

丰富实用的辅助工具是芒果推荐 PicPick 的一大理由。取色器、调色板、放大镜、标尺、量角器、坐标轴、白板……总之各式工具玲琅满目应有尽有。

其中，标尺需要方向键定位，这点貌似没有 FastStone 的鼠标定位方式灵活。这里推荐一下白板功能（这个白板不是麻将里的白板），让你直接在屏幕上涂鸦乱画，并且输出保存为图片。

注意：FastStone 的快捷键注册会和 PicPick 相冲突，如果喜欢习惯快捷键操作方式，请勿将这两款软件混合使用。

下载地址：Dropbox 网盘 | 官方主页 | 来自芒果

随机文章

• 易贴，简易在线记事本 (0)
• 虾米网，高品质音乐互动社区 (0)
• YUI 2: Dom Collection (0)
• Cool Tags，标签云着色插件 (3)
• Super Switch，禁用 WordPress 部分功能 (0)
• FriendFeed 全新版本正式上线 (0)
• 简体中文版 Bing 搜索上线 (2)
• 10 款临时电子邮件服务 (0)

浏览器支持

Mozilla Firefox/Opera/Safari/Google Chrome/Internet Explorer 8

注：IE8 对 Data URI 的支持仅限于 img 标签和 CSS 背景，且数据必须小于 32k

格式

data:[<MIME-type>][;charset="<encoding>"][;base64],<data>

MIME-type: 指定数据的 MIME^[1] 类型
;charset="<encoding>": 指定数据的字符集
;base64: 指定数据的编码方案

默认编码方案由 ;base64 指定，如果缺省，数据必须使用 URL Encoding^[2] 转换为有效 ASCII 格式。如果 <MIME-type> 缺省，默认参数为 text/plain 类型，字符集为 US-ASCII 方案。

示例

HTML:

<img src="Data URI" alt="" />

CSS:

selector{background:url(Data URI);}

优势

1. 减少 HTTP 请求，节约带宽
2. 避免频繁建立 TCP 连接，加快载入速度
3. 使用 HTTPS 时，可减少开销
4. 避免浏览器并发连接数的限制
5. 防止非法的外部引用

缺陷

1. 不被单独缓存，父文件重新载入时必须重新加载
2. 内容变更时必须重新编码和嵌入
3. 缺乏 IE6 和 IE7 的支持
4. IE8 限制数据大小为 32k
5. base64 编码会增加 1/3 数据量

自动化

来自 Nicholas C. Zakas 的 DataURI 自动化工具，命令行格式：

java -jar datauri-x.y.z.jar -o <output filename> <input filename>

兼容 IE6 & IE7

通过 CSS Hacks 结合 MHTML^[3] 方案解决 IE6 和 IE7 不支持 DataURI 的情况。

/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:<identifier>
Content-Transfer-Encoding:base64

<data>
*/
selector{*background:url(mhtml:<stylesheet>!<identifier>);}

_: 指定分隔符 (任意字符串)
identifier: 指定内容位置标识符
stylesheet: 指定样式表绝对路径

[1] MIME: http://zh.wikipedia.org/wiki/MIME
[2] URL Encoding: http://www.w3schools.com/TAGS/ref_urlencode.asp
[3] MHTML: http://en.wikipedia.org/wiki/Mhtml

相关文章

• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• 细线表格的浏览器兼容写法 (0)
• 模块化之 HTML CSS 以及图片 (4)
• Web 开发与设计师速查手册大全（上） (2)
• CSS3 Please! CSS3 即时预览体验 (0)
• 芒果教你清除浮动 (1)
• CSS3 基本要素概览 (0)
• 5 个简单实用的 CSS 属性 (5)

入门

使用 Dom Collection，需要在页面中使用 script 标签包含以下源文件：

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js"></script>
<!-- Source file -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/dom/dom-min.js"></script>

使用 Dom Collection

这部分介绍了 Dom Collection 的几种常见用途。包括以下几个小部分：

Quick Start
Positioning HTML Elements
Getting and Setting Styles
Getting the Viewport Size
Managing Class Names

快速入门

// #test: Find the element with an id of 'test' and store it in a variable
var element = YAHOO.util.Dom.get('test');

// .test: Get all elements with class 'test' (will be an array if there's more than one)
var elements = YAHOO.util.Dom.getElementsByClassName('test');

// div.test: Get all divs with class 'test'
var elements = YAHOO.util.Dom.getElementsByClassName('test', 'div');

// Get the first element with class 'test'
var element = YAHOO.util.Dom.getElementsByClassName('test'))[0];

// p: Get all p elements with the native DOM method getElementsByTagName
var elements = document.getElementsByTagName('p');

// Get the first p element
var element = document.getElementsByTagName('p'))[0];

定位 HTML 元素

由于不知道 HTML 元素在文档中的定位原理，获得元素在当前页面中的坐标可能比较困难。Dom Collection 提供的定位方法 (setXY(), getXY(), setX(), 等等) 可以确保准确定位。页面坐标被定义在整个 HTML 文档环境中，包括浏览器边框的一部分。

在以下示例中，getXY 方法返回一个带有 "test" 元素坐标值的数组。setXY 方法接受来自 HTML 元素 "test" 的坐标值，并将其应用到 "target" 元素上。

var pos = YAHOO.util.Dom.getXY('test');
YAHOO.util.Dom.setXY('target', pos);

获取和设置样式

getStyle 方法允许你检索给定元素样式对象的属性；setStyle 方法允许你设置元素样式对象的属性。在 CSS 中，由于浏览器的差异性，opacity (不透明度) 属性应用方式繁多，setStyle 和 getStyle 方法则规范化了 opacity 属性。注：CSS opacity 属性不支持 Opera 9 之前的版本。

以下示例中，setStyle 方法设置了 "test" 和 "test2" 元素的 opacity 属性值为 0.5 (即不透明度为 50%；不透明度的值被定义在 0 到 1 的范围内)。getStyle 方法返回 "test2" 元素的当前 opacity 属性值。

YAHOO.util.Dom.setStyle(['test', 'test2'], 'opacity', 0.5);
var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity');

请注意，上面的示例还演示了如何在一次调用中将 Dom Collection 方法应用到多个元素。

获取可视区域大小

可视区域 (Viewport) 被定义为当前可见文档区域的宽度和高度，与文档的绝对尺寸无关。由于浏览器和渲染模式的差异，获取当前可视区域大小可能有些困难。getViewportWidth 和 getViewportHeight 方法则能确保准确测量可视区域大小。

以下示例创建一个名为 viewport 的数组，并赋值当前可视区域的尺寸。

var viewport = [
   YAHOO.util.Dom.getViewportWidth(),
   YAHOO.util.Dom.getViewportHeight()
];

管理类名

Dom Collection 提供了一些动态管理 CSS 类名的方法。

其中包括：

getElementsByClassName(className, tagName, rootNode): 返回一个给定类名的元素数组。可以选择标签名和/或根节点参数控制选择范围，以提高性能。
hasClass(element, className): 确定某元素是否具有给定类名。
addClass(element, className): 为元素附加给定类名。
removeClass(element, className): 从元素中移除给定类名。
replaceClass(element, oldClassName, newClassName): 将给定元素的一个类名替换为另一个类名。

以下示例返回一个带有 "test" 类名的 div 元素数组：

var elements = YAHOO.util.Dom.getElementsByClassName('test', 'div');

英文原稿：YUI 2: Dom Collection | Yahoo! Developer Network
翻译整理：YUI 2: Dom Collection | 芒果

相关文章

• YUI 2: Event Utility (0)
• YUI 2: YAHOO Global Object (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• JavaScript 匿名函数代码模式 (0)
• Closure Compiler，压缩！还是压缩！ (5)
• YUICompressor，强大的前端代码压缩工具 (1)
• 使用 JS 文件调用 Google AdSense 广告 (2)
• 10 款基于 JavaScript 的 WYSIWYG 编辑器 (1)

虽然新浪微博上虚假帐号如雨后春笋般层出不穷，但芒果在此表示影响不大。

插件介绍：

WP-tsina是一个专为新浪微博用户开发的，可以将新发布的文章主动同步到新浪微博。后续功能将实现可在 WordPress 中对微博的管理。安装后，请设置好新浪微博的用户名和密码，以实现自动同步。

插件安装：

上传 WP-tsina 到你的 WordPress，激活，然后填写并保存新浪微博的用户名密码。（需要 WordPress 主机 PHP 配置支持 curl）

注：检测空间是否支持 curl 可以使用牛叉的 phpinfo() 函数。

由于芒果没能够抢注到 mangguo 这个帐号，不能不说是个遗憾。不过没关系，咱还有 Twitter 嘛！

插件主页：http://wordpress.org/extend/plugins/wp-tsina
下载地址：http://downloads.wordpress.org/plugin/wp-tsina.zip

相关文章

• Laconica，开源的微博客程序 (4)
• 嘀咕，又一个微博客 (0)

Markup:

<table>
    <tr>
        <th>table head (row1, col1)</th>
        <th>table head (row1, col2)</th>
        <th>table head (row1, col3)</th>
    </tr>
    <tr>
        <td>table data (row1, col1)</td>
        <td>table data (row1, col2)</td>
        <td>table data (row1, col3)</td>
    </tr>
    <tr>
        <td>table data (row2, col1)</td>
        <td>table data (row2, col2)</td>
        <td>table data (row2, col3)</td>
    </tr>
</table>

CSS:

table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}

相关文章

• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• Data URI 初探及其自动化 (0)
• 模块化之 HTML CSS 以及图片 (4)
• Web 开发与设计师速查手册大全（上） (2)
• CSS3 Please! CSS3 即时预览体验 (0)
• 芒果教你清除浮动 (1)
• CSS3 基本要素概览 (0)
• 5 个简单实用的 CSS 属性 (5)

YAHOO 全局对象也包含了一些贯穿整个框架的方法。

入门

YAHOO 全局对象必须在任何 YUI 脚本文件载入之前被包含。

<!-- YAHOO Global Object source file -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js"></script>
<!-- Additional source files go here -->

使用 YAHOO 对象的 Utility 方法

YAHOO.namespace
YAHOO.lang
YAHOO.lang.hasOwnProperty
YAHOO.lang.extend
YAHOO.lang.augment
YAHOO.log
YAHOO_config and YAHOO.env
YUI Module Names

YAHOO.namespace

YAHOO 对象自动创建了 YAHOO.util, YAHOO.widget, YAHOO.env, YAHOO.tool 和 YAHOO.example 五个命名空间。这些命名空间是为 YUI 框架本身所保留的。附加的命名空间用于创建基于 YUI 框架的自定义应用程序架构。

// Creates a namespace for "myproduct1"
YAHOO.namespace("myproduct1");
YAHOO.myproduct1.Class1 = function(info) {
    alert(info);
};

// Creates a namespace for "myproduct2", and for "mysubproject1"
YAHOO.namespace("myproduct2.mysubproject1");
YAHOO.myproduct2.mysubproject1.Class1 = function(info) {
    alert(info);
};

YAHOO.lang

YAHOO.lang 包含了 YUI 框架中所使用的 JavaScript 语言工具和扩展。

// true, an array literal is an array
YAHOO.lang.isArray([1, 2]);

// false, an object literal is not an array
YAHOO.lang.isArray({"one": "two"});

// however, when declared as an array, it is true
function() {
    var a = new Array();
    a["one"] = "two";
    return YAHOO.lang.isArray(a);
}();

// false, a collection of elements is like an array, but isn't
YAHOO.lang.isArray(document.getElementsByTagName("body"));

// true, false is a boolean
YAHOO.lang.isBoolean(false);

// false, 1 and the string "true" are not booleans
YAHOO.lang.isBoolean(1);
YAHOO.lang.isBoolean("true");

// null is null, but false, undefined and "" are not
YAHOO.lang.isNull(null); // true
YAHOO.lang.isNull(undefined); // false
YAHOO.lang.isNull(""); // false

// a function is a function, but an object is not
YAHOO.lang.isFunction(function(){}); // true
YAHOO.lang.isFunction({foo: "bar"}); // false

// true, ints and floats are numbers
YAHOO.lang.isNumber(0);
YAHOO.lang.isNumber(123.123);

// false, strings that can be cast to numbers aren't really numbers
YAHOO.lang.isNumber("123.123");

// false, undefined numbers and infinity are not numbers we want to use
YAHOO.lang.isNumber(1/0);

// true, objects, functions, and arrays are objects
YAHOO.lang.isObject({});
YAHOO.lang.isObject(function(){});
YAHOO.lang.isObject([1,2]);

// false, primitives are not objects
YAHOO.lang.isObject(1);
YAHOO.lang.isObject(true);
YAHOO.lang.isObject("{}");

// strings
YAHOO.lang.isString("{}"); // true
YAHOO.lang.isString({foo: "bar"}); // false
YAHOO.lang.isString(123); // false
YAHOO.lang.isString(true); // false

// undefined is undefined, but null and false are not
YAHOO.lang.isUndefined(undefined); // true
YAHOO.lang.isUndefined(false); // false
YAHOO.lang.isUndefined(null); // false

YAHOO.lang.hasOwnProperty

当遍历一个作为哈希表的对象时，YAHOO.lang.hasOwnProperty 用于过滤直接添加到对象原型上的属性。除 Safari 以外，该功能在所有 A 级浏览器中都得到了原生支持。由于 YUI 中所有的 hasOwnProperty 方法都具有一定的预见性，因此推荐使用它。如果本地浏览器支持原生方法，则 YAHOO.lang.hasOwnProperty 会优先调用。

// this is what we are protecting against
Object.prototype.myCustomFunction = function(x) {
    alert(x);
}

var o = {};
o["foo"] = "bar";
o["marco"] = "polo";

// this is where we need the protection
for (var i in o) {
    if (YAHOO.lang.hasOwnProperty(o, i)) {
        alert("good key: " + i);
    } else {
        alert("bad key: " + i);
    }
}

YAHOO.lang.extend

YAHOO.lang.extend 为建立继承对象的原型、构造、超类 (superclass) 属性，提供了一个简单的机制。能防止继承对象的构造方法 (例如，超类) 被执行两次。在 YUI 2.8.0r4 版本中，YAHOO.lang.extend 已被迁移至 YAHOO.lang 包。YAHOO.extend 是不建议使用的 YAHOO.lang.extend 别名。

YAHOO.namespace("test");

YAHOO.test.Class1 = function(info) {
    alert("Class1: " + info);
};

YAHOO.test.Class1.prototype.testMethod = function(info) {
    alert("Class1: " + info);
};

YAHOO.test.Class2 = function(info) {
    // chain the constructors
    YAHOO.test.Class2.superclass.constructor.call(this, info);
    alert("Class2: " + info);
};

// Class2 extends Class1.  Must be done immediately after the Class2 constructor
YAHOO.lang.extend(YAHOO.test.Class2, YAHOO.test.Class1);

YAHOO.test.Class2.prototype.testMethod = function(info) {
    // chain the method
    YAHOO.test.Class2.superclass.testMethod.call(this, info);
    alert("Class2: " + info);
};

var class2Instance = new YAHOO.test.Class2("constructor executed");
class2Instance.testMethod("testMethod invoked");

YAHOO.lang.augment

YAHOO.lang.augment 提供了将一个对象的原型属性应用到另一个对象的代码重用方法。YAHOO.augment 是不建议使用的 YAHOO.lang.augment 别名。

<!-- debugger output for environments without "console" -->
<div id="consoleelement">&nbsp;</div>

////////////////////////////////////////////////////////////////////////////
// The ConsoleProvider example will log to the console if available, or a
// div with id="consoleelement" if the console is not available
////////////////////////////////////////////////////////////////////////////
YAHOO.example.ConsoleProvider = function() { };
YAHOO.example.ConsoleProvider.prototype = {
    log: function(msg) {
        // use the error console if available (FF+FireBug or Safari)
        if (typeof console != "undefined") {
            console.log(msg);
        // write the msg to a well-known div element
        } else {
            var el = document.getElementById("consoleelement");
            if (el) {
                el.innerHTML += "

" + msg + "

";
            }
        }
    }
};

////////////////////////////////////////////////////////////////////////////
// Define a class that should be able to write debug messages
////////////////////////////////////////////////////////////////////////////
YAHOO.example.ClassWithLogging = function() { };
YAHOO.lang.augment(YAHOO.example.ClassWithLogging, YAHOO.example.ConsoleProvider);

////////////////////////////////////////////////////////////////////////////
// Try it out
////////////////////////////////////////////////////////////////////////////
var c = new YAHOO.example.ClassWithLogging();
c.log("worked");

YAHOO.log

YAHOO.log 包含在 Yahoo 全局对象中，即便 YUI 日志记录组件 (YUI Logger Control) 未载入页面，也能确保日志代码可以在任何 YUI 代码环境中被包含。当你从项目移除调试组件时，这可以防止出现错误。如果日志记录组件可用，YAHOO.log 执行 YAHOO.widget.Logger.log 方法；否则不做任何事情。查看日志记录组件文档以获得更多信息。

YAHOO.namespace("test");

YAHOO.test.Class1 = function(info) {
    YAHOO.log("Class1: " + info, "error", "Class1");
};

YAHOO_config and YAHOO.env

YAHOO.env 包含了浏览器环境信息。尤其包含了已经在网页上加载的所有 YUI 组件信息。该数据可以被任何使用 YAHOO.env.getVersion 的组件访问，对于那些动态加载的 YUI 环境非常有用。

你可以在 YAHOO_config 中定义一个回调函数，每次当一个新的 YUI 模块被植入页面时，回调函数即刻执行。完美替代采用轮询技术载入 YUI 组件的方法。被定义为 YAHOO_config.listener 的回调方法，将获得包含以下信息的对象参数：

YUI Module Names

每个 YUI 组件都有一个相应的模块名称，在 YUI 代码中作为唯一标识符来使用。例如，Event Utility (事件工具包) 被称为 "event"。YAHOO 全局对象和其他组件 (如 YUILoader 工具包) 都使用了这些独一无二的模块名称。以下是 YUI 框架的所有模块名称。

在以下扩展代码示例中，YAHOO_config 对象被用于在 YUI 组件加载时注册一个事件监听：

<html>
<head>
<script type="text/javascript">

// will be called each time a module is loaded
function mycallback(info) {

    // see the table in the documentation above for
	// the contents of the info object passed in here
	// as your argument. 

    alert(info.name + " loaded");

    // once the logger is on the page we can get to work
    if (info.name == "logger") {
        YAHOO.widget.Logger.enableBrowserConsole()
        var l = new YAHOO.widget.LogWriter("(");

        YAHOO.example.EnvTest = function() {
            function log(msg,cat) {
                var c=c||"info";
                YAHOO.log(msg,c,"LangTest");
            }

            return {
                init: function() {
                    new YAHOO.widget.LogReader("logoutput");
                    log("init");
                },

                showInfo: function(e, module){
                    // YAHOO.env.getVersion returns the same data
                    // object that YAHOO_config.listener receives
                    var info = YAHOO.env.getVersion(module);

                    log("name: " + info.name);
                    log("version: " + info.version);
                    log("build: " + info.build);
                    log("versions: " + info.versions);
                    log("builds: " + info.builds);
                    log("mainClass version: " + info.mainClass.VERSION);
                }
            };
        } ();

        YAHOO.util.Event.addListener(window, "load", YAHOO.example.EnvTest.init);
        YAHOO.util.Event.addListener("showeventbutton", "click", YAHOO.example.EnvTest.showInfo, "event");
    }
}

YAHOO_config = {
    listener: mycallback
};

</script>
<script src = "../src/js/YAHOO.js" ></script>
<script src = "../../build/event/event.js" ></script>
<script src = "../../build/dom/dom.js" ></script>
<script src = "../../build/dragdrop/dragdrop.js" ></script>
<script src = "../../build/logger/logger.js" ></script>
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
<style> #logoutput {float: right}</style>
</head>
<body>
<input type="button" id="showeventbutton" value="show event version" />
<div id="logoutput"></div>
</body>
</html>

英文原稿：YUI 2: YAHOO Global Object | Yahoo! Developer Network
翻译整理：YUI 2: YAHOO Global Object | 芒果

相关文章

• YUI 2: Event Utility (0)
• YUI 2: Dom Collection (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• JavaScript 匿名函数代码模式 (0)
• Closure Compiler，压缩！还是压缩！ (5)
• YUICompressor，强大的前端代码压缩工具 (1)
• 使用 JS 文件调用 Google AdSense 广告 (2)
• 10 款基于 JavaScript 的 WYSIWYG 编辑器 (1)

错误模式：语法错误警告

function(){
// insert code here
}();

模式一：函数字面量 (Function Literal)

先声明函数对象，然后执行。

(function(){
// insert code here
})();

模式二：优先表达式 (Prior Expression)

由于 JavaScript 按照从内到外的顺序执行表达式，因此使用括号来强制执行已声明的函数。

(function(){
// insert code here
}());

模式三：Void 操作符 (Void Operator)

使用 Void 操作符执行一个单独的操作数。

void function(){
// insert code here
}();

从技术上讲，这三种代码模式是等价的。但在实际应用中，例如 YUI、jQuery 等框架，模式一更被广泛使用。

相关文章

• YUI 2: Event Utility (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (0)
• YUI 2: Dom Collection (0)
• YUI 2: YAHOO Global Object (0)
• Closure Compiler，压缩！还是压缩！ (5)
• YUICompressor，强大的前端代码压缩工具 (1)
• 使用 JS 文件调用 Google AdSense 广告 (2)
• 10 款基于 JavaScript 的 WYSIWYG 编辑器 (1)