电脑屏幕空间终究是有限的，在有限的页面空间上，合理的布局和内容分配是Web设计师需要考虑的。有时有些信息元素，我想放在博客上，却往往找不到合适的位置，十分挠头。国外一位Web设计师提出了一个基于jQuery的PageSlide的效果，我感觉特别有创意，需要的时候也许能用上，在这里介绍给大家。

话不多说，先看效果： 在线演示（注意：在演示页面先看说明）

看过效果的朋友，想必对它有个了解。

这里我简单向大家说明下PageSlide效果的实现原理：PageSlide是基于jQuery实现的一款jquery插件。使用时，在当前页面中设定一个链接，该链接的href属性指向另一个页面A，并为该链接绑定pageSlide事件。点击链接时，触发PageSlide事件，在页面中创建一个新的区域（左侧或右侧，依据传入参数而定），然后通过jQuery ajax将页面A中内容读取到该区域中。

研究了一下插件的源码，这款插件除了创意不错，就是在新区域和原始页面的协调上有一些技巧。

在pageSlide提供的功能中，只支持从页面两侧出现新区域，我做了点改造，使其可以页面上方也可出现新区域。

请看在本博上应用的一个demo（谨记：点击图片中的“热气球”区域，关闭并返回）：点击我，看效果

PageSlide用法很简单，简单说一下：

1. 引用jquery库文件及pageslide插件文件
2. 在页面中添加事件触发链接，链接地址是要打开页面的地址，如：

   <a href="_left.html" id="slide-left">从右边打开隐藏空间</a>

3. 为链接绑定pageSlide事件，并传入设定参数：

   //第一个参数是页面新区域的宽度
   //第二个参数是当前页面移动方向，方向为left，也就是从右侧出现新区域
          $("#slide-left").pageSlide({ width: "350px", direction: "left" });

下载PageSlide插件: 点击下载

相关链接：插件国外blog页面，插件项目页面

如何使用这款插件，就看你的想象力了，也许你可以也把它应用在自己的博客上。有啥问题，下面讨论。

延伸阅读:

1. Jquery Tools——不可错过的Jquery UI库（二）
2. 强大的Jquery图表绘制插件 —— jqPlot
3. jQuery Tools——不可错过的jQuery UI库（五）
4. FullSize：一个新的IMG标签属性（附带JQuery实现）
5. Jquery Tools——不可错过的Jquery UI库（四）
6. Jquery Tools——不可错过的Jquery UI库（三）
7. 实现页面不同位置间平滑滚动的两种解决方案
8. jQuery Tools——不可错过的jQuery UI库（六）

---