今天我们将向大家展示如何用才华横溢的will Grauvogel，来展示如何使用和定制这个聪明的jQuery小册子。我们将创建一个虚拟Moleskine笔记本，带有来自博客的最新帖子。
你可以在这里找到Dennern的美丽的Moleskine Photoshop文件：我的Moleskine(PSD)
对于导航箭头，我们使用了由premiumpixels.com提供的像素理想的PSD：简单的小箭头(PSD)
好的,让我们开始吧!
标记
HTML结构将由包含带有id“mybook”的div的小册子插件标记组成。我们还将添加一些导航项和一个加载元素，我们希望在本书的内容加载时显示:
<div class="book_wrapper"> <a id="next_page_button"></a> <a id="prev_page_button"></a> <div id="loading" class="loading">Loading pages...</div> <div id="mybook" style="display:none;"> <div class="b-load"> <div> <img src="images/1.jpg" alt=""/> <h1>Slider Gallery</h1> <p>This tutorial is about creating a creative gallery...</p> <a href="#" class="article">Article</a> <a href="#" class="demo">Demo</a> </div> <div> ... </div> </div> </div> </div>
这本小册子的每一页都将被放置在元素的一个div元素中，并带有“b-load”的类。
因为插件允许用户使用定制按钮翻转页面，所以我们会将插件配置为使用我们的箭头锚。
让我们来看看这种风格。
CSS
对于样式化，我们将简单地为插件创建一个“皮肤”，即一个样式表，它将覆盖带有插件样式表的一些样式属性(因此，请确保在包含了我们的定制之后放置它)。
我们将从“手册”类开始，并为其提供一些阴影和圆形边界:
.booklet{
-moz-box-shadow:0px 0px 1px #fff;
-webkit-box-shadow:0px 0px 1px #fff;
box-shadow:0px 0px 1px #fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}我们想要添加一个背景图像左边和右边的页面,以便它看起来更像一个真正的书:
.booklet .b-wrap-left{
background:#fff url(../images/left_bg.jpg) no-repeat top left;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.booklet .b-wrap-right{
background:#efefef url(../images/right_bg.jpg) no-repeat top left;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}我们还将对页码进行样式化，并添加一些像样的顶部边框:
.booklet .b-counter{
bottom:10px;
position:absolute;
display:block;
width:90%;
height:20px;
border-top:1px solid #ddd;
color:#222;
text-align:center;
font-size:12px;
padding:5px 0 0;
background:transparent;
-moz-box-shadow:0px -1px 1px #fff;
-webkit-box-shadow:0px -1px 1px #fff;
box-shadow:0px -1px 1px #fff;
opacity:0.8;
}在HTML学习中，我们在小册子周围添加了一个包装，以便我们可以使用一个moleskine背景图像:
.book_wrapper{
margin:0 auto;
padding-top:50px;
width:905px;
height:540px;
position:relative;
background:transparent url(../images/bg.png) no-repeat 9px 27px;
}我们想在每个页面的标题下面添加一个手绘线:
.book_wrapper h1{
color:#13386a;
margin:5px 5px 5px 15px;
font-size:26px;
background:transparent url(../images/h1.png) no-repeat bottom left;
padding-bottom:7px;
}链接将有以下的段落和风格:
.book_wrapper p{
font-size:16px;
margin:5px 5px 5px 15px;
}
.book_wrapper a.article,
.book_wrapper a.demo{
background:transparent url(../images/circle.png) no-repeat 50% 0px;
display:block;
width:95px;
height:41px;
text-decoration:none;
outline:none;
font-size:16px;
color:#555;
float:left;
line-height:41px;
padding-left:47px;
}
.book_wrapper a.demo{
margin-left:50px;
}
.book_wrapper a.article:hover,
.book_wrapper a.demo:hover{
background-position:50% -41px;
color:#13386a;
}我们将通过添加一个带有白色阴影的浅色边框来给这些图像略微的触动，从而创造出一个略微雕刻的外观:
.book_wrapper img{
margin:10px 0px 5px 35px;
width:300px;
padding:4px;
border:1px solid #ddd;
-moz-box-shadow:1px 1px 1px #fff;
-webkit-box-shadow:1px 1px 1px #fff;
box-shadow:1px 1px 1px #fff;
}右边页面的边框颜色需要稍微暗一点:
.booklet .b-wrap-right img{
border:1px solid #E6E3C2;
}对于导航箭头我们将使用一个包含了所有四个箭头类型的精灵图像：
a#next_page_button,
a#prev_page_button{
display:none;
position:absolute;
width:41px;
height:40px;
cursor:pointer;
margin-top:-20px;
top:50%;
background:transparent url(../images/buttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
left:-30px;
}
a#next_page_button{
right:-30px;
background-position:-41px -40px;
}
a#next_page_button:hover{
background-position:-41px 0px;
}
a#prev_page_button:hover{
background-position:0px 0px;
}加载元素将具有圆角边框，并且是半透明的。我们将绝对把它放在手册的右侧:
.loading{
width:160px;
height:56px;
position: absolute;
top:50%;
margin-top:-28px;
right:135px;
line-height:56px;
color:#fff;
padding-left:60px;
font-size:15px;
background: #000 url(../images/ajax-loader.gif) no-repeat 10px 50%;
opacity: 0.7;
z-index:9999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}这就是所有的风格!让我们添加一些魔法!
JavaScript
在jQuery中，我们将简单地调用这个插件，因为它已经加载了所有的图像。查看此处的所有选项:
小册子jQuery插件选项
var $mybook = $('#mybook');
var $bttn_next= $('#next_page_button');
var $bttn_prev= $('#prev_page_button');
var $loading= $('#loading');
var $mybook_images= $mybook.find('img');
var cnt_images= $mybook_images.length;
var loaded= 0;
//preload all the images in the book,
//and then call the booklet plugin
$mybook_images.each(function(){
var $img = $(this);
var source= $img.attr('src');
$('<img/>').load(function(){
++loaded;
if(loaded == cnt_images){
$loading.hide();
$bttn_next.show();
$bttn_prev.show();
$mybook.show().booklet({
name: null,
// name of the booklet to display in the document title bar
width: 800,
// container width
height: 500,
// container height
speed: 600,
// speed of the transition between pages
direction: 'LTR',
// direction of the overall content
// organization, default LTR, left to right, can be
// RTL for languages which read right to left
startingPage: 0,
// index of the first page to be displayed
easing: 'easeInOutQuad',
// easing method for complete transition
easeIn: 'easeInQuad',
// easing method for first half of transition
easeOut: 'easeOutQuad',
// easing method for second half of transition
closed: true,
// start with the book "closed", will add empty
// pages to beginning and end of book
closedFrontTitle: null,
// used with "closed", "menu" and "pageSelector",
// determines title of blank starting page
closedFrontChapter: null,
// used with "closed", "menu" and "chapterSelector",
// determines chapter name of blank starting page
closedBackTitle: null,
// used with "closed", "menu" and "pageSelector",
// determines chapter name of blank ending page
closedBackChapter: null,
// used with "closed", "menu" and "chapterSelector",
// determines chapter name of blank ending page
covers: false,
// used with "closed", makes first and last pages
//into covers, without page numbers (if enabled)
pagePadding: 10,
// padding for each page wrapper
pageNumbers: true,
// display page numbers on each page
hovers: false,
// enables preview pageturn hover animation,
// shows a small preview of previous or next page on hover
overlays: false,
// enables navigation using a page sized overlay,
// when enabled links inside the content will
// not be clickable
tabs: false,
// adds tabs along the top of the pages
tabWidth: 60,
// set the width of the tabs
tabHeight: 20,
// set the height of the tabs
arrows: false,
// adds arrows overlayed over the book edges
cursor: 'pointer',
// cursor css setting for side bar areas
hash: false,
// enables navigation using a hash string,
// ex: #/page/1 for page 1, will affect
// all booklets with 'hash' enabled
keyboard: true,
// enables navigation with arrow keys
// (left: previous, right: next)
next: $bttn_next,
// selector for element to use as click
// trigger for next page
prev: $bttn_prev,
// selector for element to use as click
// trigger for previous page
menu: null,
// selector for element to use as the menu area,
// required for 'pageSelector'
pageSelector: false,
// enables navigation with a dropdown menu of pages,
// requires 'menu'
chapterSelector: false,
// enables navigation with a dropdown menu of chapters,
// determined by the "rel" attribute, requires 'menu'
shadows: true,
// display shadows on page animations
shadowTopFwdWidth: 166,
// shadow width for top forward anim
shadowTopBackWidth: 166,
// shadow width for top back anim
shadowBtmWidth: 50,
// shadow width for bottom shadow
before: function(){},
// callback invoked before each page turn animation
after: function(){}
// callback invoked after each page turn animation
});
Cufon.refresh(); // if you want to use cufon
}
}).attr('src',source);
});为了把书里的内容进行化，我们会将如下的内容添加到HTML的头部:
<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
<script src="cufon/Note_this_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1,p,.b-counter');
Cufon.replace('.book_wrapper a', {hover:true});
Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});</script>这就是一切!我们希望您喜欢本教程，喜欢它并发现它很有用:)