`
CL315917525
  • 浏览: 232123 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Jquery FlexBox 分页工具栏改造

阅读更多



        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 函数中去修改

  • 大小: 13.4 KB
分享到:
评论

相关推荐

    李炎恢jQuery EasyUI视频教程

    - **案例2:商品列表页**:运用表格组件展示商品信息,并通过工具栏实现筛选和排序功能。 - **案例3:个人中心页面**:采用选项卡组件来组织个人信息编辑、订单管理等功能模块。 #### 七、常见问题与解决方案 - **...

    红色瀑布流图片站模板是一款适合图片展示类网站的CSS单页模板 .rar

    3. 分页:对于大量图片,分页设计是必要的,让用户能够方便地浏览更多内容。 4. 响应式设计:确保在手机、平板和桌面电脑等不同设备上都能有良好的用户体验。 5. 元素交互:如悬停效果、滚动加载等,增强用户与网站...

    web玛莎拉蒂网站案例.zip

    在这个案例中,设计者可能采用了媒体查询、Flexbox或Grid布局来实现自适应屏幕尺寸的变化,确保元素能够根据屏幕大小调整其排列和样式。 2. **轮播图**:轮播图是一种常见的网页组件,用于展示多张图片或内容。通常...

    网页设计期末大作业基于HTML+CSS+JS实现仿CSDN官网项目源代码

    CSS3引入了许多新特性,如选择器、过渡效果、动画、Flexbox布局模型和Grid布局,这些都可以用来实现CSDN官网复杂的样式设计,如导航栏的下拉菜单、响应式布局以适应不同设备的屏幕尺寸。 接着,JavaScript是一种...

    bootstrap小例子

    4. **导航**:Bootstrap提供了多种导航组件,如导航栏(Navbar)、面包屑(Breadcrumbs)、页签(Tabs)和分页(Pagination),它们都有预设的样式和行为,可以快速构建导航结构。 5. **表单**:Bootstrap的表单...

    bootstrap入门练习实例

    随着Flexbox的引入,Bootstrap4引入了新的响应式工具类,如`.d-*`,使得布局更加灵活。 4. **组件**:Bootstrap包含多种预定义的UI组件,如导航栏(navbar)、按钮(button)、表单(form)、下拉菜单(dropdown)...

    网上书城前端页面模板.zip

    3. **JavaScript与jQuery**: 模板中可能使用了jQuery库,这是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画效果。JavaScript也用于实现页面动态交互,如商品筛选、添加购物车、显示/隐藏模块等。 4. ...

    仿京东页面代码,有点小问题

    在模仿京东页面的样式时,我们可能需要用到浮动布局、网格系统(如Flexbox或Grid)、定位(positioning)等技术。例如,为了实现商品的网格展示,可以利用CSS Grid的`grid-template-columns`和`grid-template-rows`...

    亚马逊主页

    - **JavaScript库**:如jQuery或Lodash,简化DOM操作和提供实用的工具函数。 此外,开发者还需要关注性能优化,如延迟加载、代码分割、缓存策略等。同时,遵循Web标准,确保网站的可访问性和可用性。在实际开发过程...

    sumit-bootstrap-boilerplate:具有大量插件集成功能的Bootstrap Boilerplate

    这个模板包含了大量插件和工具,使得开发工作更加高效。 首先,我们要了解**Bootstrap**,它是目前最流行且开源的前端框架之一。Bootstrap提供了一套完整的CSS样式和JavaScript组件,包括网格系统、表单、按钮、...

    Ample BootBootstrap4后台管理html静态模板

    plugins文件夹包含了模板所依赖的各种插件,例如Chart.js用于数据可视化,SweetAlert2用于优雅的提示对话框,Datatables用于表格的分页和排序,以及Glyphicons和Font Awesome等图标库,丰富了界面的视觉元素。...

    HTML-游戏大厅网游官网游戏专题模板

    4. 布局管理:使用Flexbox或Grid布局,使内容更有序、灵活地分布。 三、JavaScript 交互 JavaScript 是一种客户端脚本语言,负责处理网页的动态交互。在游戏专题模板中,JavaScript常用于: 1. 表单验证:确保用户...

    深入理解Bootstrap

    - **4.3.2 按钮工具栏**:解释如何创建按钮工具栏。 - **4.3.3 按钮尺寸设置**:介绍如何调整按钮组的尺寸。 - **4.3.4 嵌套分组**:解释如何在按钮组内部嵌套其他元素。 - **4.3.5 垂直分组**:介绍如何创建垂直...

    TecBlog-Site:技术模型

    此外,流式布局(flexbox或grid)也是实现响应式设计的重要工具。 六、JavaScript交互 为了提升用户体验,"TecBlog-Site"可能使用JavaScript进行动态交互。例如,通过JavaScript可以实现导航菜单的展开和折叠,...

Global site tag (gtag.js) - Google Analytics