eAccelerator 是一个免费开源的 PHP 加速、优化、编译和动态缓存的项目，它可以通过缓存 PHP 代码编译后的结果来提高 PHP 脚本的性能，使得一向很复杂和离我们很远的 PHP 脚本编译问题完全得到解决。通过使用 eAccelerator，可以优化 PHP 代码执行速度，降低服务器负载。PHP 应用执行速度最高可达10倍。

eAccelerator 原理

eAccelerator 通过把经过编译后的 PHP 代码缓存到共享内存中，并在用户访问的时候直接调用从而起到高效的加速作用。它的效率非常高，从创建共享内存到查找编译后的代码都在非常短的时间内完成，对于不能缓存到共享内存中的文件和代码，eAccelerator 还可以把他们缓存到系统磁盘上。

eAccelerator 同样还支持 PHP 代码的编译和解释执行，你可以通过 encoder.php 脚本来对php代码进行编译达到保护代码的目的，经过编译后的代码必须运行在安装了 eAccelerator 的环境下。eAccelerator 编译后的代码不能被反编译，它不象其他一些编译工具那样可以进行反编译，这将使得代码更加安全和高效。

eAccelerator 和 WordPress

eAccelerator 网站上（https://eaccelerator.net/）有非常详细的安装文档和使用文档，这里就不再重复。

eAccelerator 除了能够缓存脚本之外，它支持 WordPress 的内存缓存，只需要安装 eAccelerator-Based Caching Extension。但是显然在数据缓存方面它没有做得 Memcached 做得好，目前我是用 eAccelerator 进行脚本缓存，使用 Memcached 进行数据缓存。下图是 eAccelerator 安装之后的状态。

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

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

相关日志

• WordPress 性能优化：为什么我的博客比你的快
• noty：jQuery 网页消息通知插件
• Bear CSS：基于 HTML 文件快速创建基本的 CSS 样式
• 专为移动平台打造的 jQuery： jqMobi
• 淘宝 Web 服务器 Tengine 正式开源
• GAget：在苹果电脑的 Widget 上快速查看 Google Analytics 数据

Bear CSS 就是一个这样的网页服务，基于现有的 HTML 文件，生成一个含有所有元素，id，class 的 CSS 样式文件。Bear CSS 使用也非常简单，上传你的 HTML 文件，Bear CSS 就会根据你的 HTML 文件，生成对应的 CSS 文件，然后你下载就好了。

在给非常长的 HTML 文件进行样式化的时候，这个应用是非常实用的，唯一的缺点就是在生成 CSS 文件的时候无法自己定义包含哪些 id 或者 class，生成的 CSS 文件有点冗余。

Bear CSS：http://bearcss.com/

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

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

noty 支持 Alert，success，error 和 confirmation 这几种消息，并且可以显示在网页的任意位置，（顶部，底部，中间，左上或者右上），还可以设置开启/关闭动画的速度，显示的时间，是否可以关闭等。并且还有消息队列，callback 函数设置等等。

下载：http://needim.github.com/noty/

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

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

CSS Prism 是一个 CSS 颜色查看在线服务，你只需按输入任何 CSS 文件，他就会扫描 CSS 文件中所有的 16 进制颜色代码并显示他们，然后你可以通过一个类似于 Photoshop 颜色选择器（使用 jQuery 的 color picker 插件）让你编辑不需要的颜色。

CSS Prism：CSS 颜色查看器

CSS Prism 是基于 Django 创建的的，并采用 jQuery 及其 color picker 插件，其详细功能有：

• 可以查看 CSS 文件中所有 16 进制颜色。
• 可以定位所有颜色在 CSS 中的位置。
• 可以在线编辑颜色，并且通过白色调和暗色调两种方式查看颜色。

CSS Prism 还提供一个 Bookmarklet： CSS Prism，通过它，你就可以查看任何网页使用的所有颜色了。

CSS Prism 是我最近使用比较多的服务，我用它来查看博客中 CSS 的所有的颜色，然后通过查看去掉比不要的颜色，使得博客中的颜色尽可能的少。如果你想对你博客中的颜色调整下，那么个人推荐你使用 CSS Prism 这个服务。

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

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

体积更小：在压缩之后，相比 jQuery Mobile 的 24kb，jqMobi 只有 3.5kb，但是 jqMobi 含有 jQuery Mobile 的绝大部分功能，并且语法相同，jQuery 程序员无需重新学习。

速度更快：jqMobi 在 iOS 上可以提速 2.2 倍，安卓上提速 3 倍，完爆对手。

jqMobi 同样也有 UI 库（同样文件更小），以及适用于移动网页交互和接口的插件。

下载：http://www.jqmobi.com/

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

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

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
• 使用 eAccelerator 加快 PHP 脚本执行效率
• noty：jQuery 网页消息通知插件
• Bear CSS：基于 HTML 文件快速创建基本的 CSS 样式
• 专为移动平台打造的 jQuery： jqMobi
• GAget：在苹果电脑的 Widget 上快速查看 Google Analytics 数据

GAget 详细功能：

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

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

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

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

相关日志

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

什么是 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.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 项目 / 主机域名优惠码 / 新浪微博

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 项目 / 主机域名优惠码 / 新浪微博

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 项目 / 主机域名优惠码 / 新浪微博

代码非常简单：

<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 项目 / 主机域名优惠码 / 新浪微博

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

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

这是一个坏链

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

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

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

创建一个类

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 项目 / 主机域名优惠码 / 新浪微博

网址：http://scriptsrc.net/

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

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

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

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

地址：http://embed.ly/

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

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

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 项目 / 主机域名优惠码 / 新浪微博

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 项目 / 主机域名优惠码 / 新浪微博

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 项目 / 主机域名优惠码 / 新浪微博

#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：一个链接多个选择