使用 jQuery 写的侧边栏插件

这是一个基于jQuery的侧边栏插件,兼容PC和移动端 目前的版本是 1.0.0 相比上一个版本 0.1.0 添加了几个插件可选参数,接口和侧边栏的展现切换方式.消除了大部分bug,如有发现bug,请提给我,帮我改进.谢谢!

加入必须的CSS样式和Javascript文件,Javascript放在 </body>前,jQuery为必须加入的,也必须先加载.生产环境加载压缩后的文件min.css和min.js

<link href="jQuery-Sidebar.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script src="jQuery-Sidebar.min.js"></script> 加入侧边栏功能

需在HTML中加入相应div与class

加入左侧边栏

<div class="jqsb-sidebar jqsb-left">左侧边栏内容</div>

如果左侧边栏切换的方式为大小交替,就这样引入.

<div class="jqsb-sidebar jqsb-left"> <div class="jqsb-left-sm"></div> <div class="jqsb-left-bg"></div> </div>

加入右侧边栏

<div class="jqsb-sidebar jqsb-right">右侧边栏内容</div>

如果左侧边栏切换的方式为大小交替,就这样引入.

<div class="jqsb-sidebar jqsb-right"> <div class="jqsb-right-sm"></div> <div class="jqsb-right-bg"></div> </div>

你的网站内容需包裹在container中

<div class="jqsb-container">网站内容</div>

为你的HTML元素添加 class="jqsb-toggle-left" 或 class="jqsb-toggle-right" 来实现点击切换侧边栏的功能

最简单方式,此方式不能初始化侧边栏的大小交替,需填写参数.

$(function(){ $.jqSidebar(); }); 插件参数

调用方式

var jqsb = new $.jqSidebar(); jqsb.toggle('left'); jqsb.open('left'); jqsb.close('left'); jqsb.destroy('left');

如发现问题或者有好的提议请给我提交 Issues,谢谢!

jquery-sidebar