jQuery翻页yunm.pager.js,涉及div局部刷新(2)

简介: jQuery翻页yunm.pager.js,涉及div局部刷新

四、翻页应用


封装了翻页组件后,我们来看看怎么使用。


<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<c:forEach items="${deal_page}" var="deal">
    ${deal.name}
</c:forEach>
<div class="turnPagePager" rel="${param.rel}" totalCount="${vo.totalCount}" numPerPage="${vo.numPerPage}"
        currentPage="${vo.pageNum}">


指定div的class为turnPagePager,页面load的时候我们将其转换为pager组件。

将其关键属性rel、totalCount、numPerPage、currentPage进行赋值。

页面load的时候进行转换:


$("div.turnPagePager", $p).each(function() {
    var $this = $(this);
    $this.pager({
        rel : $this.attr("rel"),
        totalCount : $this.attr("totalCount"),
        numPerPage : $this.attr("numPerPage"),
        currentPage : $this.attr("currentPage")
    });
});


五、分局两侧的翻页效果

在一的效果图中,你可以看到第二种效果图,就是翻页处于内容的两侧,这个也很常见,那么我们来看一下实现方法。

①、yunm.pager.js(新)

(function($) {
    $.fn.extend({
        pager : function(opts) {
            // 可参照bootstrap的翻页,为了获得前一页和后一页的按钮组件
            var setting = {
                prev$ : "li.previous",
                next$ : "li.next",
            };
            return this.each(function() {
                var $this = $(this);
                var pc = new Pager(opts);
                if (pc.type() == 'arrow') {
                    $this.html('<ul class="pager">' + '<li class="previous left"><a href="#"></a></li>' + '<li class="next right"><a href="#"></a></li>'
                            + '</ul>');
                } else {
                    // 参照bootstrap翻页
                    $this.html('<ul class="pager">' + '<li class="previous"><a href="#">&larr; 前一页</a></li>'
                            + '<li class="next"><a href="#">后一页 &rarr;</a></li>' + '</ul>');
                }
                var $prev = $this.find(setting.prev$);
                var $next = $this.find(setting.next$);
                if (pc.hasPrev()) {
                    // 如果有前一页,绑定前一页事件
                    _bindEvent($prev, pc.getCurrentPage() - 1, pc.rel());
                } else {
                    // 否则置灰
                    if (pc.type() == 'arrow') {
                        $prev.addClass("hide");
                    } else {
                        $prev.addClass("disabled");
                    }
                }
                if (pc.hasNext()) {
                    _bindEvent($next, pc.getCurrentPage() + 1, pc.rel());
                } else {
                    if (pc.type() == 'arrow') {
                        $next.addClass("hide");
                    } else
                        $next.addClass("disabled");
                }
            });
            // 绑定点击事件,主要传递第几页
            function _bindEvent($target, pageNum, rel) {
                $target.bind("click", {
                    pageNum : pageNum
                }, function(event) {
                    yunmPageBreak({
                        rel : rel,
                        data : {
                            pageNum : event.data.pageNum
                        }
                    });
                    event.preventDefault();
                });
            }
        },
    });
    // 翻页的必要参数
    var Pager = function(opts) {
        this.opts = $.extend({
            type : "",// 指定翻页的类型,目前支持两种样式
            rel : "", // 用于局部刷新div id号
            totalCount : 0,// 总数
            numPerPage : 10,// 默认显示10个
            currentPage : 1,// 当前页
            callback : function() {
                return false;
            }
        }, opts);
    };
    $.extend(Pager.prototype, {
        rel : function() {
            return this.opts.rel;
        },
        type : function() {
            return this.opts.type;
        },
        // 每页显示多少个
        numPages : function() {
            return Math.ceil(this.opts.totalCount / this.opts.numPerPage);
        },
        // 当前页
        getCurrentPage : function() {
            var currentPage = parseInt(this.opts.currentPage);
            if (isNaN(currentPage))
                return 1;
            return currentPage;
        },
        // 能否向前翻页
        hasPrev : function() {
            return this.getCurrentPage() > 1;
        },
        // 向后翻页
        hasNext : function() {
            return this.getCurrentPage() < this.numPages();
        }
    });
})(jQuery);


②、翻页应用(新)


<div class="col-md-12 arrow_page">

   <div class="turnPagePager" type="arrow" rel="${param.rel}" totalCount="${vo.totalCount}" numPerPage="${vo.numPerPage}"

       currentPage="${vo.pageNum}"></div>

</div>


外层的div上加上arrow_page式样。

里层的div加上type属性,指定为arrow。

页面加载时:


$("div.turnPagePager", $p).each(function() {
    var $this = $(this);
    YUNM.debug('div.turnPagePager' + $this.selector);
    $this.pager({
        rel : $this.attr("rel"),
        type : $this.attr("type"),// 设置type
        totalCount : $this.attr("totalCount"),
        numPerPage : $this.attr("numPerPage"),
        currentPage : $this.attr("currentPage")
    });
});


新增式样

.arrow_page {
    padding: 0;
    height: 0;
}
.pager .left>a,.pager .left>a:HOVER,.pager .right>a,.pager .right>a:HOVER {
    cursor: pointer;
    height: 70px;
    width: 30px;
    background: url(../../assets/images/bgs_2.png) no-repeat;
    display: block;
    border: none;
}
.pager .left>a:HOVER {
    background-position: 0 -70px;
}
.pager .right>a:HOVER {
    background-position: 0 -210px;
}
.pager .left>a {
    left: -30px;
    position: absolute;
    top: -240px;
}
.pager .right>a {
    background-position: 0 -140px;
    position: absolute;
    right: -30px;
    top: -240px;
}


相关文章
|
2月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
32 1
|
2月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
29 2
|
2月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
17 1
|
2月前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
2月前
|
存储 JavaScript 前端开发
关于Django使用Jquery异步刷新
使用Django与jQuery结合实现异步刷新功能,不仅可以提升用户体验,还能提高应用的性能。通过上述的步骤,你可以在自己的Django项目中实现类似的异步数据更新功能。这种技术的关键是理解AJAX的工作原理,以及如何在Django后端创建响应AJAX请求的视图。通过实践这些技巧,你将能够创建更为动态和交互式的Web应用。
22 2
|
4月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
4月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
4月前
|
缓存 JavaScript 前端开发
老程序员分享:js刷新页面得重新加载和页面的刷新
老程序员分享:js刷新页面得重新加载和页面的刷新
30 0
|
4月前
|
JavaScript 前端开发
js,jq,jquery删除css属性
js,jq,jquery删除css属性
30 0
|
4月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
31 0
下一篇
无影云桌面