jquery分页插件jpages参数说明-jpages使用笔记

jquery分页插件jpages参数说明-jpages使用笔记一:jpages使用方法:1:引入必须文件<linkrel=”stylesheet”href=”jPages.css”><scripttype=”text/javascript”src=”jPages.js”></script>如果你想使用Animate.css动画你还需要添加的文件:<linkrel=”styleshee…

一:jpages使用方法:

1:引入必须文件

<link rel="stylesheet" href="jPages.css">
<script type="text/javascript" src="jPages.js"></script>

如果你想使用Animate.css动画你还需要添加的文件:

<link rel="stylesheet" href="animate.css">

 老蔡注:在使用新版的owl-carousel插件时,当我在item里面使用CSS六边形并且加了animated动画的情况下,有时候会出现失败的效果。Jpages提供了一个参数可以控制是否开启animate动画,考虑的比较周全。

2:HTML代码

//项目列表
<ul id="itemContainer">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
//当然也可以是
<dl id="dlitemBox">
    <dd>....</dd>
    <dd>....</dd>
    <dd>....</dd>
    <dd>....</dd>
</dl>

//下面放置分页容器
<div class="holder"></div>

3:初始化插件

$(function(){
  $("div.holder").jPages({
    containerID : "itemContainer"
  });
});

 

 二:jpages参数说明

containerID: "",    //项目容器ID
first: false,    //首页的自定义文字,如不需要则设置为false
previous: "上一页",    //上一页的自定义文字,如不需要则设置为false
next: "next →",    //下一页的自定义文字,如不需要则设置为false
last: false,    //末页的自定义文字,如不需要则设置为false
links: "numeric", // blank || title    //显示数字
startPage: 1,    //应用插件时,您希望首先显示的页面。
perPage: 10,    //每页显示的项目数。
midRange: 5,    //中间页面数量,最好为奇数这样可以两边对称
startRange: 1,    //页面链接的数量总是在导航的起点可见。例如,如果将startRange设置为3,则无论当前页面是什么,页面链接1,2和3将始终可见。
endRange: 1,    //网页链接总数在nav的结尾处可见。
keyBrowse: false,    //键盘左右键控制切换页面
scrollBrowse: false,    //滚轮左右键控制切换页面
pause: 0,    //开启自动翻页切换间隔时间
clickStop: false,    //点击是否停止自动切换
delay: 50,   //每个单独页面之间显示的时间的间隔
direction: "forward", // backwards || auto || random ||    //设置了delay后,可以使用该参数控制他么延迟显示出来的方向
animation: "", //动画名称
fallback: 400,    //如果你没有在参数“animation”中设置CSS3动画,jPages会回退到jQuery fadeIn效果。您可以在此参数中计算淡入速度。你可以使用毫秒或字符串'fast','slow'和'normal'。
minHeight: true, //设置容器最小高度
callback: undefined // 回调函数

Tips: 第一次用的时候没有关闭鼠标滚动事件,然后浏览器页面滚动到这个容器的时候就无法再用鼠标滚动页面了。被客户挑刺,郁闷了好久。

 

 

今天的文章jquery分页插件jpages参数说明-jpages使用笔记分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/11226.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注