CssRain-前端技术

Ext 编辑器正式版发布.

Ext Designer is a fantastic new desktop application which eases the development of Ext interfaces. With a simple drag and drop interface, Ext Designer allows you to rapidly assemble your application’s visual structure and immediately export your code as Javascript classes or JSON. It can even be used by business managers and non-programmers to create a prototype, which can then be enhanced by developers. Ext Designer is available for every major OS, including Windows, Mac, and Linux.

在非IE浏览器中实现“灰阶化[1]”.

感谢 walkingp 的投稿。
原文：http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
在非IE浏览器中实现“灰阶化[1]”

这个问题看似简单，实际上要付出很大的努力[2]。要的结果很简单：在所有非IE浏览器中模拟Internet Explorer浏览器的grayscale（灰度）滤镜。然而，它的解决方法并非你想得那么简单，这也让我着实大大地吃了一惊。
在 IE中，grayscale滤镜可以应用到任意一个元素中，它会很直观地将元素转变为灰度。可以使用下面这行复杂且专有的CSS来实现grayscale滤镜。

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

如上所示，在IE中实现这种效果简单是小菜一碟；然而，在其他的浏览器中，需要引起很大的关注。
需要有两件情况值得考虑：图片元素和非图片元素。“非图片”类元素实现十分简单：在当前文档中遍历每个元素，寻找类似“backgroundColor”和 “color”的色彩属性，将它的RGB颜色值转换为灰度值。有不少方法可以实现；注意我们这里不是说降低图片的饱和度；“灰阶化”很明显跟它不一样。

// Desaturate:降低饱和度
function RGBtoDesat(r,g,b) {
var average = (r + g + b) / 3;
return {
r: average,
g: average,
b: average
};
}
 
// Grayscale:灰阶化
function RGBtoGrayscale(r,g,b) {
var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
return {
r: mono,
g: mono,
b: mono
};
}

因此，每个带颜色属性的元素要使用它来转为灰阶；初始颜色用来重置属性值。
我们的图片能否转为灰阶取决于两个因素；一是浏览器必须要支持HTML5 canvas元素和它getImageData方法，二是主机上的所有图片必须位于同一域名下；除此外，主机上的图片不能脱离getImageData方法而不管它是否支持[3]。Google Chrome浏览器和Safari（4以下版本）由于不支持getImageData，先不作讨论。其他的浏览器支持canvas元素，完全可以做到“灰阶化”图片。
实现这种方式是要“手工”遍历图片中的每一像素，并应用我们用来设置CSS 颜色属性的RGBtoGrayscale函数。真要这样做的话，浏览器绝对吃不消；除非有极其快速的Javascript引擎来承受大图片处理的压力。
鉴于上面提到的原因，因此在任一个元素需要“灰阶化”前，添加一个“预置”函数去运行显得尤为必要，这个函数可以使用零超时递归技术[4]来避免耗死浏览器。如果仅仅是小图片需要转换的话，不必使用“预置”函数，可以直接使用这种暴力转换。
为什么呢，这是为什么呢？
你肯定想知道在“灰阶化”会有哪些应用。那么，比如说：降低色彩以减少用户的视觉焦点，以此来减少用户对你网站上五颜六色东西的关注；比如说，光箱特效。像 vBulletin的论坛系统就使用了这种效果，它会你点击离开时，将页面变灰；然后会弹出确认框，这个确认框非很容易识别，因为它是页面中惟一的带色彩的东西。
“灰阶化”困扰我的真实原因是因为我很想知道是否有可能做到这个目的。我已经知道在IE浏览器里有这个滤镜，我还想看看在其他浏览器中能否模拟实现这种方便的特效。我也知道这种特效可能被认为已经过时了，但这并不重要；我仅仅是对实现它很感兴趣。
示例
我做了一个示例页面，上面有几个格斗士[5]的图片，功能已经在这篇文章中说过了。注意，在Safari（小于4）或才 Chrome（还有可能在Firefox老版本（V.2以前））不起作用；不要忘了它仅仅是一个试验。
http://james.padolsey.com/demos/grayscale/
使用方法
要对一个元素实现“灰阶化”需要调用 grayscale()函数，并将元素作为参数传递，比如：

   var el = document.getElementById( 'myEl' );
   grayscale( el );
   // 也可以传递一个DOM集合
   // (这样所有的元素都会得到“灰度效果”)
   grayscale( document.getElementsByTagName('div') );
    //也可以在jQuery对象集合中使用
   grayscale( $('div') );


若要重置元素（返回到原来的颜色状态）必须调用grayscale.reset()，并将需要重置的元素作为参数传递：
   grayscale.reset( el );
   // reset()同样可以接受DOM对象或jQuery对象集合参数
   grayscale.reset( $('div') );
其中的prepare函数，上面已经讲过了，在有大图片要处理的情况下需要使用到，或者即使只是几个小图片。注意大图片需要有一会儿的时间去处理（一张 300×300的PNG格式图片在“预置”方式下需要耗费3秒钟的时间）。
   grayscale.prepare( document.getElementById('myEl') );
   // 同样可以接受DOM对象或jQuery对象集合参数
   grayscale.prepare( $('.gall_img') );
[完]
注：
[1]:灰阶化：原文grayscaling，意为“采取灰度标准”，即灰阶化，将图片由彩色转为灰度；
[2]原文为”This started out as a little experiment and eventually turned into quite an endeavor.“，可能存在翻译问题；
[3]原文为“externally hosted images cannot be passed into ‘getImageData’ regardless of whether it’s supported.”，翻译存疑；
[4]零超时递归技术：原文zero-timeout recursion technique，应为zero-time recursive technique；参见http://en.wikipedia.org/wiki/Recursion_(computer_science)；
[5]格斗士：原文blood-thirsty hunters，嗜血的猎人

jQuery资讯09.

jQuery高亮显示文本中重要的关键字.
实现原理: 将要高亮显示的文字加上<span>段落标记， class=”mask”的div 做为遮罩层，使此遮罩层位于文字内容之上（z-index属性，使用Jquery给段落动态添加样式类……

断桥残雪PHP祝福墙发布.
断桥残雪爱墙公布之后，受到很多站长的喜爱，多数站长是尊重版权的，而很多站长是不尊重断桥残雪辛苦劳动成果的~已经跟他们联系了~希望大家使用断桥残雪爱墙系统的时候在网站底部保留我网站的版权信息~谢谢大家对断桥残雪爱墙的支持……

[译]理解JavaScript测试
一个最常问及的问题就是: 为什么要做JavaScript测试. 也许从一个服务器端程序员的视角来看JavaScript不过是小儿科(而不必测试), 也许问话者根本不了解测试. 而实际情况是: 为了兼顾多种运行平台, 要想写出高质量的JavaScript代码, 很难. 我们得设法了解何处会碰到浏览器不兼容问题, 而测试可以帮我们侦测这类问题的所在……

基于JQuery的7款选项卡(Tabs)实例.
这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟，你一定会喜欢上它的……

jQuery资讯08.

infoq:微软加大对jQuery的投资力度.
近日，微软重申将对jQuery开发提供帮助，首先将会增加模板支持并分配一定的资源，这其中包括全职的开发者。jQuery创建者John Resig表示，jQuery将一如既往地保持独立、开源项目的本色，并不会迁移到CodePlex上……

ComoJS做适合自己的javascript框架.
Como JS是一款代码简易而功能强大的Javascript框架，也是作者在工作过程中的经验总结，实用性强；通过它，能够简化Javascript代码开发，增强代码重用性，能够异步按需加载js和css文件，增强page的加载速度……

跟我一起学写jQuery插件（附完整实例及下载）
jQuery如此流行，各式各样的jQuery插件也是满天飞。你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢？如果你的答案是肯定的，那么来吧！和我一起学写jQuery插件吧……

John Resig谈改进Web应用的高级JavaScript技术
2010年2月，JavaScript框架jQuery的创建者及核心开发人员John Resig，在今年迈阿密举行的Future of Web Apps大会上作了演讲。在短短25分钟的演讲中，John为与会者概述了jQuery 1.4背后的新特性和新理念。以下是根据他的演讲录音整理的文字稿……

jQuery资讯07.

jQuery实现布局高宽自适应
在软件布局时经常是上左右的框架布局并且需要宽度的自适应，div+css是无法实现，所以需要js来辅助。主要通过resize这个方法。也就是当窗口大小改变时重新计算布局的高宽,其它直接看代码即可…….

做网站用UTF-8还是GB2312？
经常我们打开外国网站的时候出现乱码，又或者打开很多非英语的外国网站的时候，显示的都是口口口口口的字符，wordpress程序是用的UTF-8，很多cms用的是GB2312,为什么有这么多编码？……

2009年度最佳jQuery插件
jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件…….

jQuery.data()方法与内存泄漏
在jQuery的官方文档中，提示用户这是一个低级的方法，应该用.data()方法来代替。$.data( element, key, value )可以对DOM元素附加任何类型的数据，但应避免循环引用而导致的内存泄漏问题……

jQuery资讯06.

jQuery最新1.4 版本的十五个新特性
jQuery 1.4 最近发布了。 超乎大家的预期，这次并非简单的修修补补，1.4 包含了很多新特性、功能增强和性能提升！本文即向您介绍这些可能对你十分有用的新特性和优化增强……

jQuery超链接提示效果(完善版)
学习jQuery，买了一本《锋利的jQuery》。看了前面的几章，觉得这本书还是很不错的。对于有CSS基础的同学，通过这本书学习jQuery应该是很容易的……

介绍一款jquery水平导航条插件
Features（功能特点） Full cross-browser compatibility（兼容各个浏览器） Fully accessible even when javascript is turned off, as a pure css menu（javascript …

Pines Notify jQuery Plugin：好看易用的jQuery消息提示插件
Pines Notify jQuery Plugin是Pines项目(http://sourceforge.net/projects/pines/)的一部分，由Hunter Perrin创作，用于显示消息提示框。其特点包括可定时隐藏，并带有动画效果……

jQuery资讯05.

jQuery大热，会成为Web下一个事实标准？
这种推测并非空穴来风。一年多前，名著《JavaScript高级程序设计》(试读链接) 作者、Yahoo首页的首席前端工程师Zakas曾发表博客到底什么是Web标准，其中他评论道：终端浏览器的支持率决定Web的事是标准。并不是W3C制定的东西就是标准，事实上W3C很多时候的表现都不怎么样，他们更擅长咬文嚼字。而且，如果所谓的标准连占统治地位的浏览器都不支持，那怎么还能说是标准呢……

jQuery 折腾小记及汇总.
从去年的11月发了篇《JQuery Adding》正式开始折腾jQuery，至现在用jQuery加的效果也有好一些了，所以就特来整理整理也汇算个总。说白了jQuery就是JS，它只是把JS内的很多函数封装了，而且封装的相当不错，让懂点网页基础知识很容易就可以上手……

如何创建无限滚动 的web画廊.
When working my way through a web gallery, I find it annoying when I must change pages; so in today’s tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX. Let’s get started!……