使用正如您所看到的示例文件,您將需要包括jquery.pagepiling的JavaScript文件。js(或jquery.pagepiling.min.js簡化版)和jquery.pagepiling的css文件.css的插件,以及jQuery?？蛇x地,您可以添加jQuery UI庫,以防您想要使用其他效果除了包含在jQuery庫的線性或擺動的效果。
包括文件: 1 2 3 | <link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>
|
必需的HTML結(jié)構(gòu) 每個部分包含與一個div定義類。活動部分默認情況下將成為第一個部分,這是作為主頁。 1 2 3 4 5 6 | <div id="pagepiling">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
|
初始化 所有您需要做的是調(diào)用插件在$(document).ready function: 1 2 3 | $(document).ready(function() {
$('#pagepiling').pagepiling();
});
|
一個更復(fù)雜的初始化所有選項設(shè)置可以看起來像這樣: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $(document).ready(function() {
$('#pagepiling').pagePiling({
menu: null,
verticalCentered: true,
sectionsColor: [],
anchors: [],
scrollingSpeed: 700,
easing: 'swing',
loopBottom: false,
loopTop: false,
css3: true,
navigation: {
'textColor': '#000',
'bulletsColor': '#000',
'position': 'right',
'tooltips': ['section1', 'section2', 'section3', 'section4']
},
normalScrollElements: null,
normalScrollElementTouchThreshold: 5,
touchSensitivity: 5,
keyboardScrolling: true,
sectionSelector: '.section',
animateAnchor: false,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
});
});
|
接到部分 為了創(chuàng)建鏈接到特定的部分,您可以使用一個正常的如果您使用的是pagePiling URL鏈接。js和錨的鏈接(使用錨的選擇),然后你將能夠使用錨的鏈接也直接導(dǎo)航到特定的部分。例如:http://www./pagePiling/#page2 小心!data-anchor標(biāo)簽不能有相同的值作為任何ID元素在網(wǎng)站上(或者名稱元素IE)。 使用一個菜單 菜單鏈接的活躍部分您將不得不使用菜單選項和利用錨的鏈接(#)選項部分如下解釋。
選項 verticalcenter:(默認正確)垂直中心內(nèi)的內(nèi)容部分。 scrollingSpeed:700(默認)滾動轉(zhuǎn)換速度以毫秒為單位。 sectionsColor:(默認沒有)為每個部分:定義CSS背景顏色屬性的例子: 1 2 3 | $('#pagepiling').pagePiling({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
|
|
