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

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

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

© 我爱水煮鱼 / 收藏本文 / 2条评论 / 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 项目 / 主机域名优惠码 / 新浪微博

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

FancyBox 是一个 jQuery 图片播放插件，它可以使用类似于 MAC 系统中 “Lightbox” 方式在网页前面浮动显示和播放图片，网页内容，或者其他多媒体内容。

FancyBox 的特性

• 支持图片，HTML 元素，Flash 动画，Iframe 以及 AJAX 支持。
• 可以自定义播放器和 CSS 样式。
• 可以以组的形式进行轮转播放。
• 如果加载了鼠标滚动插件（mouse wheel plugin），FancyBox 还支持通过鼠标滚动事件来翻阅图片。
• 通过 easing plugin，可以实现更花哨的轮转效果。
• 可以在放大的元素下面添加阴影，使得更有立体感觉。

FanyBox 的 WordPress 插件

正是因为 FancyBox 的强大，很多 WordPress 爱好者，就开发了 FancyBox 的 WordPress 插件，增强 WordPress 的图片显示效果。

1. Easy FancyBox

Easy FancyBox 可以非常容易让你在 WordPress 中启用 FancyBox 插件，Easy FancyBox 可以使得你博客中所有指向图片文件 (.jpg/.bmp/.gif/.png) 和 Falsh 动画文件 (.swf) 自动获取 FancyBox 的弹出效果。这个插件没有配置页面，没有选项，只需激活即可，这也是我推荐的插件方式。

下载：Easy FancyBox。

2. Fancy Gallery

Fancy Gallery 整合 FancyBox 到你的 WordPress 博客中，同样，所有指向图片的链接都会自动使用 FancyBox 的方式弹出页面的上面，如果你使用 [gallery] 这个 Shortcode 来显示相册，相册中图片弹出的时候会自动加上 上一张，下一张 的导航条，非常方便。

下载：Fancy Gallery。

3. FancyBox Gallery

FancyBox Gallery 把 FancyBox 这个 jQuery 插件集成到 WordPress 的 Gallery 功能中，你只需要在日志内容中试用 Gallery Shortcode 显示缩略图，这个插件就会处理好剩下的，你会得到非常漂亮的大图弹出效果，而且还会修正大小到适合浏览器窗口。

下载：FancyBox Gallery

4. FancyBox for WordPress

FancyBox for WordPress 这个是做的最复杂的 FancyBox 插件，他可以让你自定义 FancyBox 的所有东西，包括边距，边框，颜色，放大速度，动画效果，关闭按钮的位置，覆盖层的颜色，透明度，还有如果去归类一组相册的选项等等。

下载：FancyBox for WordPress

翻译自：FancyBox and WordPress Plugins

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

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

相关日志

• WordPress 插件：iPhone/iPad 限时免费精选
• 国外前 100 名博客半数使用 WordPress
• 多说：最好的社会化评论服务
• WordPress 插件开发技巧：在插件页面添加快捷设置链接
• WordPress 性能优化：为什么我的博客比你的快
• 检测 WordPress 运行效率的插件：WPJAM Debug

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

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

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

这是一个坏链

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

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

© 我爱水煮鱼 / 收藏本文 / 9条评论 / 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：一个链接多个选择

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

如把鼠标移到下面“我的网站”这个链接，就可以显示 “我爱水煮鱼”，“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 项目 / 主机域名优惠码 / 新浪微博

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

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

jParse 详细功能

• jParse 能够选择 XML 节点上的任何值，或者节点的参数。
• jParse 可以输出一个完整的定制化的 HTML 代码。
• 可以在 jParse 开始之前和完成工作之外运行 callback 函数。
• 可以限制 items 的数量。
• 可以排除指定单词，数字，或者符号的 XML 节点。
• 可以在任何地方输出 feed 中 的数量。

jParse 使用

由于安全的原因，jQuery .ajax 方法不允许跨域名做 Ajax 请求，所以首先要解析的 XML 文件必须在同个域名下面。

由于 jParse 是 jQuery 插件，所以首先要在 head 中导入 jQuery 库，我们可以通过使用 WordPress 自带的 jQuery 库或者 Google AJAX Libraries 来加载 jQuery。

然后在 head 中加载 jParse 的代码，你可以到这里下载。

在 head 中加入自定义函数：

function start(){
    jQuery('#jparse-meta').html('<span style="color:red;">载入 XML ....</span>');
}
function finish(){
    jQuery('#jparse-meta').remove();
}
function parse_xml(){
    $('#ajax-cont').jParse({
        ajaxOpts: {url: 'http://fairyfish.net/wp-content/uploads/sites.xml'},
        elementTag: ['name', 'link', 'description'],
        count: '#item-count',
        output: '<p><strong><a href="jpet1">jpet0</a></strong><br />jpet2</p>',
        precallback: start,
        callback: finish
    });
};

最后在正文中插入如下代码：

<p><span  id="jparse-meta"><a href="#" onclick="parse_xml()">点击这里查看</a></span> Denis 一共有 <span id="item-count">几</span> 个站点。</p>
<div id="ajax-cont"></div>

jParse 演示

下面是我做的一个演示，它能够解析一个 http://fairyfish.net/wp-content/uploads/sites.xml 文件，查看我一些的站点。

点击这里查看 Denis 一共有 几 个站点：

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

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

• 有多种图标样式可供选择
• 可以自定义日期轴线
• 可设置旋转轴文字
• 自动计算趋势线
• 工具提示和高亮数据点
• 默认最优设置，非常易于使用

jQuery 绘图插件：jqPlot

使用 jqPlot 基本可以控制图表的每一个部分，如网格的背景，字体和大小，等等，并且jqPlot 自己本身也有插件支持系统，所以它可以很容易扩展新的图表类别和选项。

jqPlot 已经有很好的文档，并且还提供了很多很好的例子。

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

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

目前 jsTree 支持以下浏览器：Internet Explorer 6 +, Mozilla Firefox, Safari 3, Opera 9+, Google Chrome。

jsTree 支持三种数据源头：

• 预先定义好的 HTML -嵌套的列表结构
• JSON
• XML

jsTree 的主要功能有：

• 同步导入 – 只需要提供一个 URL，就会去请求数据（只适合 JSON 和 XML 数据形式）。
• 支持打开，关闭，重命名，创建，删除节点（通过预先定义好的规则）
• 支持多种回调函数（onchange, oncreate, ondelete, onload, 等等）
• 支持拖拉
• 支持多重选择
• 支持多种语言
• 支持主题（可以修改图标，大小和背景等等）
• 可以支持动态打开和关闭(configurable)
• 可选的快捷键导航
• 支持多个树形部件
• 另外还可以做为 jQuery 插件。

下载：jsTree

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

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

1. JS 文件：thickbox.js 或者压缩版本 thickbox-compressed.js。
2. CSS 文件：ThickBox.css
3. 最后一个 Loading 图片：loadingAnimation.gif

除了以上三个文件之外，你还需要有 jQuery JavaScript 类库 或者压缩版，甚至可以使用 Google 提供 CDN 加速的版本。

ThickBox 使用也非常见，首先在 HTML 文件的 HEAD 导入 jQuery JS 和 ThickBox JS 文件，并且 jQuery JS 文件必须在前：

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

然后打开 thinkbox.js 文件通过 tb_pathToImage 这个变量来设置 loadingAnimation.gif 文件的路径。

然后在 HEAD 导入 thickbox.css 文件：

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

当然你也可以吧 thickbox.css 里面的内容复制到你现在的 CSS 文件中，最后你只要给 a 元素天添加 class=”thickbox” 属性就可以开始用 thickbox。详细使用可以查看 ThickBox 官方教程。

我在使用中碰到的最大问题是，如果网页上有 Flash 的话，往往 Flash 会把 ThickBox 的弹出框给挡住，这时的解决方法也是非常简单，就是给 Flash 设置透明的参数：wmode=”transparent”。详细就是给 Flash 的 object 标签添加如下参数：<param name="wmode" value="transparent">，并在 embed 标签中设置 wmode=”transparent”，如果使用 AC_FL_RunContent，可以加多一对参数 ‘wmode’,'transparent’ 即可。如果还是有问题，可以尝试给 Flash 外面增加一个 DIV 标签，并给他设置 z-index:0; 的样式。

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

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

它功能和特点有：

jQuery 工具栏提示插件：qTip

1. 支持不使用任何 PNG 图片就能支持圆角。
2. 工具栏提示指针可以非常灵活的定义到很多个地方。
3. 已经有5个可以使用的时髦主题，并且非常容易自己去创建一个。
4. 支持叠加，如果有多个工具栏提示，无论多近，都会保证叠加的顺序。
5. 有多种效果可以用，如消退，幻灯片，发光，甚至可已经定义。

下载：qTip。

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

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

开始之前，你需要安装 jQuery 框架，这个非常简单，只要下载 jQuery Starterkit。然后在你的代码中正确调用即可，代码很简单，我不写了。

如果你和我一样懒，也可以采用 Google AJAX Libraries API，使用以下方法调用：

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

Hello jQuery

当我们开始使用 jQuery 读取和操纵 DOM 的时候，我需要给 HTML 文档注册一个 ready 事件。代码如下：

$(document).ready(function() {
    // do stuff when DOM is ready
});

下面是一个具体的例子：

$(document).ready(function() {
    $("a").click(function() {
        alert("Hello world!");
    });
});

上面这个例子，就是当你点击页面中的链接的时候，他会弹出一个警告框。

下面让我们看看具体发生了什么： $("a") 是一个 jQuery 选择器，这里它选取所有的 a 元素，$ 这里是 jQuery “class” 的别名，所以 $() 初始化了一个新的 jQuery 对象。click() 函数是我们调用的 jQuery 对象的一个方法。，它给所有选择的元素绑定了一个单击事件，并在该事件发生的时候执行提供的函数。

这段代码相当于：

<a href="#" onclick="alert('Hello world')">Link</a>

这两者之间的区别是相当明显的，我不用为每个单一元素写 onclick 函数。这样我们就把结构（HTML）和行为（JS）区分开，就和使用 CSS 把结构和样式区分开一样。

最后的例子请猛击这里：jQuery Example 1

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

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

相关日志

• noty：jQuery 网页消息通知插件
• 专为移动平台打造的 jQuery： jqMobi
• jQuery Mobile 1.0 发布
• jQuery 如何存储，获取和删除 Cookies
• Catch404：处理网站坏链的 jQuery 插件
• 在 jQuery 中如何判断对象是否存在