jQuery插件:pageSlide,可以在网页两侧动态调用其它网页显示的jQuery插件

2009-08-04 10:47:03 来源:查看 | 【

一个非常优秀的JQuery插件,可以在浏览器的侧边调用另外一个网页显示,效果非常迷人!

查看演示页面 View Demo


本插件的功能:
可以选则幻灯的方向(left or right)
自定义显示的内容
可以以模式窗口显示,背景变成不可用
简单明了
可以在同一个网页上定义多种侧边
全面支持 IE7+, FireFox 2+, Safari 2+
代码已经优化

本插件需要
jQuery 1.26, 推荐jQuery 1.3 及以上版本

设置方法

在网页<head>区添加以下代码

<script type="text/javascript" src="http://www.sharejs.com/software/jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.pageslide.js"></script>

sharejs.com推荐使用Google上的jQuery,因为Google很稳定,当然下载到本地更稳定,哈哈

在HTML页面的最下面添加以下代码
<script type="text/javascript">
  $("#my_anchor").pageSlide({width:'350px'});
</script>

如果浏览器支持javascript,则会通过ajax方式调用侧边拦。

一些有用的信息
在你的侧边页面上定义一个关闭按钮
如果你希望在侧边页面上定义个关闭按钮,只需要在关闭标签上添加一个class= “pageslide-close” 即可.

<a href="javascript:;" class="pageslide-close">Close me!</a>


使用模式侧边,即让背景变成灰色不可用

$("#my_anchor").pageSlide({width:'350px', modal:true});



从右边出现

$("#my_anchor").pageSlide({width:'350px', direction:'right'});


在同一页上设置多个 PageSlides
$("#my_anchor").pageSlide({width:'350px', modal:true});
$("#foobar").pageSlide({width:'150px', direction:'right'});


各种不同的设置

var settings = $.extend({
width:          "300px", // Accepts fixed widths
duration:       "normal", // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
direction:      "left", // default direction is left.
modal:          false, // if true, the only way to close the pageslide is to define an explicit close class. 
}, options);



下载"jQuery插件:pageSlide,可以在网页两侧动态调用其它网页显示的jQuery插件"

  • 本地下载
  • 本地下载2

相关资源