网站开发常用jQuery插件总结(九)侧边栏插件pageslide

一.pageslide插件功能

实现现实隐藏侧边栏的功能。插件可以读取另个一html,也可以是当前页面中的元素。

二.pageslide官方地址

http://srobbin.com/jquery-plugins/pageslide/
官方地址上有demo,可以测试下使用效果

三.pageslide使用方法

pageslide使用非常简单，需要的操作有：
1.侧边栏的样式，在jquery.pageslide.css文件中，只有几条语句修改非常方便。
2.引用jquery与jquery.pageslide.css，jquery.pageslide.js文件。但是在jquery.pageslide.js文件中，定义了全局变量，变量赋值为$(‘body’)，所以插件需要在页面body中引用，如果在head中引用的话，侧边栏操作是无法成功的。

<link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" />
<script src="../lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<!--需在页面body中引用-->
<script src="../jquery.pageslide.js"></script>

3.简单的初始化语句，只需一句话。我们需要指定侧边栏出现的位置与是否需强制关闭。direction定义侧边栏滑出方向。

//默认在左边显示
$(".first").pageslide(); 
//右边显示，需进行关闭操作
$(".second").pageslide({ direction: "left", modal: true });

官方demo中有用例，下载下来后看下就可以了。使用非常简单。

转载于:https://www.cnblogs.com/imlions/p/3349351.html