jQuery插件PageSlide实现左右侧栏导航菜单


Posted in Javascript onApril 12, 2015

jQuery左右侧栏导航菜单插件PageSlide,目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的,支持自定义展现的方向,菜单内容可自行定义,支持加载页面,或者模态的窗格中显示此页的隐藏的内容,推荐使用。

使用方法:

1.加载插件和jQuery

<link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" /> 
<script src="../lib/jquery-1.7.1.min.js"></script> 
<script src="../jquery.pageslide.min.js"></script>

2.使用方式

2.1 向右,滑动并从辅助页加载内容

<a href="_secondary.html" class="first">Link text</a> 
<script> 
 $("a.first").pageslide(); 
</script>

2.2 滑到左边,并在模态的窗格中显示此页的隐藏的内容

<a href="#modal" class="second"></Link text</a> 
<div id="modal" style="display:none"> 
 <h2>Modal</h2> 
 <a href="javascript:$.pageslide.close()"></Closea> 
</div>

2.3 函数打开

<a href="javascript:$.pageslide({ direction: 'left', href:'_secondary.html' })">Link text</a>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
ECMAScript6--解构
Mar 30 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 #Javascript
JavaScript 面向对象与原型
Apr 10 #Javascript
javascript基本包装类型介绍
Apr 10 #Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 #Javascript
js改变embed标签src值的方法
Apr 10 #Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 #Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 #Javascript
You might like
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python hash每次调用结果不同的原因
2019/11/21 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
介绍一下write命令
2014/08/10 面试题
历史专业个人求职信分享
2013/12/20 职场文书
陈欧广告词
2014/03/14 职场文书
开展创先争优活动总结
2014/08/28 职场文书
先进个人推荐材料
2014/12/29 职场文书
高二数学教学反思
2016/02/18 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers