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 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
vue权限路由实现的方法示例总结
Jul 29 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
推荐几个开源的微信开发项目
2014/12/28 PHP
php将html转为图片的实现方法
2017/05/19 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
python实现杨辉三角思路
2017/07/14 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python中判断文件结束符的具体方法
2020/08/04 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
UNIX文件类型
2013/08/29 面试题
小学毕业感言500字
2014/02/28 职场文书
初中生评语大全
2014/04/24 职场文书
公司联欢会策划方案
2014/05/19 职场文书