Tengine基于最新的Nginx稳定版（Nginx-1.0.10），在它的基础上开发了一些功能和做了一些bug修复，比如：

组合多个CSS、JavaScript文件的访问请求变成一个请求；
支持管道和syslog形式的日志和抽样；
自动根据CPU数目设置亲缘性；
监控系统的负载和资源占用从而对系统进行保护；
显示对运维人员更友好的出错信息，便于定位出错机器；
更强大的访问速度限制模块；
backtrace模块，程序崩溃的时候可以显示出错的调用栈；
根据文件类型设置过期时间；
…
基本上，Tengine可以被看作一个更好的Nginx，或者是Nginx的超集。

下载 Tengine：http://tengine.taobao.org/

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 1条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 淘宝发布开源编辑器：KISSY Editor
• GAget：在苹果电脑的 Widget 上快速查看 Google Analytics 数据
• jQuery Mobile 1.0 发布
• jQuery 如何存储，获取和删除 Cookies
• Javascript 中如何存储，获取和删除 Cookies
• 使用 HTML5 Shiv 让 IE 支持 HTML5

GAget 详细功能：

• 快速查看一天之中最重要的数据：访问者数量，新访问的比率，退出率以及停留时间。
• 可以查看2周的访客数变化。
• 查看新访问用户的比率和退出率。
• 只需一次简单点击就可以自动刷新数据。
• 自动更新。
• 非常容易切换 Google Analytics 账号。
• 可以查看一周，两周，或者四周的数据。
• 可以在访问数，新访问比率，退出率的图表中切换。

下载 GAget: http://www.zoltanhosszu.com/gaget/

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 3条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 使用 Google Analytics 分析 iPad 横竖屏使用比例
• Google Analytics 发布新版，支持页面速度报告
• 深入使用 Google Analytics：广告监控
• 使用 Google Analytics 的网址构建器来监控广告投放
• 使用 Google Analytics 统计页面加载时间
• 使用 Google Analytics 分析 WordPress 博客的404页面

什么是 jQuery Mobile？

jQuery Mobile 是一个基于 jQuery 的面向移动设备的网页前端用户界面框架，旨在简化移动设备的应用程序的过程，它几乎支持所有的移动浏览器的。

jQuery Mobile 功能特性

跨平台跨设备

jQuery Mobile 框架兼容主流的设备，如 iOS（包括 iPhone，iPad），Andorid，黑莓，塞班，Windows Phone 等，它让你非常容易就可以设计一个运行在所有的智能手机和平板设备上的 Web 程序。

触摸屏优化的布局和 UI WIDGETS

jQuery Mobile 是触摸屏优化的，并且提供一个适应不同的智能设备的动态触摸用户界面，这套系统包含基本的布局控件（如列表，面板等），并且还有一套额外的表单控件和 UI widgets (toggles, sliders, tabs)。

更大，更好的主题化的外观设计

jQuery Mobile 还提供扩展了 CSS 框架，让用户更方便去设计 Web 程序的界面，并且还支持如 text-shadow, box-shadow, and gradients 等这类的 CSS 3 特性。

下载：jQuery Mobile。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 3条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider
• Pluralink：一个链接多个选择

jQuery.cookie = function(name, value, options) {
	if (typeof value != 'undefined') {
		options = options || {};
		if (value === null) {
			value = '';
			options = $.extend({}, options);
			options.expires = -1;
		}
		var expires = '';
		if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
			var date;
			if (typeof options.expires == 'number') {
				date = new Date();
				date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
			} else {
				date = options.expires;
			}
			expires = '; expires=' + date.toUTCString();
		}
		var path = options.path ? '; path=' + (options.path) : '';
		var domain = options.domain ? '; domain=' + (options.domain) : '';
		var secure = options.secure ? '; secure' : '';
		document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
		} else {
			var cookieValue = null;
			if (document.cookie && document.cookie != '') {
			var cookies = document.cookie.split(';');
			for (var i = 0; i < cookies.length; i++) {
				var cookie = jQuery.trim(cookies[i]);
				if (cookie.substring(0, name.length + 1) == (name + '=')) {
					cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
					break;
				}
			}
		}
		return cookieValue;
	}
};

然后通过下面方法使用：

$(document).ready(function() {
	$('#write_cokies').click(function(){
		$.cookie('name', 'test',{expires: 7});
	});
	$('#read_ookies').click(function(){
		var test = $.cookie('name');
		alert (test);
	});
	$('#delete_cookies').click(function(){
		$.cookie('name', null);
	});
});

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 2条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• Catch404：处理网站坏链的 jQuery 插件
• 在 jQuery 中如何判断对象是否存在
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具

function setCookie(name,value){
    var exp  = new Date();
    exp.setTime(exp.getTime() + 30*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;
}
function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 5条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 给 Javascript 加上面向对象的属性：Class.js
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具

IE 无法渲染 HTML5 样式

IE 的用户完全不是我们的目标用户，但是总有人有人说我们网站显示的乱七八糟，很烂，因为 IE 不知道如何给不能识别的标签或者元素渲染 CSS，比如 <header> 这些 IE 无法识别的标签，我们在 CSS 中定义的样式，IE 就无法渲染，所以还是决定让 iPad 导航至少在 IE 下能够布局正常一点。

前面说了 IE 对 HTML5 标签无法识别，所以无法渲染样式，而 Sjoerd Visscher 发现一种方法可以强制 IE 渲染 HTML5 标签，当你创建一个新的 DOM 元素（名字和它无法识别的标签相同）的时候，IE 就可以渲染，并且甚至无需插入这个元素，下面 blah 就能被渲染。

<html> 
<head> 
<style>blah { color: red; }</style> 
<script>document.createElement("blah")</script> 
</head> 
<body> 
<blah>Hello!</blah> 
</body> 
</html>

remy sharp 整理了一个迷你的脚本 html5.js，通过上面的方法让 IE 支持所有的 HTML5 标签。

HTML5 Shiv 使用

html5.js 必须在页面head元素内调用（因为 IE 必须在元素解析前知道这个元素，所以这个 JS 文件不能在页面底部调用。）

作者已经把js文件放在Google code project上并允许大家直接调用： http://html5shiv.googlecode.com/svn/trunk/html5.js
　　
可以使用IE条件注释来调用这个 JS 文件，这样像 FireFox, Safari 等非 IE 浏览器就会忽视这段代码，也就不会有无谓的 HTTP 请求了。下面这段代码仅会在IE浏览器下运行:

<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

最后大家可以看看效果 http://ipaddh.com/ 在 IE 下基本显示出来。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 淘宝 Web 服务器 Tengine 正式开源
• GAget：在苹果电脑的 Widget 上快速查看 Google Analytics 数据
• jQuery Mobile 1.0 发布
• jQuery 如何存储，获取和删除 Cookies
• Javascript 中如何存储，获取和删除 Cookies
• Catch404：处理网站坏链的 jQuery 插件

代码非常简单：

<div style=" background-color: #ccc; -moz-border-radius: 5px;  -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox 和 Safari 实现圆角</div>

效果如下：

Firefox 和 Safari 使用私有属性实现圆角效果

其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius 是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性，如果你只要指定某一个角是圆角的话，它们都分别定义了四个属性：

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

当然 IE9 以下版本还是不支持，所以该效果只能在 IE9, Firefox, Safari, 以及 Chrome 中查看。

最新的 IE9 已经支持 CSS3 圆角。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 25条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• CSS Prism：CSS 颜色查看器
• #grid：网页网格布局工具
• BlueTrip：含有全部功能的 CSS Framework
• 轻量级的 CSS 网格系统：1KB CSS Grid
• 使用 Styleneat 重新组织 CSS
• Float 和 List Style Image 的 CSS 问题

如果网站上有了坏链之后，用户打开就是显示冷冰冰的浏览器的错误页面，如果是 WordPress 博客，虽然有好一些，但也是一个 404 页面，总之让用户访问了不存在的东西。

而 Catch 404 这个 jQuery 插件则以一种相对友好的方式处理网站上的坏链，如果当前页面的链接是一个坏链，用户点击之外不会跳出当前页面而是跳出一个 jQuery 框，直接告诉用户这个链接不存在了，而不让用户白跑一趟，如下面这个坏链，可以点击看下效果（阅读器中需要返回页面才能看到效果）。

这是一个坏链

Catch404 这个 jQuery 插件的主要原理是在用户访问链接之前使用 Yahoo 的 YQL 去访问 URL 然后通过获取返回码进行判断。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 9条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• jQuery 如何存储，获取和删除 Cookies
• 在 jQuery 中如何判断对象是否存在
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具

创建一个类

One = {
	message:'',
	set:function(val){
		this.message = val;
	},
	get:function(){
		alert(this.message);
	}
};

使用创建的类

var e = new Class(One);
e.set('Hello, World!');
e.get();

构建函数

如果构建函数 construct() 存在，在实例化类的时候，就会被调用，构建函数也可以有参数。

One = {
	message:'',
	construct:function(val){
		this.set(val);
	},
	set:function(val){
		this.message = val;
	},
	get:function(){
		alert(this.message);
	}
};

用法：

var e = new Class(One,['Awesome!']);
e.get();

扩展类

通过 Extend() 函数可以扩展现有的类：

Two = Extend(One,{
	construct:function(val){
		this.set(val);
	}
});

用法：

var e = new Class(Two,['Quixotic!']);
e.get();

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 1条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具

网址：http://scriptsrc.net/

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 4条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 给 Javascript 加上面向对象的属性：Class.js
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具

但是每个服务的代码都不同，这样使得你嵌入多个服务的内容的时候变得非常麻烦，这个时候 Embedly 出现了，Embedly 是一个免费的 API 服务，它能通过一个简单的 API 帮你嵌入 100 多个支持 Embed 协议的网站的内容。通过一个简单的调用，它可以包含一个或者多个链接，支持视频，图片和富文本。

Embedly 已经有一个 WordPress 插件，因为 WordPress 从 2.9 开始已经有了 Embed 支持框架，但是支持的网站有限，所以这个插件很好的扩展了 WordPress 的 Embed 框架。

地址：http://embed.ly/

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 1条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 在 PHP 中使用 Google Charts API
• 淘宝 Web 服务器 Tengine 正式开源
• GAget：在苹果电脑的 Widget 上快速查看 Google Analytics 数据
• jQuery Mobile 1.0 发布
• jQuery 如何存储，获取和删除 Cookies
• Javascript 中如何存储，获取和删除 Cookies

if($("#id")){
}else{}

因为 $(“#id”) 不管对象是否存在都会返回 object 。

正确使用判断对象是否存在应该用：

if($("#id").length>0){}else{}

使用 jQuery 对象的属性 length 来判断，如果 > 0 就存在。

或者

 if($("#id")[0]){} else {}

或者直接使用原生的 Javascript 代码来判断：

 if(document.getElementById("id")){} else {}

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• jQuery 如何存储，获取和删除 Cookies
• Catch404：处理网站坏链的 jQuery 插件
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具

jQZoom 就是这样的一个 jQuery 插件，它能够让你网站的图片实现放大镜效果，把鼠标移到小图上，旁边出现大图的局部放大的部分，如下演示：

jQZoom 演示

RSS 用户需要返回页面才能看到效果。

jQZoom 使用说明

下面介绍下简单使用：

1. 在你的页面中包含 jqzoom.css

<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2. 包含 jQzoom 和 jQuery JS 代码：

<script type="text/javascript" src="your_path/jquery.js"></script>
<script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3. 现在创建一个放图片的容器（最好是 DIV），并给 class 赋值为 jqzoom，然后给每张图片设置一个 jqimg 属性，它的值为大图的地址。

<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>

4. 当页面导入的时候，载入 jQZoom 插件。

$(document).ready(function(){ $(".jqzoom").jqueryzoom(); });

好了基本设置好了，当然你也可以自己做些简单的设置：

$(document).ready(function(){
    $(".jqzoom").jqueryzoom({
        xzoom: 300, //设置放大 DIV 长度（默认为 200）
        yzoom: 300, //设置放大 DIV 高度（默认为 200）
        offset: 10, //设置放大 DIV 偏移（默认为 10）
        position: "right", //设置放大 DIV 的位置（默认为右边）
         preload:1,
        lens:1
    });
});

下载：jQZoom。
演示：jQuery 图片放大镜效果插件：jQZoom

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 7条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 延迟加载图片的 jQuery 插件：Lazy Load
• jQuery Mobile 1.0 发布
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider

bxSlider 使用

使用 bxSlider 首先要载入 jQuery Javascript 库。然后载入 bxSlider 代码。

下面就是一个简单的 bxSlider 演示效果（RSS 用户需要返回页面才能看到效果）：

• 

  WordPress：企业建站利器
  WordPress 是一款风靡全球的开源 CMS 系统。在过去，它更多的应用于开设个人或多用户博客系统；但现在，它开始越来越多地应用于企业门户网站设计中。作为国内最早使用并对 WordPress 进行二次开发的爱好者之一，自从2006年初次接触 WordPress 系统开始，我就为其强大的功能，灵活的可扩展性，以及方便的可定制性所深深吸引。

• 

  美国虚拟主机推荐：Bluehost
  Bluehost 建立于 1996 年，已经具有了十几年的虚拟主机服务经验，现已突破 100 万的网站托管数量，并且还以稳定速度向前发展。Bluehost 以其高质量的主机和口碑，在美国是深受好评的虚拟主机，在美国主机界也是屡获大奖。

• 

  bbPress 介绍，安装和中文包
  bbPress 是一款开源论坛程序，它是一个非常容易使用的轻量级论坛程序，由于 bbPress 保持了体积小，重量轻，没有提供过多复杂的功能，所以速度非常快。对于有更多需求的用户来说，bbPress 也和 WordPress 一样提供了一个非常强大插件系统，让你添加各种功能扩充论坛。

• 

  主机推荐：(mt) Media Temple
  Media Temple 简称 (mt) ，是一家比较独特的美国主机商，和其他美国商一样大肆的做广告不一样，(mt) 更关注社区，它的营销计划可以简单归纳为：Host Great Sites，所以选择了 (mt)，就选择和许多伟大的站点做邻居。我爱水煮鱼目前正在使用 Media Temple 主机。

• 

  WordPress 相关日志插件：WordPress Related Posts
  产生相关日志最好的方法就是通过 Tag，根据日志含有相同的 Tag 数越多，就认为日志相关性越强，所以我根据这一原理开发了 WordPress Related Posts 这个 WordPress 插件，它会根据日志的 tag 的相关性产生一个相关日志列表。

• 

  WordPress 主题教程：从零开始制作 WordPress 主题
  创建 WordPress 主题其实不难，只要你从现在开始认真学习这个教程，从零一步一步开始，你就会成为一个 WordPress 主题制作高手，至少你会修改现有主题。本文是一个从零开始制作 WordPress 主题的教程，它会一步一步教你如何制作 WordPress 主题。

要实现上面的效果，我么加载 jQuery 和 bxSilder 的代码之后，还需要在页面的 head 中添加如下的 jQuery 代码：

$(function(){
	$('#slides1').bxSlider({
		prev_image: 'http://bxslider.com/images/btn_arrow_left.jpg',
		next_image: 'http://bxslider.com/images/btn_arrow_right.jpg',
		wrapper_class: 'slides1_wrap',
		margin: 70,
		auto: true,
		auto_controls: true
	});
});

bxSlider 详细配置参数

bxSlider 有以下参数可以进行配置：

$(document).ready(function(){
	$('ul').bxSlider({
		alignment: 'horizontal',        // 'horizontal', 'vertical' - 幻灯片方向
		controls: true,                 // 设置是否上一个/下一个按钮是否显示
		speed: 500,                     // 速度，单位为毫秒
		pager: true,                    // 是否显示页码
		pager_short: false,             // 是否显示短页码 (1/4)
		pager_short_separator: ' / ',   // 用于区分短页码的文本
		margin: 0,                      // 间隔
		next_text: 'next',              // 下一个文本
		next_image: '',                 // 下一个图片
		prev_text: 'prev',              // 上一个文本
		prev_image: '',                 // 上一个图片
		auto: false,                    // 是否自动切换
		pause: 3500,                    // 停留时间 (auto mode only)
		auto_direction: 'next',         // 向那个方向移动 (auto mode only)
		auto_hover: true,               // 设置鼠标悬停的时候是否暂停
		auto_controls: false,           // 设置是否显示 'start'/'stop' 按钮 (auto mode only)
		ticker: false,                  // determines if slideshow will behave as a constant ticker
		ticker_controls: false,         // determines if 'start'/'stop' ticker controls are displayed (ticker mode only)
		ticker_direction: 'next',       // order in which slides will transition (ticker mode only)
		ticker_hover: true,             // determines if slideshow will pause while mouse is hovering over slideshow
		stop_text: 'stop',              // 'stop' 按钮文本
		start_text: 'start',            // 'start' 按钮文本
		wrapper_class: 'bxslider_wrap'  // 外面 wapper 的 DIV 的 class 名字
	});
});

下载：bxSlider。
演示：jQuery slider 插件: bxSlider

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 13条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• Pluralink：一个链接多个选择

#grid 适应所有宽度的页面，可以调整任意的高度布局（默认为 20px），可以实时隐藏和打开网格线，#grid 使用非常简单，一个 Javascript 文件，简单的几行 CSS 代码，和一个用于垂直网格的图片。

#grid 使用

#grid 使用非常简单，在你的页面上插入所需的 Javascript 和 CSS代码之后，只需按下 G 就会显示网格线，松开网格线消失，G + H 就会一直显示网格线，松开也不会消失，如果没有显示网格线，可以按下 G+F 把网格线调到前面。#grid：网页网格布局工具这篇日志已经启用了，你可以按下这些快捷键来测试下效果。

安装 #grid

1. 下载 hashgrid.js 脚本，并且上传到服务器中。

2. 然后在网页中添加如下 JavaScript 代码：

   <!-- Grab latest version of jQuery -->
   <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
   </script>
   
   <!-- Include the hashgrid script -->
   <script type="text/javascript" src="hashgrid.js"></script>
   

3. 然后在网页中添加如下 CSS 代码：

   /**
    * Grid
    */
   #grid{
   
       /* Vertical grid lines */
       background: url(bg-grid-980.gif) repeat-y 0 0;
   
       /* Dimensions - same width as your grid with gutters */
       width: 980px;
   
       /* Grid (left-aligned)
       position: absolute;
       top: 0;
       left: 0;
       */
   
       /* Grid (centered) */
       position: absolute;
       top: 0;
       left: 50%;
       margin-left: -490px;
   
   }
   
   /**
    * Horizontal grid lines, defined by your base line height
    *
    * Remember, the CSS properties that define the box model:
    * visible height = height + borders + margins + padding
    */
   #grid .horiz{
   
       /* 20px line height */
       height: 19px;
       border-bottom: 1px dotted #aaa;
       margin: 0;
       padding: 0;
   
   }
   

#grid 可以支持各种网格系统的，目前默认提供 980 宽的布局（940 内容区，两边 20 边界），如果使用别的网格模式，需要调整下CSS 和制作一张新的用于垂直网格布局的图片。

下载：#grid
演示：#grid：网页网格布局工具

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 9条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider
• Pluralink：一个链接多个选择

还有有了 jQuery，使用 jQuery，我们只需要几行代码就能在新窗口中打开外部链接。

首先我们需要找到所有的外部链接，在 $(document).ready() 函数添加如下代码：

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])");

上面这段代码查找 href 属性是以 http:// 或者 https:// 开始的，并且不包含当前域名（location.hostname）的链接（a）标签。这样我们就不会获取任何相对路径或者绝对连接中含有当前域名的内部连接。

如果我们想给外部链接加上 “external” class，添加如下的代码：

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external");

上面的代码给外部链接加上一个 CSS Class ，这样就可以使用 CSS 来样式化外部链接了。

如果你想外部链接在新窗口打开，继续增加如下一行代码：

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external")
.attr("target","_blank");

上面的代码给链接标签增加一个 target 属性，并且给他赋值为 _blank，这样代码是标准的，并且外部链接在新窗口打开。上面就是使用 jQuery 在新窗口打开外部链接的所有代码。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 20条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider
• Pluralink：一个链接多个选择

如把鼠标移到下面“我的网站”这个链接，就可以显示 “我爱水煮鱼”，“WordPress Jam”，“Honey Piggy” 这三个链接。

我的网站

“我的网站”右上角的[3]则表明这个链接包含三个链接，目前不支持 RSS，你需要返回页面上查看。

Pluralink 使用非常简单，首先你需要在页面中加载 jQuery 库，如果你的 WordPress 已经启用了，则可以放弃这一步，如果没有，我们可以通过 Google AJAX Libraries 加载 jQuery。

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1");

</script>

然后加载 Pluralink 的 Javascript 代码和样式表。

<script type="text/javascript" src="http://pluralink.com/files/pluralink.js"></script>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie.css" type="text/css" />
<![endif]-->
 
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie6.css" type="text/css" />
<![endif]-->

最后使用以下格式插入多个链接：

<a href="http://fairyfish.net/||http://wpjam.com/||http://honeypiggy.com" title="我爱水煮鱼||WordPress Jam||Honey Piggy">我的网站</a>

如果你的页面上使用 AJAX，你可以使用函数pluralink.reinit();重新激活该插件。

另外 Pluralink 还提供 WordPress 插件，如果你对以上步骤觉得繁琐的，可以直接下载 Pluralink 的 WordPress 插件，直接上传激活即可。

目前 Pluralink 还有一些局限性，如不能在 RSS 中显示（Pluralink 开发者说正在开发），并且没有兼容性，如果 Javascript 代码取消的话，这就是一个废的链接，并且 SEO 方面也不是很友善，不过总体来说这是一个非常不错的 jQuery 插件，并且文件很小。

下载：Pluralink。
演示：Pluralink：一个链接多个选择

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 19条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider

Feature List 的使用方法

使用 Feature List 需要调用一些简单的函数：

$.featureList(
	$("#tabs li a"),
	$("#output li"), {
		start_item : 1
	}
);
 
// Alternative
 
$('#tabs li a').featureList({
	output		: '#output li',
	start_item	: 1
});

Feature List 需要两组数组，一个是 tab，一个是 output，当用户点击 tab，脚本就会去找预期对应的 output。当前的 Tab 会加上 current CSS。

其中下面是一些可以进行配置的选项：

• start_item — 点击最开始的 tab，默认是 0。
• pause_on_hover — 如果是 true，则鼠标移到到 Tab 上幻灯片切换会停止，默认是 true。
• transition_interval — 定义两次切换之间的时间间隔，0 为不自动切换，默认是 5000 毫秒。

演示（RSS 阅读器用户需要返回页面才能看到效果）：

下载：Featured List。
演示：Feature List：制作推荐列表的 jQuery 插件

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 11条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• jQuery slider 插件: bxSlider
• Pluralink：一个链接多个选择

Lazy loader 是一个延迟加载图片的 jQuery 插件，在一些图片非常多的网站中非常有用，在在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽。

Lazy Loader 使用也非常简单，首先确保你的页面已经加载 jQuery Javascript 库，然后在加载 Lazy Load 的 Javascript 文件：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

然后在页面的 header 添加如下代码即可：

<script type="text/javascript"></script>
$(document).ready(function(){
    $("img").lazyload({
        placeholder : "/images/grey.gif",
        effect : "fadeIn"
    });
}
</script>

当然 Lazy Load 也有更多复杂的设置，你可以参考 Lazy Load 原文介绍或者 mg12 的翻译。

我爱水煮鱼已经增加了这个功能，你可以在一些图片较多的日志页面预览下。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 23条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery 图片放大镜效果插件：jQZoom
• jQuery Mobile 1.0 发布
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider

在社区互动上，Discuz! X1除了让论坛（BBS，产品Discuz!）与社交网络（SNS，产品UCenter Home）之间实现以往的数据统一之外，在用户体验方面能够更加自然的过渡，增加用户在站内应用的一站式服务用户体验。依托漫游（Manyou）开放平台，实现社区建站产品的跨界融合。

Discuz! X1 是以论坛（BBS）信息为核心的社区服务基础之上拓展社交网络（SNS）应用，并且还增加了面向地方社区的选配功能，以及房产与品牌空间功能。

由于项目的关系，我们最近也开始研究康盛的开源程序，确实康盛的东西易用性非常强，非常适合国人使用，相信 Discuz! X1 的使用体验也会非常好。目前我们 WordPress JAM 团队能够实现 WordPress 和 UCenter，UChome，ECshop 等产品的深度整合，如单点登录，统一头像系统（使用 UChome 的头像系统，Gravatar 对于国人还是不是太熟悉），为 WordPress MU 下的每个活动博客建立专属社区（如碁道天下的专题社区）等。同样 Discuz! X1 也支持通过 UCenter 用户中心与其它建站产品的标准化整合，所以我们目前的系统同样也可以和同样也可以整合，由于 WordPress 的各种优点，如插件非常多，SEO 非常好，以及定制性更强，整合 WordPress 之后的 Discuz! X 功能相信会更强。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 22条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 淘宝 Web 服务器 Tengine 正式开源
• GAget：在苹果电脑的 Widget 上快速查看 Google Analytics 数据
• jQuery Mobile 1.0 发布
• jQuery 如何存储，获取和删除 Cookies
• Javascript 中如何存储，获取和删除 Cookies
• 新浪微博推出微群功能