Jquery FlexBox 分页工具栏改造

最新推荐文章于 2024-09-18 14:45:42 发布

原创最新推荐文章于 2024-09-18 14:45:42 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #HTML #ViewUI

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何自定义FlexBox分页工具栏样式，包括替换默认图标为自定义图片、去除图标边框及调整分页信息提示等。通过修改源码中的参数和CSS，实现个性化的分页组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FlexBox 分页工具栏默认的分页栏是用> ，< html 代码表示的，并为之加上了边框，要改造成自己的分页工具栏需要修改源码的几个参数,先看看效果：

在源码js中找到这个函数：

 function outputPagingLinks(totalPages, currentPage, totalResults)

修改参数first,prev,next,last, 加入自己要引入的图片位置，jqueryAuto是你自己的项目名字比如：

var first = '<img src="/jqueryAuto/images/prev_top.gif" width="16" height="16"/>',
      prev = '<img src="/jqueryAuto/images/prev.gif" width="16" height="16"/>',
      next = '<img src="/jqueryAuto/images/next.gif" width="16" height="16"/>',
      last = '<img src="/jqueryAuto/images/prev_end.gif" width="16" height="16"/>',

若要想去掉图标边框得在你自己的页面加入一个CSS，并修改源码CSS文件

a img{
    	    border:none;
        }

在源码 CSS文件找到，注释边界框

.ffb .page, .ffb a.page {
	font-size:85%;
	padding:2px;
	border:solid 1px #339;
	background-color:#eef;
	margin-top:2px;
	display: inline-block;
}

分页信息栏提示修改，若自己没有提供summaryTemplate，那么就是会使用默认的分页信息提示栏，在源码的 $.fn.flexbox.defaults中可以修改请求方式，以及其它默认的分页CSS文件，若有去掉换行需要在源码注释掉451行代码

//$('<br/>').appendTo($paging);

在输入框输入自己的页数按回车键可以跳到指定页面，若页面不存在会弹出提示框，该提示框默认的是英文提示信息，用户可以自己修改提示信息，在源码314行 handleKeyPress 函数中去修改