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

vue上下全屏翻页

vue上下全屏翻页

Fullscreen Pageflip Layout with BookBlock

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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值