app 侧边栏 html,响应式手机App样式隐藏侧边栏特效插件

Slidebars是一款简单实用的手机App样式隐藏侧边栏特效jQuery插件。该侧边栏插件十分小巧，仅需1555字节的js文件和600字节的css文件。它使用CSS3动画来制作过渡效果，在不支持的浏览器中会使用jQuery.animate()方法来替代。

安装

可以通过bower来安装该侧边栏插件。

bower install Slidebars

使用方法

HTML结构

在使用这个隐藏侧边栏插件时，的设置应该如下：

你的页面内容需要放置在一个#sb-site的容器中。侧边栏的

中需要添加.sb-slidebar的class，如果要侧边栏在左边，则再添加一个sb-leftclass。

class类

你需要添加.sb-slidebar class到所有的侧边栏上。

然后你可以通过添加下面的class来设置不同类型的侧边栏。

.sb-left：设置侧边栏为左侧边栏。

.sb-right：设置侧边栏为右侧边栏。

.sb-static：设置侧边栏为不固定模式，它会随滚动条一起滚动。

.sb-style-push：侧边栏打开时会推动页面内容。

.sb-style-overlay：侧边栏打开时会遮罩页面内容。

.sb-width-thin：一个自适应宽度，比标准宽度小15%。

.sb-width-wide：一个自适应宽度，比标准宽度大15%。

sb-width-custom：要自定义侧边栏的宽度，需要添加.sb-width-custom class，并通过data-sb-width属性传入一个指定的宽度值。你可以传入一个固定的刻度值，也可以传入一个百分比值。例如：

.sb-momentum-scrolling：添加这个class可以使用原生的IOS平滑滚动。

class控制类：

下面的一些可选的class可用于控制侧边栏。

.sb-toggle-left：用于切换左侧边栏的状态。

.sb-toggle-right：用于切换右侧边栏的状态。

.sb-open-left：用于打开左侧边栏。

.sb-open-right：用于打开右侧边栏。

.sb-close：用于关闭所有的侧边栏。

动画class类

如果你想要侧边栏有滑动效果可以添加.sb-slide class。这对于固定定位的元素非常有用，例如顶部导航条。

辅助class类

该侧边栏插件有下面一些辅助class类。

html.sb-init：在侧边栏已经初始化并打开时会出现。

html.sb-active：侧边栏打开时会出现。

html.sb-active-left：左侧边栏打开时会出现。

html.sb-active-right：右侧边栏打开时会出现。

html.sb-android：在安卓浏览器2.x以上版本中使用该侧边栏时会出现。

html.sb-static：在安卓浏览器版本小于3或IOS浏览器版本小于5中会出现。

.sb-disable-close：在侧边栏的链接中添加这个class会在点击该链接时阻止关闭侧边栏。

初始化插件

在页面DOM元素加载完毕之后，可以通过$.slidebars()方法来初始化该侧边栏插件。

(function($) {

$(document).ready(function() {

$.slidebars();

});

}) (jQuery);

也可以在初始化时传入一些配置参数：

(function($) {

$(document).ready(function() {

$.slidebars({

siteClose: true, // true or false

disableOver: 480, // integer or false

hideControlClasses: true, // true or false

scrollLock: false // true or false

});

});

}) (jQuery);

配置参数

siteClose：允许在点击页面时关闭侧边栏。默认值为true。

disableOver：禁止侧边栏超过指定的页面宽度。默认值为false。

hideControlClasses：当侧边栏宽度超过disableOver指定的值时，隐藏侧边栏的控制class。默认值为false。

scrollLock：在侧边栏打开时不允许页面内容滚动。默认值为false。

API

该侧边栏插件有一些API方法。你需啊哟在初始化的时候创建一个新的侧边栏实例对象。

.slidebars.open(side)：打开指定的侧边栏。例如：.open('left')或.open('right')。

.slidebars.toggle(side)：切换指定的侧边栏。例如：.toggle('left')或.toggle('right')。

.slidebars.close()：关闭所有打开的侧边栏。

.slidebars.init：如果侧边栏被正确初始化并且处于打开状态返回true。

.slidebars.active(side)：如果指定的侧边栏处于打开状态返回true。

.slidebars.destroy(side)：从DOM中移除侧边栏，需要指定side：.destroy('left')或.destroy('right')。

下面是一个例子：

(function($) {

$(document).ready(function() {

var mySlidebars = new $.slidebars();

$('.my-button').on('click', function() {

mySlidebars.slidebars.open('left');

});

$('.my-other-button').on('click', function() {

mySlidebars.slidebars.toggle('right');

});

$('.my-third-button').click(mySlidebars.slidebars.close);

});

}) (jQuery);