Pushbar.js带模糊效果的隐藏滑动侧边栏插件小白帮助_插件基础知识入门

Pushbar.js是一个小巧的Javascript插件,它可以用于在Web应用程序中创建滑动侧边栏效果,还提供模糊效果,就像开关抽屉的效果。你可以完全定制效果,它不依赖任何第三方库,你可以使用它作为侧栏菜单或者操作选项滑出效果。如何使用1.引入文件在页面中引入pushbar.js和pushbar.css文件。<link href="dist/css/pus

Pushbar.js带模糊效果的隐藏滑动侧边栏插件小白帮助

Pushbar.js是一个小巧的Javascript插件,它可以用于在Web应用程序中创建滑动侧边栏效果,还提供模糊效果,就像开关抽屉的效果。你可以完全定制效果,它不依赖任何第三方库,你可以使用它作为侧栏菜单或者操作选项滑出效果。

Pushbar.js带模糊效果的隐藏滑动侧边栏插件小白帮助_插件基础知识入门

如何使用

1.引入文件

在页面中引入pushbar.js和pushbar.css文件。

<link href="dist/css/pushbar.css" rel="stylesheet">
<script src="js/pushbar.js"></script>  
2.HTML结构

将要滑出的侧边栏部分.pushbar和主体部分.pushbar_main_content分开。

<div data-pushbar-id="mypushbar1" class="pushbar from_left">
      Push bar content 1

  <button data-pushbar-close>Close</button>
</div>

<div data-pushbar-id="mypushbar2" class="pushbar from_bottom">
  Push bar content 2

  <button data-pushbar-close>Close</button>
</div>

<div class="pushbar_main_content">
  Main content of the page

  <button data-pushbar-target="mypushbar1">
  Open my pushbar 1
  </button>

  <button data-pushbar-target="mypushbar2">
  Open my pushbar 2
  </button>
</div> 

Pushbar.js提供四个方向的滑出效果,左侧(from_left)、右侧(from_right)、头部(from_top)、底部(from_bottom),只需修改侧边栏部分的样式就可。

初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化pushbar.js插件。

var pushbar = new Pushbar({
    blur:true,
    overlay:true,
});

配置参数

Pushbar.js提供两个主要的选项配置,简单实用。

blur:是否在打开侧边栏时主页面带模糊效果。

overlay:是否在打开侧边栏时主页面带遮罩层。

更多有关Pushbar.js的使用请参考Pushbar.js在github上的地址:https://github.com/oncebot/pushbar.js

海计划公众号
(0)
上一篇 2020/03/29 01:45
下一篇 2020/03/29 01:45

您可能感兴趣的内容

  • 直播APP开发对界面设计的要求小白攻略_直播小白指南

    移动互联网时代,各种APP已经离不开我们的生活,制作开发一款受大众欢迎的APP也成了重点,特别是在直播APP开发过程中,是一款界面花哨,还是相对简单的APP更适合直播呢?直播APP的每一个图标,每个界面都是要严格把控。直播APP界面设计,怎么做才能让直播APP的界面效果更好,需要UI和UE的精心设计,界面富有创意,有个性才能让用户的体验更好,好的界面设计用户

    2020/03/20
  • 使用webpack4搭建一个基于Vue的组件库基础指南_库基础知识

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的。记录如何使用webpack4搭建一个library的脚手架前言使用 webpack4,需要安装 webpack 和 webpack-cliyarn add webpack webpack-cli -D
    然后就是

    2020/03/24
  • 微信小程序连接蓝牙硬件的实现入门教程_小程序使用帮助

    项目需要使用小程序的蓝牙功能与硬件设备进行连接相互传送数据指令 ,首先说下流程: openBluetoothAdapter(初始化蓝牙适配器)—》 wx.startBluetoothDevicesDiscovery(开始搜寻附近的蓝牙外围设备)——》wx.getBluetoothDevices(获取所有已发现的蓝牙设备)——》wx.createBLEConn

    2020/04/03
  • InversifyJS基础知识_一个强大的和轻量级控制反转容器,支持JavaScript和Node.js

    InversifyJS基础知识 官方网址:http://inversify.io/ GitHub:https://github.com/inversify/InversifyJS …

    2020/03/07
  • vue.js 动态绑定class小白常识_class菜鸟知识

    1. 数据绑定vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下:博客园首页简写:
    博客园首页 2. 动态绑定classvue

    2020/03/29
  • Brain.js小白知识_JavaScript原生神经网络库

    Brain.js小白知识 官方网址:https://brain.js.org/ GitHub:https://github.com/BrainJS/brain.js 简介描述:Ja…

    2020/03/06
  • TypeScript 完全手册基础入门_手册入门基础知识

    什么是 TypeScript?TypeScript 是 JavaScript 的超集,具有静态类型特性,旨在简化大型 JavaScript 应用程序的开发,也被称为 JavaScript that scales(可拓展的 JavaScript)。为什么要用 TypeScript?JavaScript 在过去几年中快速发展,成为客户端和服务器端最通用的跨平台语

    2020/03/24
  • js 实现二级联动菜鸟攻略_方法小白基础

    在web开发中我们经常会遇到页面的一个二级联动技术,二级联动字面解释就是说我在选择一级select不同的option,下面的二级option的属性值在进行相应的变化。onchange 事件山东<op

    2020/03/31
  • eros小白入门_一套 JS 代码,两端原生应用

    eros小白入门 官方网址:https://bmfe.github.io/eros-docs/#/ GitHub:https://github.com/bmfe/eros 简介描述…

    2020/03/06
  • Codekit教程视频为Web前端打造的全能型神器

    Codekit基础入门 官方网址:https://codekitapp.com/ 简介描述:为Web前端打造的全能型神器 CodeKit简介 这是一款Mac平台集代码编辑与文件压缩…

    2020/03/05
  • 自己动手实现一个axios菜鸟教程网_axios使用帮助

    前言作为一名前端er,对于数据请求的第三方工具axios,一定不会陌生,如果还是有没有用过,或者不了解的小伙伴,这里给你们准备了贴心的中文文档 ,聪明的你们一看就会~唔,为了更好的了解和学习 axios 封装思想和实现原理,我们一起来动手来实现一个简版的 axios ~前期准备工欲善其事,必先利其器,我们在开始我们的项目之前,一定要做好其相关的准备工作,我们

    2020/03/24
  • 智通人才网小白攻略_提供网络、现场、校园招聘

    智通人才网小白攻略 官方网址:http://www.job5156.com/ 简介描述:提供网络、现场、校园招聘 智通人才网提供最全最新招聘信息,为企业提供网络招聘、现场招聘会、校…

    2020/03/06
  • Node.js 命令行工具的编写入门百科_工具指南攻略

    日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作。其编写也不难,和日常编写 Node.js 代码并无二致。package.json 中的 bin 字段一个 npm 模块,如果在 package.json 中指定了 bin 字段,那说明该模块提供了可在命令行执行的命令,这些命令就是在 bin 字段中指定的。package.json{“

    2020/03/30
  • 什么是javascript对象?基础知识教程_对象入门知识

    在 JavaScript 中,对象是拥有属性和方法的数据集合;JavaScript对象是被称为属性和方法的命名值的容器。包含在对象里的数据可以通过两种形式访问-属性和方法。JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。所有JavaScript 值,除了原始值,都是对象。说明:原始值指的是没有属性或方法的值。如何创建JavaScri

    2020/03/24
  • nodejs的jekins部署使用教程_node小白教程

    第一步gitlab项目仓库给jekins服务器分配一个账号develop权限用于拉取代码。分支为master。第二步jekins配置打包脚本。npm install –registry=https://registry.npm.taobao.org
    rm -rf 项目名.tar.gz
    tar cvf 项目名.tar.gz *思路就是拉取最新代码后,安装相关

    2020/04/03
  • CSS中inline、block和inline-block的区别菜鸟指南_区别基础入门

    block块级元素特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。,

    ,

    , ,

    • 是块元素的例子。 in

    2020/03/26