Time Machine » 工作学习

OverFlow – 一个秘密武器 4

九月 6th, 2010 归档于：工作学习文摘翻译 Tag：

如果你已经理解了block formatting contexts那么请继续，否则请先看看这篇文章。

Overflow能够做一些很牛掰的事情，比如:

创建BFC (block formatting contexts via W3c css2.1)
清除浮动

生成块级元素

overyflow属性一旦被指定，那么一个新的BFC就被创建了。这意味着什么呢？它改变了block和浮动元素的交互方式。它不再围绕浮动元素，而是变成一个narrower。

[P没有用overflow]你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。

[P有用overflow:hidden]你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。

这不是一个hack，在w3c标准中有明确的说明：

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.

那么该如何学以致用呢？

拥有新FC( formatting context)的块级元素会占去一行中所有的剩余空间，只给定位了的浮动元素留下空间。在原文作者的开源项目OOCSS中，有两种方式去使用FC：

主内容列 -添加FC意味着主内容列将占去除左右列之外的所有空间。这意味着，在一个模板下，只需简单的删除多余的那列，不用做其它任何更改你就可以很轻易的将布局从三列变为两列。CMS开发者会非常喜欢这个特性的。

在Firebug下玩玩这个模板。

试着将“liquid”class增加到“page”元素中。
从HTML中添加或删除一列。
用文档中列出的附加class去扩展一个列对象。
尝试在Firebug中直接改变列的宽度。

网格 -任何开发过网格系统的人都知道sub-pixel舍入错误所带来的痛苦。浏览器不知道如何处理33.3像素，所以他们都会做不同的事情。YUI利用“列”之间的“槽”解决了这一差异，但我们也可以在单元内部隐藏这一差异。

一个新的BFC可以用来隐藏网格任何一列最后一个单元的尺寸误差。试试这个网格，你会发现当你修改单元的尺寸时，最后的单元会自动伸缩，以适应差异。它没有宽度，而且如果拥有新的BFC，它也不会环绕浮动元素。

清除浮动

你肯定听说过清除浮动这码事。人们一直在探讨通过overflow的属性来清除浮动。有些人认为它是hack，但仔细阅读规范你会发现，规范作者也没能明确它。因为它的最终解释权归浏览器厂商。

为了计算出什么溢出了容器（这些范围应该被隐藏），他们需要知道块的大小。由于这些块都没有给出明确的高度设置，于是浏览器就使用了从块内容中计算出的高度。欲了解更多关于清除的内容，请看我和Eric Meyer在她博客里的讨论。

注意事项

溢出可以太大内容（如巨大的图片，pre区域，或表格之类），我现在尝试overflow: auto，到底使用哪个还需要权衡。

PS: 终于把这篇文章放出来了，其实已经躺在我电脑里好久了，当初答应涛哥翻译的，结果拖了这么久实在惭愧。水平所限，文中还有些地方译的很牵强，或者不好理解，希望大家能帮忙指正。原文地址：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

白话Block Formatting Context 3

七月 18th, 2010 归档于：工作学习 Tag： BFC, css, html

因为在下篇文章中要用到这个概念，刚好找到了这篇不错的文章，就先转过来。原文链接

一，啥是Block Formatting Context

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成 Block Formatting Context。

二，怎样才能形成Block Formatting Context

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context

float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

三，Block Formatting Context在生产中有什么作用

Block Formatting Context可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
Block Formatting Context可以包含内部元素的浮动。考虑一下下面的例子（请用标准浏览器查看）：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type=“text/css”>
html, body {
margin: 0;
padding: 0;
}
#red, #orange, #yellow, #green {
width: 100px;
height: 100px;
float: left;
}
#red {
background: red;
}
#orange {
background: orange;
}
#yellow {
background: yellow;
}
#green {
background: green;
}
</style>
</head>
<body>
<div id=“c1″>
<div id=“red”></div>
<div id=“orange”></div>
</div>
<div id=“c2″>
<div id=“yellow”></div>
<div id=“green”></div>
</div>
</body>
</html>

在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的Block Formatting Context就可以解决问题。
Block Formatting Context可以阻止元素被浮动覆盖。请看示例：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type=“text/css”>
html, body {
margin: 0;
padding: 0;
}
#left {
width: 100px;
height: 100px;
background: red;
float: left;
}
#right {
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div id=“left”></div>
<div id=“right”></div>
</body>
</html>

在标准浏览器下可以看到，普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况，有一种方法就是让#right形成新的Block Formatting Context。但是这里一定要注意的是，浮动不会覆盖的只是Block Formatting Context的border-box。换句话说，形成Block Formatting Context元素的margin还是会被浮动所覆盖掉的。

这里有更详尽的解释：http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

HTML5本地存储初探(三)5

一月 31st, 2010 归档于：工作学习 Tag： Client-Side Storage, html5, offline, webapp

完成了数据的本地存储，就要将文件存储也搞定。为了实现文件的本地存储，html5搞了一个叫 manifest 的文件，这个文件就是一个缓存清单，把需要缓存在客户端的文件告诉浏览器。manifest是一个mimetype为 text/cache-manifest 的纯文本文件。注意，这点很重要。

下面是一个manifest文件的例子：

manifest

NETWORK, CACHE, FALLBACK 都是可选的。

manifest文件必须以 CACHE MANIFEST 开头

其后需要下载并缓存的文件使用相对或绝对路径皆可，每个资源一行。

NETWORK段表明一些在线资源所在的域，所有这个域下的资源都不会被缓存，即使客户端处于离线状态，也会尝试去请求基于这些域的资源。

CACHE段还不是很明白

FALLBACK段下面每行都包含两部分内容，用空格分隔。后半部分是当前半部分路径不能访问时的备选路径（很拗），如上图就是，如果demoimages目录不能访问时，尝试访问images目录。

manifest文件介绍就到这里，下面创建我们自己的manifest文件：

我们只需要缓存两个文件即可，nbStyle.css 和 nbScript.js。还有index.html 本身，由于manifest文件会默认缓存引用自己的文件，所以index.html 不能在缓存列表中写出来：

CACHE MANIFEST
# version: 2010-01-20 22:30

nbStyle.css
nbScript.js

就是这么简单了，我们将他保存为 notebook.manifest 文件，并和其它文件一起放在根目录。

最后一个问题，如果将notebook.manifest的mimetype标识为 text/cache-manifest 类型呢？我知道有两种方法：

1. 在站点根目录建立 .htaccess 文件，在其中声明.manifest 的mimetype ，这个需要修改下服务器的配置文件，我没有尝试成功。

2. php环境在apache目录寻找一个为 “mime.types” 的配置文件，在其最后添加一行：

text/cache-manifest            manifest

然后在index.html文件引用它：
引用manifest
搞定了这些东西，你就可以尝试用webkit访问你的应用，然后离线，再尝试使用它，程序应该也可以照常运行。

至此，html5的离线存储基本介绍完了，下面附上打包的代码，代码本身没有什么难度，只是我写的太烂了:

代码下载

其实还远没有完，缓存下来的文件如果被更新了怎么办呢？如何通知客户端更新缓存其实也有api，慢慢的再探索吧。非常期待与大家探讨html5相关的问题。

HTML5本地存储初探(二)0

一月 31st, 2010 归档于：工作学习 Tag： Client-Side Storage, html5, offline, webapp

完成了UI，我们就需要对数据进行处理了。

在开始“数据”的本地存储之前，我们先来了解一下client-side database storage API:

the client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with – SQL.－－webkit blog

目前只有webkit核心的浏览器支持这一特性。你甚至都不能在w3c的html5工作草案中找到（cs-db）client-side database 的详细描述。

首先我们要尝试建立一个数据库链接：

try {
	if(!window.openDatabase){  //检测浏览器是否支持cs-db
		alert('not supported cs-db!');
	} else {
		var shortName = 'noteDB';
		var version = '1.0';
		var displayName = 'Note book database';
		var maxSize = 65536;
                //创建一个数据库
		var db = openDatabase(shortName,version,displayName,maxSize);
	}
} catch(e){  //尝试捕获错误
	if (e == 2){
		alert('Invalid database version.');
	} else {
		alert("Unknown error "+e+".");
	}
}

如果以上代码无误，你就会在safair或者chrome的开发者工具中看到这个数据库：

创建的数据库

在右侧区域可以直接执行一些sql查询，但是我总是得到 “发生意外错误“0”。” 这样的结果，不知道是不是RP的问题。

接下来就是创建表，以及执行一些sql语句进行增删改查。

js执行sql的基本语法大致是这样的：

db.transaction(
	function (transaction){
		transaction.executeSql(sqlquery,[],dataHandler, errorHandler);
	}
);

其中transaction.executeSql中参数依次为：sql查询字符串，传递给sql查询的参数，数据处理句柄，错误处理句柄。其中只有第一项为必选，其余都为可选项。

第二个参数的用法大致是这样的：

transaction.executeSql("UPDATE people set age=? where name=?;",[ age, name ]);

查询字符串中的“ ？” 会被后面数组中的变量依次替换。

注意：以上我用了“大致”这个词，因为没有官方的文档（W3C-web database），只是从一些其它文献以及自己判断得来，若有错误还请指正。

下面我们创建一张用来存储note的表：

db.transaction(
	function (transaction){
		transaction.executeSql(
                'CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,titel TEXT, note TEXT NOT NULL, date DATE);',errorHandler);
	}
);

errorHandler是这样的：

function errorHandler(transaction, error){
	alert('Error was: '+ error.message +'(Code:'+ error.code +')');

	var fatal_error = true;
	if(fatal_error){
		return true;
	}
	return false;
}

error.message 是一段错误描述，error.code 是错误代码 (详情)

再看看如果从db中检索出数据并显示到页面上：

db.transaction(
	function (transaction){
		transaction.executeSql("SELECT * from notes;",[],dataHandler, errorHandler);
	}
);

function dataHandler(transaction, results){
	var string = "";
	for (var i = 0; i" + row['titel'] + "

";
	}
	var listConts = $('listCont');
	listConts.innerHTML = string;
}

可以看出，基本上和php之类后端语言操作大同小异。
更多代码可查看示例程序，不再一一罗列。

搞定了数据的本地存储之后，接下来就要看看如何将文件储存到本地。

HTML5本地存储初探(一)5

一月 27th, 2010 归档于：工作学习 Tag： Client-Side Storage, html5, offline, webapp

html5带给我们的不仅仅是更多语义丰富的标签，还有更多更牛逼的特性，比如“离线存储”。对于台式电脑来说，或者它并没有带来什么惊喜，但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备，比如iphone，ipod touch，离线存储使得web前端工程师可以很容易的针对它们开发应用程序。

前面吹嘘了一段，不过说实在的，html5本地存储就目前来说还是很受限的。其一，浏览器限制，目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持，不过也有 Taffy DB 可以曲线救国。(还没有用过，不敢妄下结论。)。其二，服务器端需要修改配置，旦如果是自己的服务器就很简单了。

下面就以一个简单的offline web app－note book 为例，记录一下为iphone/ipod touch开发web app的过程。不是经验，只是初探。

建立适合 iphone/ipod touch 的UI
数据的本地存储
文件的本地存储
完善这个app (不打算完善它了，有时间做一个实用的app专门介绍 iphone web app 的开发吧)

首先，适合iphone/ipod touch 的UI 它并不是本文的重点，有兴趣的同学可以移步这里。这里只强调一点：你默认做的页面，放到iphone看会变的很窄，字很小。这是因为iphone用它320px宽的屏幕显示了一个默认980px宽的页面，你的内容被按比例缩小了。要解决这个问题很简单，只要在html的head区域加一个meta标记，具体语法请看这里。也就是这样：

viewport

这个问题解决之后我们就可以肆意的使用html5和css3来打造界面了，（针对设备开发可以不考虑兼容性，真是畅快淋漓呀。）

我大概做了个丑陋的界面：

app UI

html代码， CSS代码 (其实你可以不用看，最后有打包的代码)

这篇先到这里，太长了你看着累我写着也累，咱慢慢来。:)

漫画:混乱的标记语言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代替。

具体用法请参看原文。

django之开发环境搭建 5

三月 19th, 2009 归档于：工作学习 Tag： django, python, 入门

django的入门书已经看第二遍了, 光搭个环境还搞的磕磕绊绊. 上次看了一点被数据库搞的信心全无, 这次偶遇高人指点就想把它坚持的学下去. 好记性不如烂笔头,何况我还是个烂记性. 还是踏踏实实的记录一下吧.
用python开发web项目我选择了django框架, 怎样让python和django在自己机器上跑起来呢? 我们一步一步来: (PS: window环境下已安装mysql数据库, python2.5.4版本, django1.02版本.)
More »