当前位置:主页 > JavsScript库 > 其它 >

纯javascript的通用内容分页系统 - purePajinate
栏目分类:其它   发布日期:2021-08-26   浏览次数:

purePajinate 是一个原生 JavaScript 库,可以轻松为卡片、图像、列表等长块元素生成分页控件。

如何使用它:

1. 在您的 HTML 文档中加载 purePajinate 的 JavaScript。

<script src="js/purePajinate.es5.min.js"></script>


2. 将一组元素与分页容器一起插入到您的页面中。

<div class="example">
  <div class="items">
    <div class="item item1">
      <div class="title">Slide 1</div>
    </div>
    <div class="item item2">
      <div class="title">Slide 2</div>
    </div>
    <div class="item item3">
      <div class="title">Slide 3</div>
    </div>
    <div class="item item4">
      <div class="title">Slide 4</div>
    </div>
    <div class="item item5">
      <div class="title">Slide 5</div>
    </div>
    <div class="item item6">
      <div class="title">Slide 6</div>
    </div>
  </div>
  <div class="page_navigation"></div>
</div>

3. 在父容器上初始化分页库,确定每页有多少项(默认:10)。

var myPagination = new purePajinate({
    itemsPerPage: 5
});

4. 将您自己的 CSS 样式应用于分页控件。

.page_navigation { 
  /* 样式内容 */
}
        
.page_navigation ul { 
  /* 样式内容 */
}
        
.page_navigation li { 
  /* 样式内容 */
}
        
.page_navigation li.active_page { 
  /* 样式内容 */
}

5. 确定当您单击最后一页的“下一步”按钮时是否导航到第一页。默认值:false

new purePajinate({
    wrapAround: true
});

6. 指定要显示的分页链接数。默认值:10。

new purePajinate({
    pageLinksToDisplay: 5
});

7. 设置页面加载的初始页面。默认值:0(第 1 页)。

new purePajinate({
    startPage: 1
});

8.确定是否在小设备上隐藏分页。默认值:false。

new purePajinate({
    hideOnSmall: true
});

9. 使用以下选项自定义分页控件。

new purePajinate({
    navLabelFirst: 'First',
    navLabelPrev: 'Prev',
    navLabelNext: 'Next',
    navLabelLast: 'Last',
    navOrder: ["first", "prev", "num", "next", "last"],
    showFirstLast: false,
    showPrevNext: true
});

10. 默认选择器和类。

new purePajinate({
    containerSelector: '.items',
    itemSelector: '.item',
    navigationSelector: '.page_navigation',
    defaultClass: '',
    activeClass: "active",
    disabledClass: "disabled"
});

11.回调函数。

new purePajinate({
    onInit: function onInit() { },
    onPageDisplayed: function onPageDisplayed() { }
});


选项

选项 类型 描述
containerSelector String 默认值:'.items'。
项目的容器选择器。
itemSelector String 默认值:'.item'。
单个项目的选择器。
navigationSelector String 默认值:'.page_navigation'。
分页容器选择器。
itemsPerPage integer 默认值:10。
一次显示的项目数。
pageLinksToDisplay integer 默认值:10。
一次显示的页面链接数。所有其他页面将被隐藏并替换为...
startPage integer 默认值:0。
要显示的第一页。要显示第 3 页,该值为 2
wrapAround 布尔值 默认值:false。
确定页面是否应该循环。
navLabelFirst String 默认值:'First'。
第一个控件的标签。
navLabelPrev String 默认值:'Prev'。
上一个控件的标签。
navLabelNext String 默认值:'Next'。
下一个控件的标签。
navLabelLast String 默认值:'Last'。
最后一个控件的标签。
navAriaLabelFirst String 默认值:'First'。
第一个控件的咏叹调标签。
navAriaLabelPrev String 默认值:'Prev'。
前一个控件的咏叹调标签。
navAriaLabelNext String 默认值:'Next'。
下一个控件的咏叹调标签。
navAriaLabelLast String 默认值:'Last'。
最后一个控件的咏叹调标签。
navOrder Array 默认值:["first", "prev", "num", "next", "last"]。
控件的顺序。'num' 代表页面链接。
showFirstLast Boolean 默认值:false。
确定是否显示第一个和最后一个控件。
showPrevNext Boolean 默认值:true。
确定是否显示上一个和下一个控件。
hideOnSmall Boolean 默认值:false。
确定当项目数小于每页项目数时是否显示分页。
defaultClass String 默认值:''。
应用于所有控制元素的类。
activeClass String 默认值:'active'。
应用于活动页面链接的类。
disabledClass String 默认值:'disabled'。
应用于禁用控件的类。
onInit Function 默认值:假。
在初始化时运行的回调。
onPageDisplayed Function 默认值:假。
显示页面后运行的回调。


官方网站:https://github.com/obuisard/purePajinate

相关热词: purePajinate内容分页

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库