两个bootstrap插件bootstrap-select和bootstrap-paginator
基于bootstrap的选择器 http://silviomoreto.github.io/bootstrap-select/
<label for="androids" class="control-label" style="text-align: center">Android: </label>
<select name="androids" id="androids" class="selectpicker" multiple title='All'>
<c:forEach var="android" items="${androids}">
<option value="${android}">${android}</option>
</c:forEach>
</select>
使用 class="selectpicker" 设置选择器。
基于bootstrap的分页插件,支持bootstrap2和bootstrap3 https://github.com/lyonlai/bootstrap-paginator
使用示例如下:
var options = {
totalPages: ${totalPages},
currentPage: ${currentPage},
numberOfPages: 5,
bootstrapMajorVersion: 3,
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "First";
case "prev":
return "Previous";
case "next":
return "Next";
case "last":
return "Last";
case "page":
return page;
}
},
onPageClicked: function (e, originalEvent, type, page) {
var url = 'devices-filter-' + page + '.html';
if ($("#devices").find("option:selected").text() == 'All' &&
$("#androids").find("option:selected").text() == 'All' &&
$("#boards").find("option:selected").text() == 'All')
url = 'devices-page-' + page + '.html';
var data = $("#device_filter").serialize();
go(url, data);
}
};
$('#pagination').bootstrapPaginator(options);
在页面中使用bootstrap的分页组件:bootstrap3使用ul,bootstrap2使用div
<div class="text-center">
<ul class="pagination" id="pagination"></ul>
</div>
两个bootstrap插件bootstrap-select和bootstrap-paginator的更多相关文章
- select option 下拉多选单选bootstrap插件使用总结2
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- bootstrap插件学习-bootstrap.popover.js
先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...
- [置顶] 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- 瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox! 前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简 ...
- BootStrap插件
站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- Bootstrap插件概述
前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...
- js插件---bootstrap插件daterangepicker是什么
js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...
随机推荐
- Android(java)学习笔记221:开发一个多界面的应用程序之不同界面间互相传递数据(短信助手案例)
1.首先我们看看下面这个需求: 这里我们在A界面上,点击这个按钮"选择要发送的短信",开启B界面上获取网络上各种短信祝福语,然后B界面会把这些网络祝福语短信发送给A界面到" ...
- Linux基础系列—Linux体系结构和Linux内核结构
/** ****************************************************************************** * @author 暴走的小 ...
- Codeforces Round #291 (Div. 2) C - Watto and Mechanism 字符串
[题意]给n个字符串组成的集合,然后有m个询问(0 ≤ n ≤ 3·105, 0 ≤ m ≤ 3·105) ,每个询问都给出一个字符串s,问集合中是否存在一个字符串t,使得s和t长度相同,并且仅有一个 ...
- 【开源java游戏框架libgdx专题】-02-Eclipse Gradle 环境安装
创建eclipse开发环境 Eclipse 4.5 Help -> install newsoftware 填上下载地址(Eclipse 4.5及以上版本): http://dist.sprin ...
- Mac下Sublime快捷键
由于自己笔记本是mac,造成window与mac中sublime快捷键不同,现在稍微整理下常用的方便于记忆: 1.control+alt+enter 打开Emmet(Zencoding) 2.supe ...
- Ext Sencha Cmd 6 环境安装
Sencha Cmd安装笔记 在使用前端框架ExtJs前,需对其环境加以部署,对自己的安装过程加以记录. 建议大家在安装时,最好使用VPN,个中缘由,生在跳槽的程序袁应该都懂吧.不然ruby相关命令执 ...
- QFormLayout
这个是官方的文档,现在还没有翻译,有时间自己会把这个好好的翻译一下. QFormLayout类是用来管理表格的输入部件以及和它们相关联的标签. 也就是说QFormLayout这个布局一般情况下是用来在 ...
- NetBeans无法使用编码GBK安全地打开该文件 解决方法
正常安装的NetBeans在打开UTF-8编码的文件时,会提示“NetBeans无法使用编码GBK安全地打开该文件”,点击“是”强制打开后,中文会变成乱码. 上述问题可以通过如下方式解决: 用文本编辑 ...
- 初涉JavaScript模式 (4) : 构造函数
什么是构造函数? 构造函数 是一种特殊的方法 主要用来在创建对象时初始化对象 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中 特别的一个类可以有多个构造函数 可根据其参数个数的不 ...
- JS冒泡事件与处理
JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被 ...