Time Machine

We are Catalysts 6

十月 25th, 2009 归档于：懒得分类 Tag： Internet, Labs, Mozilla

看标题你或许一头雾水，这篇其实是关于Mozilla Labs的“枪文” （如果Mozilla愿意付钱给我的话）Mozilla Labs的几款新应用让人激动不已。如果说互联网改变了我们的生活方式，那么Mozilla作为这种改变的催化剂当之无愧。来看看几款神奇的应用吧：
More »

漫画:混乱的标记语言XHTML2/HTML5 12

七月 30th, 2009 归档于：工作学习 Tag： html5, xhtml2

转自：Yes! B/S !

点击下方图片或者混乱的标记语言漫画链接，可以打开更大、更清晰的大图。
More »

jQuery入门之–属性(一)4

七月 4th, 2009 归档于：工作学习 Tag：

Closure我来讲解属性部分, 这是相当有用的, 可要认真上课.

首先,jquery中对html标签属性进行操作的关键词是 attr .没错,就4个字母, 不要告诉我你记不住.

用法一: $(选择器).attr(属性名) 它的作用就是获取指定元素( $(选择器)部分 )的指定属性的值. 看例子:

有这样一段html:

<img src=“http://t.douban.com/lpic/s3791510.jpg” alt=“变形金刚海报” width=“500″ height=“300″ />

 

那么你要获取到图片的地址该怎么办呢? 这样: $(“img”).attr(“src”) 就这么简单, 你用alert或者其它形式输出一下就看到图片的地址了. 那么我要取得图片的描述呢? 这样: $(“img”).attr(“alt”) .够简单吧. 它不但可以取到html本身有的属性, 而且也能取到你自己定义的属性, 比如上例中的 funny属性, 自己试试能不能获取到它的值. 注意: 如果你要获取的属性是不存在的, 那么jquery就会返回一个 undefined .

用法二: $(选择器).attr(属性名, 属性值) 它的作用是为所有匹配的元素设置一个属性值。

假如页面中有一堆这样的html:

<img /><img />

 

我们写一句这样的jquery代码: $(“img”).attr(“src”,”http://t.douban.com/lpic/s3791510.jpg”) 这样上面一堆无意义的img标签就变成了:

<img src=“http://t.douban.com/lpic/s3791510.jpg” /><img src=“http://t.douban.com/lpic/s3791510.jpg” />

 

很容易理解吧. 假如我们想给图片设置高度,那么只要 $(“img”).attr(“height”,”300″) . 再要设置宽度就这样: $(“img”).attr(“width”,”500″) . 如此看来是没有什么问题, 但是当要设置多个属性时, 一个一个的这样写真是太麻烦了, 那么我们来看第三个用法.

用法三: $(选择器).attr(Map) 它的意思就是给指定元素设置多个属性值, 我们重点看一下 Map 是什么意思. 它其实是这样一种序列:

{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

那么我要实现用法二中的例子只要这样写:

$(“img”).attr({src:“http://t.douban.com/lpic/s3791510.jpg” , height: “300″ , width : “500″})

以上我们学会了获取属性值, 设置属性值, 那么怎么删除属性呢?

jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:

同样是用法一中的html代码, 我想删掉图片的高度属性, 那么就这样:

$(“img”). removeAttr(“height”);

嗯,就这么简单. 聪明的同学一定看出了, attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了.

今天就到这里, 下节我们玩玩class 属性, 因为class和css有密不可分的关系, 我们就可以利用它做一些好玩的东西.

WordPress 2.8技巧 for 开发人员 0

六月 21st, 2009 归档于：工作学习 Tag：

下面是Keith Dsouza收集的几个WordPress 2.8技巧。

WordPress Codex – Version 2.8

WordPress官方网站对2.8版本的详细更新和新特性介绍。

Custom Taxonomies in WordPress 2.8 – Justin Tadlok

WordPress 2.3 实现了Tag交叉方案，而2.8可以让你新增分类方案了。这对于用WordPress开发CMS网站来说是很实用的。

Build A WordPress 2.8 Widget – WP Engineer

通过WordPress 2.8新的Widget API, 创建一个Widget变得更加容易了。

WordPress 2.8 and the body_class() Function – Nathan Rice

WordPress 2.8新增了一个body_class()函数，通过函数为各个不同的页面生成class选择器，网页设计人员可以更加方便的不同页面的样式了。

Authentication in WordPress 2.8 – Will Norris

如何通过OAuth认证机制来获得用户的授权，而用户无需透露用户名和密码。WordPress插件和第三方应用开发者值得一看。

Loading JavaScript in Footer in WordPress 2.8 – Lester Chan

如何在页面的底部载入JavaScript。

jQuery 1.3.2 新功能 5

五月 30th, 2009 归档于：工作学习 Tag：

转自: 随想飞翔, 译自:Brandon Aaron

增强的toggleClass() [via: jQuery Edge: Enhanced .toggleClass() ]

1. toggleClass也可以和addClass一样，用空格分隔多个class名称了。

.toggleClass(“a b”) == .toggleClass(“a”).toggleClass(“b”)

2. 无参数时，自动删除、恢复全部class，也可以传递一个布尔值，true为恢复class，false为删除class。

3. 也可以第一个参数为class名，第二个参数为布尔值，具体用法如下。

// 原始代码
// <div class=”a b c”></div>
// 删除、恢复全部class

$(‘div’).toggleClass();        // <div class=”" />

$(‘div’).toggleClass();        // <div class=”a b c” />

$(‘div’).toggleClass( false ); // <div class=”" />

$(‘div’).toggleClass( true );  // <div class=”a b c” />
// 删除、恢复多个 class

$(‘div’).toggleClass( “a b” );          // <div class=”c” />

$(‘div’).toggleClass( “a c” );          // <div class=”a” />

$(‘div’).toggleClass( “a b c”, false ); // <div class=”" />

$(‘div’).toggleClass( “a b c”, true );  // <div class=”a b c” />

简化的hover() [via: jQuery Edge: Simplified .hover()]

旧代码：

$(‘li’).hover(function() {

$(this).addClass(‘test’);

}, function() {

$(this).removeClass(‘test’);

});

新代码:

$(‘li’).hover(function() {

$(this).toggleClass(‘test’);

});

live冒泡事件支持预设参数 [via: jQuery Edge: Live Events now with Data ]

// 预设参数
vareventConfig={
selectedClass:“selected”
};
$(“li”).live(“click”, eventConfig, function( event ) {

// 绑定函数的参数event的data属性即为传递的预设参数

var selectedClass = event.data.selectedClass;

});

更好的支持其它windows、document对象
通过.contents()获得其它框架的document对象。

var iframeDoc = $(‘iframe’).contents().get(0);

这样就可以获取其height/width/CSS属性或绑定事件。

// 获得框架宽度
$(iframeDoc).width();
// 获得框架高度

$(iframeDoc).height();
// 绑定事件

$(iframeDoc).bind(‘click’, function( event ) {

// do something

});
// 获得CSS属性值

$(‘div’, iframeDoc).css(‘backgroundColor’);

注意，如果要处理框架内部网页元素，请使用此插件（配合jQuery 1.3.3/+），和以下语法：

$(‘iframe’).win().bind(‘load’, fn);

$(‘iframe’).doc().find(‘a’).click(fn);

增强的index() [via: jQuery Edge: Versatile .index() ]

两个变化，第一个，支持传递selector作为参数。

旧代码:

$(“img”).index( $(“img.selected”) );

新代码

$(“img”).index( “.selected” );

第二个，无参数传递，直接查找在同级元素中的位置。

旧代码：

var $this = $(“.selected”);

$this.parent().children().index( $this );

新代码：

$(“.selected”).parent().index();

自行指定this对象 [via: jQuery Edge: Bind with a Different “this” ]

在1.3.3中，可以在bind/live绑定事件时，自行指定this参数代表的对象。这个用法需求不多，而且可用event.target,event.currentTarget代替。

具体用法请参看原文。

Time Machine 专用本 8

五月 29th, 2009 归档于：时光机器 Tag： note toy

今天竟然在路边无意中发现了”时光机”的记事本, 买来做个纪念. 不过基本写不了字, 里面有不少图案. 布面的:

Time Machine Note 1

再来张正脸的:

Time Machine Note 2

打开:

Time Machine Note 3

遗憾的是老板就剩两本了, 还有点脏兮兮的. 不过幸好外面还有塑料膜.

jQuery性能优化指南 14

五月 3rd, 2009 归档于：文摘翻译 Tag： javascript, jquery, 性能

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:

总是从ID选择器开始继承
在class前使用tag
将jquery对象缓存起来
掌握强大的链式操作
使用子查询
对直接的DOM操作进行限制
冒泡
消除无效查询
推迟到 $(window).load
压缩js
全面掌握jquery库

鼠标悬停在黑白图像上时让彩色图像的透明度从0变到100，就是这样的效果了：点击这里预览效果

Code:

$(function(){
	$(".focus").hover(function(){
		$(".hoverPic").fadeIn(700);
	},function(){
		$(".hoverPic").fadeOut(700);
	})
})

.focus {
	position: relative;
	width: 489px;
	margin: 30px auto;
}
.hoverPic {
	filter:alpha(opacity=0);
	position: absolute;
	top:1px;
	left: 1px;
}


<div class="focus">
<img src="focusno.png" alt="focus" />
<img src="focus.png" alt="focus" class="hoverPic" />
</div>