弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 4254|回复: 1

Pagination.CSS示范脚本

[复制链接]
发表于 2015-6-23 19:17:06 | 显示全部楼层 |阅读模式
示范说明:翻页内容居中对齐,背景灰色
.Pagination{ display:block; clear:both; text-align:center; padding:5px; background:#eee; margin:0 14px;}

.Pagination{ display:block; clear:both; text-align:center; padding:10px 0; background:#f8f8f8; margin:20px 0;}

改良后系统
CSS:
.pager{ margin-top:30px; background:#f8f8f8; text-align: center;}
.pager cur{ color:#f00; font-size: larger;}
.pager span{ margin:0 3px;}
.pager a{ margin:0 3px;}
.pager input{ width:auto; margin: 5px; padding:2px 15px;}
.pager input[name=jump]{ width:30px; padding:2px; text-align: center;}

JS:
var dir = "";
var qs = "";
$(function(){
    if($(".pager").length>0){
        $(".pager a").click(function () {
            if ($(this).attr("page") < $("cur").attr("rel")) { dir = "prev"; }
            $.send("",$.extend({ dir: dir,page: $(this).attr("page") },qs))
        })
        $("input[name=skip]").click(function () {
            if ($("input[name=jump]").val() < $("cur").attr("rel")) { dir = "prev"; }
            if ($("input[name=jump]").val() == $("cur").attr("rel")) { dir = $(this).attr("dir"); }
            $.send("",$.extend({ dir: dir,page: $("input[name=jump]").val() },qs));
        })
    }
})
$.extend({
        send: function (url,args) {
                var body = $(document.body),
                        form = $("<form method='post'></form>"),
                        input;
                form.attr({ "action": url });
                $.each(args,function (key,value) {
                        input = $("<input type='hidden'>");
                        input.attr({ "name": key });
                        input.val(value);
                        form.append(input);
                });

                form.appendTo(document.body);
                form.submit();
                document.body.removeChild(form[0]);
        }
});
回复

使用道具 举报

 楼主| 发表于 2017-11-14 23:09:16 | 显示全部楼层

进一步优化效果

.Pagination{ display:block; clear:both; text-align:center; padding:10px 0; background:#f8f8f8; margin:20px 0;}
.Pagination a{ padding:0 2px;}
.Pagination #page{ text-align:center; line-height:1em;}
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-11-27 14:41 , Processed in 0.055323 second(s), 19 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表