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插件：

BookBlock by Pedro Botelho

Pedro Botelho的书本
Custom jQuery++ by Bitovi

Bitovi的自定义jQuery ++
jScrollPane by Kevin Luck

jScrollPane ，凯文·勒克(Kevin Luck)
jQuery Mouse Wheel Plugin by Brandon Aaron

jQuery鼠标滚轮插件，作者Brandon Aaron
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">Self-destruction</a></li>
<li><a href="#item2">Why we die</a></li>
<li><a href="#item3">The honeymoon</a></li>
<li><a href="#item4">A drawing joke</a></li>
<li><a href="#item5">Commencing practice</a></li>
</ul>
</div><div class="bb-custom-wrapper"><div id="bb-bookblock" class="bb-bookblock"><div class="bb-item" id="item1">
<div class="content">
<div class="scroller">
<h2>Self-destruction</h2>
<p>...</p>
</div>
</div><!-- /content -->
</div><!-- /bb-item --><div class="bb-item" id="item2"><!-- ... --></div><div class="bb-item" id="item3"><!-- ... --></div><div class="bb-item" id="item4"><!-- ... --></div><div class="bb-item" id="item5"><!-- ... --></div></div><!-- /bb-bookblock -->
<nav>
<a id="bb-nav-prev" href="#">←</a>
<a id="bb-nav-next" href="#">→</a>
</nav><span id="tblcontents" class="menu-button">Table of Contents</span></div><!-- /bb-custom-wrapper --></div><!-- /container -->

The menu items will point to the respective BookBlock pages (bb-item). We’ll also add navigation arrows and a button for toggling the opening and closing of the menu.

菜单项将指向相应的BookBlock页面(bb-item)。我们还将添加导航箭头和一个用于切换菜单的打开和关闭的按钮。

Let’s move on to the style.

让我们继续进行样式。

CSS (The CSS)

Note that we won’t use any vendor specific prefixes here, but you’ll find them in the files.

请注意，我们在这里不会使用任何特定于供应商的前缀，但是您会在文件中找到它们。

We don’t discuss the style of the BookBlock plugin here (you can find the styles in bookblock.css), instead we’ll focus on all the other styles that are important for the layout and customize a couple of things.

我们不在这里讨论BookBlock插件的样式(您可以在bookblock.css中找到样式)，而是将重点放在对布局很重要的所有其他样式上，并自定义几件事。

Let’s start by importing the Lato font from Google web fonts:

首先，从Google网络字体导入Lato字体：


@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

The html element should have a height of 100% since we will need to set the heights of absolute elements inside to expand to the window’s height:

html元素的高度应为100％，因为我们需要设置内部绝对元素的高度以扩展到窗口的高度：


html {
height: 100%;
}

Let’s use border-box for box-sizing which will allow us to define percentages for widths and heights of elements while using paddings, without worrying about oversizing elements:

让我们使用border-box进行框大小调整，这将允许我们在使用填充时定义元素的宽度和高度的百分比，而不必担心元素的大小过大：


*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}

(We are brutally resetting the paddings in margins of all elements; you don’t have to do that, instead you could just normalize the respective elements.)

(我们在所有元素的空白处残酷地重置了填充；您不必这样做，而是可以对各个元素进行规范化。)

Let’s define the font for the body and set it’s height to 100%. Remember, we need to set it because of the children that will be absolute and 100% in height as well:

让我们定义主体的字体并将其高度设置为100％。记住，我们需要设置它的原因是孩子是绝对的，并且身高也是100％：


body {
font-family: 'Lato', Calibri, Arial, sans-serif;
font-weight: 400;
font-size: 100%;
color: #333;
height: 100%;
}

We are using Modernizr and we’ve added the class “no-js” to the html element. When JavaScript is enabled, Modernizr will replace that class with “js”. This will allow us to give certain CSS properties to elements that we don’t want if JavaScript is disabled. Our 100% width and height layout only makes sense if we have JS enabled and only then we want the body to have its overflow hidden:

我们正在使用Modernizr，并且已在html元素中添加了“ no-js”类。启用JavaScript后，Modernizr将用“ js”替换该类。如果禁用了JavaScript，这将使我们能够为不需要的元素提供某些CSS属性。仅当启用了JS并且只有这样我们希望主体隐藏其溢出时，我们的100％宽度和高度布局才有意义：


.js body {
overflow: hidden;
}

Let’s define some link styles:

让我们定义一些链接样式：


a {
color: #555;
text-decoration: none;
}a:hover {
color: #000;
}

We want our main container to occupy all the window width and height. The sidebar menu will be positioned outside of it by setting a negative left value (of its own width). The idea is to animate the whole container when we click to open the menu. It will slide to the right revealing the overflown sidebar menu.

我们希望我们的主容器占据所有窗口的宽度和高度。通过设置负负值(其自身宽度)将边栏菜单置于其外部。这个想法是当我们单击打开菜单时对整个容器进行动画处理。它将向右滑动，显示溢出的侧栏菜单。

So, let’s set the main wrappers’ widths and heights to 100% and add a transition to the container:

因此，让我们将主包装的宽度和高度设置为100％，并向容器添加一个过渡：


.container,
.bb-custom-wrapper,
.bb-bookblock {
width: 100%;
height: 100%;
}.container {
position: relative;
left: 0px;
transition: left 0.3s ease-in-out;
}

When we click on the menu button, we will add another class to the container which will set the left to 240 pixels (width of the sidebar menu):

当我们单击菜单按钮时，我们将向容器添加另一个类，该类会将左侧设置为240像素(侧边栏菜单的宽度)：


.slideRight {
left: 240px;
}

Without JavaScript enabled, we won’t be able to do this, so let’s add a left padding instead:

如果未启用JavaScript，我们将无法执行此操作，因此我们添加一个左填充：


.no-js .container {
padding-left: 240px;
}

By default, we want the sidebar menu to be fixed to the left side:

默认情况下，我们希望将侧边栏菜单固定在左侧：


.menu-panel {
background: #f1103a;
width: 240px;
height: 100%;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

When JS is enabled, we’ll set the position to absolute and the left to -240 pixel:

启用JS后，我们将位置设置为绝对位置，将左侧设置为-240像素：


.js .menu-panel {
position: absolute;
left: -240px;
}

Let’s style the elements of the menu:

让我们设置菜单元素的样式：


.menu-panel h3 {
font-size: 1.8em;
padding: 20px;
font-weight: 300;
color: #fff;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
} .menu-toc {
list-style: none;
}.menu-toc li a {
display: block;
color: #fff;
font-size: 1.1em;
line-height: 3.5;
padding: 0 20px;
cursor: pointer;
background: #f1103a;
border-bottom: 1px solid #dd1338;
}.menu-toc li a:hover,
.menu-toc li.menu-toc-current a{
background: #dd1338;
}

The navigation will be positioned absolutely on top of everything:

导航将绝对位于所有内容之上：


.bb-custom-wrapper nav {
top: 20px;
left: 60px;
position: absolute;
z-index: 1000;
}

The arrow links and the menu button will also be positioned absolutely and we’ll make them round by setting the border-radius to 50%:

箭头链接和菜单按钮也将绝对定位，我们通过将border-radius设置为50％使它们变圆：


.bb-custom-wrapper nav span,
.menu-button {
position: absolute;
width: 32px;
height: 32px;
top: 0;
left: 0;
background: #f1103a;
border-radius: 50%;
color: #fff;
line-height: 30px;
text-align: center;
speak: none;
font-weight: bold;
cursor: pointer;
}.bb-custom-wrapper nav span:last-child {
left: 40px;
}.bb-custom-wrapper nav span:hover,
.menu-button:hover {
background: #000;
}

The menu button will be positioned in the top left corner and we’ll hide its text:

菜单按钮将位于左上角，我们将隐藏其文本：


.menu-button {
z-index: 1000;
left: 20px;
top: 20px;
text-indent: -9000px;
}

Let’s create a little menu icon by using a pseudo-element with a double box shadow for the upper and lower line:

让我们通过使用伪元素创建一个小菜单图标，在上下行处带有一个双框阴影：


.menu-button:after {
position: absolute;
content: '';
width: 50%;
height: 2px;
background: #fff;
top: 50%;
margin-top: -1px;
left: 25%;
box-shadow: 0 -4px #fff, 0 4px #fff;
}

In case that there is no JS enabled, we don’t need any of those elements, so we’ll simply hide them:

如果没有启用JS，我们不需要任何这些元素，因此我们将其隐藏起来：


.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
display: none;
}

Let’s move to the inner parts of the BookBlock items. The content division needs to be absolute and we’ll set the overflow to hidden. This is important because we want to apply our custom scroll here and we’ll only do that when a page was turned. If we wouldn’t set the overflow to hidden, we’d see the content overflowing. Again, this only makes sense when we have JS enabled, so we’ll add the “js” class:

让我们转到BookBlock项目的内部。内容划分必须是绝对的，我们将溢出设置为隐藏。这很重要，因为我们要在此处应用自定义滚动，并且只有在打开页面时才这样做。如果我们不将溢出设置为隐藏，则会看到内容溢出。同样，这仅在启用JS时才有意义，因此我们将添加“ js”类：


.js .content {
position: absolute;
top: 60px;
left: 0;
bottom: 50px;
width: 100%;
overflow: hidden;
}

The scroller div is the one that will grow with content, so let’s set some paddings here:

滚动条div会随着内容的增长而增加，因此让我们在此处设置一些填充：


.scroller {
padding: 10px 5% 10px 5%;
}

Using percentages as lateral padding will make the layout adjust liquidly to the screen size.

使用百分比作为横向填充将使布局流畅地调整到屏幕尺寸。

Let’s hide those sharp edges when we scroll by adding pseudo-elements with a white to transparent gradient to the top and the bottom of the content div:

在滚动时，通过在内容div的顶部和底部添加白色到透明渐变的伪元素来隐藏这些锐利的边缘：


.js .content:before,
.js .content:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
z-index: 100;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(255,255,255,1) 0%,
rgba(255,255,255,0) 100%
);
}.js .content:after {
top: auto;
bottom: 0;
background:
linear-gradient(
to top,
rgba(255,255,255,1) 0%,
rgba(255,255,255,0) 100%
);
}

This will make the text appear slightly faded out.

这将使文本看起来略微淡出。

Let’s style the text elements:

让我们设置文本元素的样式：


.content h2 {
font-weight: 300;
font-size: 4em;
padding: 0 0 10px;
color: #333;
margin: 0 1% 40px;
text-align: left;
box-shadow: 0 10px 0 rgba(0,0,0,0.02);
text-shadow: 0 0 2px #fff;
}.no-js .content h2 {
padding: 40px 1% 20px;
}.content p {
font-size: 1.2em;
line-height: 1.6;
font-weight: 300;
padding: 5px 8%;
text-align: justify;
}

Finally, let’s add some media queries. Without JavaScript enabled, we don’t want to show the menu anymore from 800 pixels on. This is just an example of how we can control these elements under certain conditions.

最后，让我们添加一些媒体查询。如果未启用JavaScript，我们将不再显示800像素以上的菜单。这只是我们如何在特定条件下控制这些元素的一个示例。

The last media query will resize the font a bit, for smaller devices. Using ems makes things easier for these cases.

对于较小的设备，最后的媒体查询将稍微调整字体大小。使用ems使这些情况变得更容易。

@media screen and (max-width: 800px){
.no-js .menu-panel {
display: none;
}.no-js .container {
padding: 0;
}
}@media screen and (max-width: 400px){
.menu-panel,
.content {
font-size: 75%;
}
}

And that was all the style! Let’s add some funky dance moves, shall we?

这就是所有样式！让我们添加一些时髦的舞步吧？

JavaScript (The JavaScript)

We will start by caching some elements and initializing the BookBlock plugin. We need to set some things after each page flip, mainly the current item’s index and the jScrollPane behavior. This is specified in the onEndFlip callback passed to the BookBlock.

我们将首先缓存一些元素并初始化BookBlock插件。每次页面翻转后，我们需要设置一些东西，主要是当前项目的索引和jScrollPane行为。这在传递给BookBlock的onEndFlip回调中指定。


var $container = $( '#container' ),// the element we will apply the BookBlock plugin to
$bookBlock = $( '#bb-bookblock' ),// the BookBlock items (bb-item)
$items = $bookBlock.children(),// index of the current item
current = 0,// initialize the BookBlock
bb = $( '#bb-bookblock' ).bookblock( {
speed : 800,
perspective : 2000,
shadowSides : 0.8,
shadowFlip  : 0.4,
// after each flip...
onEndFlip : function(old, page, isLimit) {
// update the current value
current = page;// update the selected item of the table of contents (TOC)
updateTOC();// show and/or hide the navigation arrows
updateNavigation( isLimit );// initialize the jScrollPane on the content div for the new item
setJSP( 'init' );// destroy jScrollPane on the content div for the old item
setJSP( 'destroy', old );}
} ),
// the navigation arrows
$navNext = $( '#bb-nav-next' ),
$navPrev = $( '#bb-nav-prev' ).hide(),// the table of content items
$menuItems = $container.find( 'ul.menu-toc > li' ),// button to open the TOC
$tblcontents = $( '#tblcontents' ),transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},// transition event name
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],// check if transitions are supported
supportTransitions = Modernizr.csstransitions;

First, let’s bind the events to some of the elements initialized before. Also, we need to initialize the jScrollPane for the first (current) item.

首先，让我们将事件绑定到之前初始化的某些元素。另外，我们需要为第一个(当前)项初始化jScrollPane。


function init() {// initialize jScrollPane on the content div of the first item
setJSP( 'init' );
initEvents();}

Since we’ll eventually need to initialize, reinitialize and destroy the jScrollPane, let’s define a function for this:

由于最终将需要初始化，重新初始化和销毁jScrollPane，因此我们为此定义一个函数：


function setJSP( action, idx ) {
var idx = idx === undefined ? current : idx,
$content = $items.eq( idx ).children( 'div.content' ),
apiJSP = $content.data( 'jsp' );
if( action === 'init' && apiJSP === undefined ) {
$content.jScrollPane({verticalGutter : 0, hideFocus : true });
}
else if( action === 'reinit' && apiJSP !== undefined ) {
apiJSP.reinitialise();
}
else if( action === 'destroy' && apiJSP !== undefined ) {
apiJSP.destroy();
}}

We will need to bind several events:

我们将需要绑定几个事件：

We will call the BookBlock’s next() and prev() methods when we click the navigation arrows or when swiping the page单击导航箭头或滑动页面时，我们将调用BookBlock的next()和prev()方法。
The TOC will be shown / hidden when we click the $tblcontents (menu) button单击$ tblcontents(菜单)按钮时，目录将显示/隐藏。
We will call the BookBlock jump() method when we click a TOC item单击目录项时，我们将调用BookBlock jump()方法。
The jScrollPane will be initialized on window resizejScrollPane将在窗口调整大小时初始化

So, here we go:

所以，我们开始：


function initEvents() {// add navigation events
$navNext.on( 'click', function() {
bb.next();
return false;
} );$navPrev.on( 'click', function() {
bb.prev();
return false;
} );
// add swipe events
$items.on( {
'swipeleft'       : function( event ) {
if( $container.data( 'opened' ) ) {
return false;
}
bb.next();
return false;
},
'swiperight'  : function( event ) {
if( $container.data( 'opened' ) ) {
return false;
}
bb.prev();
return false;
}
} );// show TOC
$tblcontents.on( 'click', toggleTOC );// click a menu item
$menuItems.on( 'click', function() {var $el = $( this ),
idx = $el.index(),
jump = function() {
bb.jump( idx + 1 );
};
current !== idx ? closeTOC( jump ) : closeTOC();return false;
} );// reinit jScrollPane on window resize
$( window ).on( 'debouncedresize', function() {
// reinitialise jScrollPane on the content div
setJSP( 'reinit' );
} );}

The navigation arrows’ visibility will depend on the current page. If we are on the first page we’ll only see the next arrow and if we are on the last page we’ll only see the previous arrow:

导航箭头的可见性将取决于当前页面。如果我们在第一页上，我们只会看到下一个箭头，如果我们在最后一页上，我们只会看到上一个箭头：


function updateNavigation( isLastPage ) {
if( current === 0 ) {
$navNext.show();
$navPrev.hide();
}
else if( isLastPage ) {
$navNext.hide();
$navPrev.show();
}
else {
$navNext.show();
$navPrev.show();
}}

When we open the TOC we want to hide the navigation arrows and we just show them again after closing the TOC. We will animate the sidebar menu with a CSS transition. If there’s no support for transitions then a simple show/hide fallback will be used:

当我们打开目录时，我们想隐藏导航箭头，然后在关闭目录后再次显示它们。我们将通过CSS过渡为侧边栏菜单设置动画。如果不支持过渡，则将使用简单的显示/隐藏后备：


function toggleTOC() {
var opened = $container.data( 'opened' );
opened ? closeTOC() : openTOC();
}function openTOC() {
$navNext.hide();
$navPrev.hide();
$container.addClass( 'slideRight' ).data( 'opened', true );
}function closeTOC( callback ) {$navNext.show();
$navPrev.show();
$container.removeClass( 'slideRight' ).data( 'opened', false );
if( callback ) {
if( supportTransitions ) {
$container.on( transEndEventName, function() {
$( this ).off( transEndEventName );
callback.call();
} );
}
else {
callback.call();
}
}}

Phew!