菜鸟笔记

Menu

jPages – 一个超酷的jQuery分页插件

有时候在网站开发中会遇到一些在逻辑外的需求,比如说在一个单网页里,图片太多,可能分页显示会友好一点。第一想法就是先Google一下,找找解决方案。于是,Jpages插件的出现让我喜出望外。
Jpages是一个基于JQuery框架的客户端(PS:一般我们都是在服务器端分页)分页插件,使用方法之非常简单,自带很多超酷的特效和功能,还有非常丰富的自定义参数!

功能特性

使用方法

把下面这段代码放到标签前面
<link rel="stylesheet" href="css/jPages.css"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="js/jPages.js"></script>
如果你想使用Animate动画,你还需要添加文件:
<link rel="stylesheet" href="css/animate.css">
下面是HTML演示代码,容器除了UL之外也可是其他结构相同的标签,holder是分页,它会自动生成HTML代码。你只要给它一个位置就可以了。
<!-- Future navigation panel --><div class="holder"></div><!-- Item container (doesn't need to be an UL) --><ul id="itemContainer"><!-- Items --><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>...</ul>

初始Jpages化插件
$(function(){  $("div.holder").jPages({    containerID : "itemContainer"  });});

更多自定义参数

来源:分享一个jQuery的超酷分页插件 - jPages

— 于 共写了1086个字
— 文内使用到的标签:

10条回应:“jPages – 一个超酷的jQuery分页插件”

  1. tiandi说道:

    能不能再抖一点。。。

  2. 阿和说道:

    唉,果然看到代码就头疼。。。

  3. 子瑜说道:

    好东西,收藏了

  4. 渣浆泵说道:

    能不能再抖一点 再抖一点

  5. 鸳鸯说道:

    如果是一个选项卡,每个选项里还包含自己独立的分页,为什么写出来只有第一个实现了分页的功能呢;;

    • tau说道:

      你说的情况比较特殊吧,可能要动态加载下分页,例如切换选项卡的时候去初始化下分页。

发表评论

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