vue上下全屏翻页_全屏翻页布局

vue上下全屏翻页

View demo 查看演示 Download Source 下载源

We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to customize BookBlock and use some available options for navigating the content.

我们收到了一些有关如何全屏使用BookBlock插件的要求。 因此，我们决定创建全屏布局，对其应用BookBlock并添加侧边栏菜单。 我们将向您展示如何自定义BookBlock并使用一些可用选项浏览内容。

The idea is to navigate the pages using the arrows or swiping the pages, and to slide out the menu when clicking on the menu button. The sidebar menu will contain links to different pages, i.e. the table of contents. When clicking on a table of contents entry, we’ll jump to the respective page.

想法是使用箭头浏览或滑动页面，并在单击菜单按钮时滑出菜单。 侧边栏菜单将包含指向不同页面(即目录)的链接。 单击目录条目表时，我们将跳至相应页面。

We’ll also use jScrollPane by Kevin Luck to add a custom scrollbar for the content when needed.

必要时，我们还将使用Kevin Luck的jScrollPane为内容添加自定义滚动条。

Please note: CSS 3D transforms will only work in modern browsers that support those properties. 请注意：CSS 3D转换仅在支持这些属性的现代浏览器中起作用。

The demo contains excerpts form the hilarious “The Funny Side of Physic” by A. D. Crabtre from Project Gutenberg.

该演示包含摘录自古腾堡计划(Project Gutenberg)的广告狂人AD Crabtre的有趣的“物理的有趣一面” 。

The following libraries and jQuery plugins will be used:

将使用以下库和jQuery插件：

1. BookBlock by Pedro Botelho

   Pedro Botelho的书本

2. Custom jQuery++ by Bitovi

   Bitovi的自定义jQuery ++

3. jScrollPane by Kevin Luck

   jScrollPane ，凯文·勒克(Kevin Luck)

4. jQuery Mouse Wheel Plugin by Brandon Aaron

   jQuery鼠标滚轮插件，作者Brandon Aaron

5. Custom Modernizr (peek inside to see what this build includes)

   自定义Modernizr (窥视内部以查看此构建包含的内容)

So, let’s get started!

所以，让我们开始吧！

标记 (The Markup)

Let’s have a main container for all our elements. Inside, we’ll add a division for the sidebar menu which we’ll give the class “menu-panel”, and the wrapper for the BookBlock with the class “bb-custom-wrapper”. The BookBlock will contain the wrapper (that we’ll apply the plugin to) and the structure that the plugin needs. Inside of each item, we’ll add a content wrapper with a division that we’ll need for the custom scroll functionality:

让我们为所有元素提供一个主容器。 在内部，我们将为侧边栏菜单添加一个划分，为类“ menu-panel”添加一个分区，为BookBlock提供一个带有“ bb-custom-wrapper”类的包装。 BookBlock将包含包装器(我们将插件应用到该包装器)和插件所需的结构。 在每个项目的内部，我们将添加一个内容包装器，其中包含自定义滚动功能所需的分隔：

<div id="container" class="container">	

	<div class="menu-panel">
		<h3>Table of Contents</h3>
		<ul id="menu-toc" class="menu-toc">
			<li class="menu-toc-current"><a href="#item1"&g