Bootstrap和Java分页实例第一篇

关于此文

  bootstrap是前端很流行的框架,正在开发的项目,用bootstrap搭建起来的页面,自我感觉很完美,终于告别了苍白无力的白花花的难看的……的页面了。哈哈。

现在遇到了bootstrap的分页与Java后台结合起来的分页封装问题,对于我这个Java菜鸟来说,包装分页还没玩过。故此,在网上找了这个。觉得很不错,所以决定记录到博客里面。

还没有实践,决定写完博客去实践。在上图。祝我成功吧!

此人的博客没找到,代码中有email地址。

pagination

定义了分页常用的属性,方法

package com.app.pagination;
import java.util.List;
/**
 * 通用分页接口
 * @author: super.wwz@hotmail.com
 * @ClassName: Pagination
 * @Version: v0.1
 * @param <T>
 */
public interface Pagination<T> {
 /**
 * 判断是否是首页
 * @return
 */
 boolean isFirst();
 /**
 * 判断是否是尾页
 * @return
 */
 boolean isLast();
 /**
 * 判断是否有上一页
 * @return
 */
 boolean isPrevious();
 /**
 * 判断是否有下一页
 * @return
 */
 boolean isNext();

 /**
 * 获取上一页的页码
 * @return
 */
 int getPreviousIndex();
 /**
 * 获取下一页的页码
 * @return
 */
 int getNextIndex();
 /**
 * 获取当前页码
 * @return
 */
 int getPageIndex();
 /**
 * 获取当前页大小
 * @return
 */
 int getPageSize();
 /**
 * 获取总页数
 * @return
 */
 int getTotalPages();
 /**
 * 获取数据总行数
 * @return
 */
 int getTotalElements();

 /**
 * 获取当前页的数据
 * @return
 */
 List<T> getCurrData();

 /**
 * 获取数字分页链接对象
 * @return
 */
 BetweenIndex getBetweenIndex();

 /**
 * 获取每页显示的分页链接数
 * @return
 */
 int getPageLinkNumber();

 /**
 * 设置每页的分页链接数量
 * @param pageLinkNumber
 */
 void setPageLinkNumber(int pageLinkNumber);
}

BetweenIndex

该接口负责获取分页链接的开始和结尾索引

package com.app.pagination;
/**
 * 开始链接-结束链接
 * @author: super.wwz@hotmail.com
 * @ClassName: BetweenIndex
 * @Version: v0.1
 */
public interface BetweenIndex {
 /**
 * 获取开始分页链接索引
 * @return
 */
 int getBeginIndex();
 /**
 * 获取结束分页链接索引
 * @return
 */
 int getEndIndex();
}

DefaultPagination

Pagination接口的默认实现类

package com.app.pagination.impl;
import java.util.List;
import com.app.pagination.BetweenIndex;
import com.app.pagination.Pagination;
/**
 * Pagination接口默认实现
 * @author: super.wwz@hotmail.com
 * @ClassName: DefaultPagination
 * @Version: v0.1
 * @param <T>
 */
public class DefaultPagination<T> implements Pagination<T> {
 private int totalElements;
 private int pageSize;
 private int totalPages;
 private int pageIndex;
 private QueryHandler<T> queryHandler;
 private List<T> currData;
 private int pageLinkNumber;
 public DefaultPagination(int pageIndex, int pageSize, QueryHandler<T> queryHandler, int pageLinkNumber) {
 this(pageIndex, pageSize, queryHandler);
 setPageLinkNumber(pageLinkNumber);
 }
 public DefaultPagination(int pageIndex, int pageSize, QueryHandler<T> queryHandler){
 //初始化数据访问回调接口
 this.queryHandler = queryHandler;
 //查询总行数
 setTotalElements();
 //修正页大小
 setPageSize(pageSize);
 //计算总页数:
 setTotalPages();
 //修正页码
 setPageIndex(pageIndex);
 //查询当前页数据
 setCurrData();
 }
 private void setCurrData() {
 // TODO Auto-generated method stub
 this.currData = queryHandler.getCurrData(pageIndex, pageSize);
 }
 private void setPageIndex(int pageIndex) {
 // TODO Auto-generated method stub
 if(pageIndex < 1) {
 this.pageIndex = 1;
 } else if(pageIndex > totalPages) {
 this.pageIndex = totalPages;
 } else {
 this.pageIndex = pageIndex;
 }
 }
 private void setTotalPages() {
 // TODO Auto-generated method stub
 if(pageSize > 0) {
 /*//普通算法:
 this.totalPages = totalElements % pageSize == 0 ?
  totalElements / pageSize : (totalElements / pageSize) + 1;*/
 //减一公式:
 this.totalPages = (totalElements + pageSize - 1) / pageSize;
 }
 }
 private void setPageSize(int pageSize) {
 // TODO Auto-generated method stub
 if(pageSize < 1) {
 this.pageSize = 1;
 } else if(pageSize > totalElements) {
 this.pageSize = totalElements;
 } else {
 this.pageSize = pageSize;
 }
 }
 private void setTotalElements() {
 // TODO Auto-generated method stub
 this.totalElements = queryHandler.getTotalElements();
 }
 @Override
 public boolean isFirst() {
 // TODO Auto-generated method stub
 return pageIndex == 1;
 }
 @Override
 public boolean isLast() {
 // TODO Auto-generated method stub
 return pageIndex == totalPages;
 }
 @Override
 public boolean isPrevious() {
 // TODO Auto-generated method stub
 return pageIndex > 1;
 }
 @Override
 public boolean isNext() {
 // TODO Auto-generated method stub
 return pageIndex < totalPages;
 }
 @Override
 public int getPreviousIndex() {
 // TODO Auto-generated method stub
 return isPrevious() ? pageIndex - 1 : 1;
 }
 @Override
 public int getNextIndex() {
 // TODO Auto-generated method stub
 return isNext() ? pageIndex + 1 : totalPages;
 }
 @Override
 public int getPageIndex() {
 // TODO Auto-generated method stub
 return pageIndex;
 }
 @Override
 public int getPageSize() {
 // TODO Auto-generated method stub
 return pageSize;
 }
 @Override
 public int getTotalPages() {
 // TODO Auto-generated method stub
 return totalPages;
 }
 @Override
 public int getTotalElements() {
 // TODO Auto-generated method stub
 return totalElements;
 }
 @Override
 public List<T> getCurrData() {
 // TODO Auto-generated method stub
 return currData;
 }
 @Override
 public BetweenIndex getBetweenIndex() {
 // TODO Auto-generated method stub
 return new BetweenIndex() {
 private int beginIndex;
 private int endIndex;
 {
 boolean isOdd = pageLinkNumber % 2 == 0;
 int val = pageLinkNumber / 2;
 beginIndex = pageIndex - (isOdd ? val - 1: val);
 endIndex = pageIndex + val;
 if(beginIndex < 1) {
  beginIndex = 1;
  endIndex = pageLinkNumber;
 }
 if(endIndex > totalPages) {
  endIndex = totalPages;
  beginIndex = endIndex - pageLinkNumber + 1;
 }
 }
 @Override
 public int getEndIndex() {
 // TODO Auto-generated method stub
 return endIndex;
 }
 @Override
 public int getBeginIndex() {
 // TODO Auto-generated method stub
 return beginIndex;
 }
 };
 }
 @Override
 public int getPageLinkNumber() {
 // TODO Auto-generated method stub
 return pageLinkNumber;
 }
 @Override
 public void setPageLinkNumber(int pageLinkNumber) {
 // TODO Auto-generated method stub
 if (pageLinkNumber < 0) {
 this.pageLinkNumber = 0;
 } else if (pageLinkNumber > totalPages) {
 this.pageLinkNumber = totalPages;
 } else {
 this.pageLinkNumber = pageLinkNumber;
 }
 }
}
 

QueryHandler

用于DefaultPagination实现类的查询回调接口

package com.app.pagination.impl;
import java.util.List;
/**
 * 分页查询回调接口
 * @author: super.wwz@hotmail.com
 * @ClassName: QueryHandler
 * @Version: v0.1
 * @param <T>
 */
public interface QueryHandler<T> {
 /**
 * 获取数据总行数
 * @return
 */
 int getTotalElements();

 /**
 * 获取当前页的数据
 * @param pageIndex
 * @param pageSize
 * @return
 */
 List<T> getCurrData(int pageIndex, int pageSize);
}

BookDaoImpl

BookDao的实现类(BookDao接口已经省略)

package com.app.dao.impl;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import com.app.bean.Book;
import com.app.dao.BaseDao;
import com.app.dao.BookDao;
public class BookDaoImpl extends BaseDao implements BookDao {
 @Override
 public int count() {
 // 查询数据总行数
 String sql = "select count(1) from t_book";
 try {
 return getQueryRunner().query(sql, new ScalarHandler<Integer>());
 } catch (SQLException e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 }
 return 0;
 }
 @Override
 public List<Book> getBooks(int pageIndex, int pageSize) {
 // 关于SQLServer的查询分页sql
 StringBuffer sql = new StringBuffer();
 sql.append("select * from (");
 sql.append(" select row_number() over(order by(id)) new_id,* from t_book");
 sql.append(") t where new_id between ? and ?");
 try {
 return getQueryRunner().query(sql.toString(),
  new BeanListHandler<Book>(Book.class),
  pageSize * (pageIndex - 1) + 1,pageSize * pageIndex);
 } catch (SQLException e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 }
 return null;
 }
}

BookServiceImpl

BookService业务逻辑接口的实现类 (BookService已经省略)

package com.app.service.impl;
import java.util.List;
import com.app.bean.Book;
import com.app.dao.BookDao;
import com.app.dao.impl.BookDaoImpl;
import com.app.pagination.Pagination;
import com.app.pagination.impl.DefaultPagination;
import com.app.pagination.impl.QueryHandler;
import com.app.service.BookService;
/**
 * 业务逻辑层查询分页数据示例
 * @author: super.wwz@hotmail.com
 * @ClassName: BookServiceImpl
 * @Version: v0.1
 */
public class BookServiceImpl implements BookService {
 private BookDao bookDao = new BookDaoImpl();
 @Override
 public Pagination<Book> getBookList(int pageIndex, int pageSize,int pageLinkNumber) {
 // TODO Auto-generated method stub
 return new DefaultPagination<Book>(pageIndex, pageSize, new QueryHandler<Book>() {
 @Override
 public int getTotalElements() {
 // TODO Auto-generated method stub
 return bookDao.count();
 }
 @Override
 public List<Book> getCurrData(int pageIndex, int pageSize) {
 // TODO Auto-generated method stub
 return bookDao.getBooks(pageIndex, pageSize);
 }
 },pageLinkNumber);
 }
}

BookAction

有关图书的Servlet控制器

package com.app.web.action;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.app.bean.Book;
import com.app.pagination.Pagination;
import com.app.service.BookService;
import com.app.service.impl.BookServiceImpl;
public class BookAction extends HttpServlet {
 private static final long serialVersionUID = 5275929408058702210L;
 private BookService bookService = new BookServiceImpl();
 @Override
 protected void service(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 request.setCharacterEncoding("UTF-8");
 response.setCharacterEncoding("UTF-8");
 int pageIndex = 1;
 int pageSize = 10;
 try {
 pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
 pageSize = Integer.parseInt(request.getParameter("pageSize"));
 } catch (NumberFormatException e) {
 e.printStackTrace();
 }
 //6: 显示的分页链接个数
 Pagination<Book> bookPagination = bookService.getBookList(pageIndex, pageSize,6);
 request.setAttribute("bookPagination", bookPagination);
 request.getRequestDispatcher("index.jsp").forward(request, response);
 }
}

Jsp

index.jsp
将Pagiation应用到bootstrap上的简单示例bootstrap版本: 3.3.5

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:if test="${requestScope.bookPagination == null }">
 <c:redirect url="bookAction?pageIndex=1&pageSize=4"></c:redirect>
</c:if>
<!DOCTYPE html">
<html>
 <head>
 <title>图书信息列表</title>
 <!-- Bootstrap v3.3.5 -->
<link href="${pageContext.request.contextPath}/bootstrap-3.3.5-dist/css/bootstrap.min.css"
 type="text/css" rel="stylesheet" charset="utf-8" />
<link id="bootstrapTheme"
 href="${pageContext.request.contextPath}/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css"
 type="text/css" rel="stylesheet" charset="utf-8" />
<script src="${pageContext.request.contextPath}/bootstrap-3.3.5-dist/js/jquery.min.js"
 type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/bootstrap-3.3.5-dist/js/bootstrap.min.js"
 type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="container">
 <h2 class="page-header">图书信息</h2>
 <table class="table table-striped table-bordered table-hover">
 <tr>
 <th>#</th>
 <th>图书名</th>
 <th>单价</th>
 </tr>
 <c:set var="bookPagination" value="${requestScope.bookPagination}"></c:set>
 <c:choose>
 <c:when test="${bookPagination.totalElements gt 0}">
  <c:forEach var="book" items="${bookPagination.currData}">
  <tr>
  <td>${book.id }</td>
  <td>${book.name }</td>
  <td>${book.price }</td>
  </tr>
  </c:forEach>
  <td colspan="3" align="center">
  <div class="btn-group" role="group">
  <c:if test="${bookPagination.first}" var="isFirst">
  <a class="btn btn-primary btn-sm" disabled="disabled" href="#">首页</a>
  <a class="btn btn-success btn-sm" disabled="disabled" href="#">上一页</a>
  </c:if>
  <c:if test="${not isFirst}">
  <a class="btn btn-primary btn-sm" href="${pageContext.request.contextPath}/bookAction?pageIndex=1&pageSize=${bookPagination.pageSize}">首页</a>
  <a class="btn btn-success btn-sm" href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.previousIndex }&pageSize=${bookPagination.pageSize}">上一页</a>
  </c:if>
  <c:if test="${bookPagination.last }" var="isLast">
  <a class="btn btn-success btn-sm" disabled="disabled" href="#">下一页</a>
  <a class="btn btn-primary btn-sm" disabled="disabled" href="#">尾页</a>
  </c:if>
  <c:if test="${not isLast}">
  <a class="btn btn-success btn-sm" href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.nextIndex }&pageSize=${bookPagination.pageSize}">下一页</a>
  <a class="btn btn-primary btn-sm" href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.totalPages }&pageSize=${bookPagination.pageSize}">尾页</a>
  </c:if>
  </div>
  </td>
 </c:when>
 <c:otherwise>
  <tr><td colspan="3">没有更多数据!</td></tr>
 </c:otherwise>
 </c:choose>
 </table>
 <center>
 <nav>
 <ul class="pagination">
 <c:if test="${isFirst }">
  <li class="disabled">
  <a href="#" aria-label="Previous">
  <span aria-hidden="true">»上一页</span>
  </a>
 </li>
 </c:if>
 <c:if test="${not isFirst }">
 <li>
  <a href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.previousIndex }&pageSize=${bookPagination.pageSize}" aria-label="Previous">
  <span aria-hidden="true">»上一页</span>
  </a>
 </li>
 </c:if>
 <c:if test="${bookPagination.pageLinkNumber gt 0}">
 <c:set var="betweenIndex" value="${bookPagination.betweenIndex}"></c:set>
 <c:forEach var="linkIndex" begin="${betweenIndex.beginIndex}" end="${betweenIndex.endIndex}">
  <c:if test="${linkIndex eq bookPagination.pageIndex}" var="isCurr">
  <li class="active"><a href="#">${linkIndex}</a></li>
  </c:if>
  <c:if test="${not isCurr}">
  <li><a href="${pageContext.request.contextPath}/bookAction?pageIndex=${linkIndex}&pageSize=${bookPagination.pageSize}" >${linkIndex}</a></li>
  </c:if>
 </c:forEach>
 </c:if>
 <c:if test="${isLast }">
  <li class="disabled">
  <a href="#" aria-label="Next">
  <span aria-hidden="true">下一页 »</span>
  </a>
 </li>
 </c:if>
 <c:if test="${not isLast }">
 <li>
  <a href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.nextIndex }&pageSize=${bookPagination.pageSize}" aria-label="Next">
  <span aria-hidden="true">下一页 »</span>
  </a>
 </li>
 </c:if>
 </ul>
 </nav>
 </center>
 </div>
 </body>
</html>

实例数据

说明:

  • 如果需要扩展分页功能, 请扩展Pagiation接口以及其余实现类;
  • 此外, 此分页不依赖任何数据库(重新实现QueryHandler查询回调接口即可), 可适用于任何web项目中;

使用List 集合模拟数据库的使用示例:

package com.app.service.impl;
import java.util.ArrayList;
import java.util.List;
import com.app.bean.Book;
import com.app.pagination.Pagination;
import com.app.pagination.impl.DefaultPagination;
import com.app.service.BookService;
/**
 * 使用List<T>集合模拟数据库
 * @author: super.wwz@hotmail.com
 * @ClassName: BookServiceImpl2
 * @Version: v0.1
 */
public class BookServiceImpl2 implements BookService {
// private BookDao bookDao = new BookDaoImpl();
 private static List<Book> list = new ArrayList<Book>();
 //初始化List<Book>数据
 static {
 list.add(new Book(1, "书名1", 18));
 list.add(new Book(2, "书名2", 13));
 list.add(new Book(3, "书名3", 18));
 list.add(new Book(4, "书名4", 38));
 list.add(new Book(5, "书名5", 18));
 list.add(new Book(6, "书名6", 58));
 list.add(new Book(7, "书名7", 12));
 list.add(new Book(8, "书名8", 11));
 list.add(new Book(9, "书名9", 13));
 list.add(new Book(10, "书名10", 22));
 list.add(new Book(11, "书名11", 19));
 list.add(new Book(12, "书名12", 13));
 list.add(new Book(13, "书名13", 19));
 list.add(new Book(14, "书名14", 32));
 }
 @Override
 public Pagination<Book> getBookList(int pageIndex, int pageSize, int pageLinkNumber) {
 return new DefaultPagination<Book>(pageIndex, pageSize, new QueryHandler<Book>() {
 @Override
 public int getTotalElements() {
  //return bookDao.count();
 return list.size();
 }
 @Override
 public List<Book> getCurrData(int pageIndex, int pageSize) {
  //return bookDao.list(pageIndex, pageSize);
 int fromIndex = (pageIndex - 1) * pageSize;
 int endIndex = fromIndex + pageSize;
 endIndex = endIndex > list.size() ? list.size() : endIndex;
 return list.subList(fromIndex, endIndex);
 }
 }, pageLinkNumber);
 }
}

下一篇更精彩!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 使用java基于pushlet和bootstrap实现的简单聊天室

    这是一个简单的不能再简单的聊天室,本代码包含以下功能 1.用户注册. 2.用户登录. 3.当然还可以聊天. DBUtil.java 复制代码 代码如下: package com.hongyuan.core;   import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statemen

  • 值得分享的bootstrap table实例

    bootstrap table 封装了一套完善的数据表格组件,把下面的代码复制一下估计你需要的基本功能都有了,没有的再看看手册对比着我给的实例也能很快的熟悉了. 客户端 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap-Table</title> <link rel="stylesheet" href

  • 值得分享的轻量级Bootstrap Table表格插件

    基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头.单/复选.排序.分页.搜索及自定义表头等功能,更好的提高开发效率和减少开发时间. 1.插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框.复选框.排序.分页等,插件下载. 2.特点: 基于Bootstrap 3开发(同时支持 Bootstrap 2) 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用AJAX获取JS

  • BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章使用bootstrap validator的remote验证代码经验分享(推荐) 一.准备工作 1.你的网站环境中要有 BootStrap,中文网地址:http://www.bootcss.com/ 2.下载BootStrap Validator相关材料,地址:http://bv.doc.javake.cn/ 当然,如果你不想一个

  • 基于Bootstrap的Java开发问题汇总(Spring MVC)

    第一次接触Bootstrap框架,特别生疏.但是在慢慢了解了之后会发现bootstrap是一个前端的技术框架.结合了JQuery从而实现了非常丰富.美观的界面效果.此次项目是基于Spring MVC模式下. 1.菜单 在Bootstrap中构建一个菜单是一件非常容易的事情.因为有专门的菜单管理,所以相比以前做过的菜单相对来说就轻松的多.只需要点开菜单管理,进行需求菜单的添加.如下图所示: 添加完菜单之后还不能显示,因为没有为菜单分配权限.接下来在角色权限管理里面为菜单进行授权.之后用授权过的账户

  • 值得分享的最全面Bootstrap快速人门案例

    今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更远,那么请勤劳一点,多看看代码,多多练习代码,如果你仔细研究代码,自己也可以写出一部分的css比较好的插件. 一.Bootstrap简介 详见官网: http://www.bootcss.com/ http://v3.bootcss.com/ 1.练习准备资源准备: 下载bootstrap资源: h

  • 值得分享和收藏的Bootstrap学习教程

    首先先感谢朋友们对小编的支持,关注小编的文章,和小编一起学习进步,一直的陪伴,小编也一定会再接再厉,为大家分享更多精彩的文章. 在分享的过程中遇到了一些问题,这也给了我很大的启发,大家在搜索相关文章时都没有针对此类问题进行的系统整理文章,这也是小编需要在今后进行改进的. 所以本文就吸取这个经验,针对Bootstrap教程进行系统整理,希望对大家的学习有所帮助,便于大家学习. 小编的水平能力都很有限,还望大牛多给一些建议和看法,帮助小编进行改正和提高,如果文中确有不妥之处,还请谅解.希望能和大家共

  • 值得分享的Bootstrap Table使用教程

    bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述. jquery ,bootstrap ,bootstrap-table 三者之间的关系.bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖j

  • Bootstrap和Java分页实例第二篇

    关于此文 运用第一篇分页的例子,结果以失败告终.在网上又寻找了很多例子.大多是都是这一种.着手开发的项目采用spring MVC框架.符合需求.摘下来,试了一试. 网上的例子总是少一些东西.经过一番折腾.终于搞定了.下面分享出来,供参考. 分页基本逻辑思想懂了,重点是在于怎么实现.怎么实现更好.还需要进一步思考. 配置xml-pager.tld <?xml version="1.0" encoding="UTF-8" ?> <taglib xmln

  • 值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. 一.效果展示 折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了. 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以Tab页的形式打开对应的页面 4.支持菜单折叠 5.打开的菜单过多时自动换行显示,折叠后自适应 二.代码示例 有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备.本文主要使用的它的菜单的效果,下面就来看看Ac

随机推荐