多功能下拉分页选择插件 SelectPage

多功能下拉分页选择插件 SelectPage

MIT
跨平台
2017-06-13
TerryZ

多功能下拉选择插件 SelectPage

简洁而强大的下拉分页选择器;支持远程数据(AJAX)、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件

入门指南、实例、文档

更多实例、文档请访问:

项目GitHub地址:

https://github.com/TerryZ/SelectPage

插件效果

多选模式效果图:

默认单选模式效果图:

纯下拉选择(不分页)模式:

什么是SelectPage

功能特点

  • 基于jQuery

  • 兼容Bootstrap2、3样式,以及非Bootstrap环境支持

  • 也可应用于无任何UI框架的原生HTML环境

  • 输入框输入关键字快速查找(autocomplete)

  • 结果列表分页展示

  • 使用键盘快速操作基本功能及分页功能

  • 允许使用静态json数据源或ajax动态请求的数据源

  • 多项选择以标签(Tag)形式展现

  • 结果列表自动判断屏幕边缘,避免内容超出可视范围

  • 丰富的参数设置及功能API调用

  • 支持i18n国际化多语言支持,自带(中文、英文、德文、日文、西班牙文、巴西葡萄牙文)

浏览器兼容:IE8+、Chrome、Firefox、Safari等主流浏览器

插件基于jQuery开发,可在Bootstrap2、3环境下使用,亦可在原生无UI框架的环境下直接使用

怎么使用SelectPage

Github码云 上下载最新的版本,解压后并放入需要使用的项目中

或使用 npm 指令

npm install selectpage

引用文件

< !-- 基础环境引用说明 -- >
< !-- Bootstrap的UI框架基础样式 -- >
< link rel="stylesheet" href="bootstrap.min.css" type="text/css">
< !-- 插件使用了部分font-awesome的图标,所以需要引入该样式 -- >
< link rel="stylesheet" href="font-awesome.min.css" type="text/css">
< !-- jQuery,Bootstrap的基础脚本引用 -- >
< script type="text/javascript" src="bootstrap.min.js" >< /script >
< script type="text/javascript" src="jquery.min.js" >< /script >
 
 
< !-- 插件使用的样式表文件,根据使用环境的Bootstrap版本进行引用 -- >
< !-- Bootstrap2使用 -- >
< link rel="stylesheet" href="selectpage.css" type="text/css">
< !-- Bootstrap3使用 -- >
< link rel="stylesheet" href="selectpage.bootstrap3.css" type="text/css">
< !-- 非Bootstrap生态下引用该样式 -- >
< link rel="stylesheet" href="selectpage.base.css" type="text/css">
< !-- 以上的样式文件根据实际使用的环境进行引用,引用其中一项即可 -- >
 
< !-- 插件核心脚本 -- >
< script type="text/javascript" src="selectpage.js" >< /script >

HTML页面元素设置

< !-- 设置文本框为插件基本元素 -- >
< input type="text" id="selectPage" >

脚本初始化插件

//定义数组,在服务端返回的数据也以该格式返回:
Array[{Object},{...}]
var tag_data = [
    {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
    {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
    {id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
    {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//初始化插件
$('#selectPage').selectPage({
    showField : 'desc',
    keyField : 'id',
    data : tag_data
});
的码云指数为
超过 的项目
加载中

评论(11)

TerryZ
TerryZ 软件作者

引用来自“LopnorSimo”的评论

可否支持表格数据
Vue 版本 SelectPage 支持
老成有木有
jquery版本太低,不兼容
zkool
zkool
666
osc皮皮
osc皮皮
就是样式丑了点
亦可塞艇
亦可塞艇
666
LopnorSimo
LopnorSimo
可否支持表格数据
黑夜的白羊
黑夜的白羊
非bootstrap环境下 分页按钮不显示???
TerryZ
TerryZ 软件作者
#SelectPage# 插件获得国外插件聚合站点 jqueryscript.net 周推荐榜 http://www.jqueryscript.net/blog/7-Newest-Free-jQuery-Plugins-For-This-Week-34-2017.html
h
hanchuha
支持开源,比较良心的开源小项目
败落
使用时发现一个问题,当条数比较多时,当翻到第N(N>1)页时,在输入框中输入关键字,返回的结果总页数T(T

SelectPage v2.19 发布,下拉选择的分页解决方案

下拉分页选择器 SelectPage v2.19发布了,更新内容: 设置 orderBy 属性默认值为 false,意为不进行排序 增加列表展开、图标等内容的动画内容 修改 eTagRemove(datas) 事件的返回参数为被移除...

2018/09/04 09:51

SelectPage v2.18,下拉选择的增强和扩展方案

下拉分页选择器 SelectPage v2.18发布了,更新内容: v2.18: 修复使用 formatItem 自定义列表时,提示文本也是 html 代码的问题(使用 formatItem 自定义格式化内容时,不将内容设置到 titl...

2018/03/05 09:29

下拉选择框的替换方案 SelectPage v2.15 完善 i18n

下拉分页选择器 SelectPage v2.15发布了,更新内容: $.fn.selectPageText() 获得选中项目的文本增加对多选模式的支持 增加 json 数据模式中 searchField 对指定字段进行搜索的功能,ajax 数...

2017/11/20 10:18

SelectPage v2.14,下拉选择框的替换方案

下拉分页选择器 SelectPage v2.14发布了,更新内容: 多选模式下的样式调整,增加少量动画 增加 dropButton 参数设置,用于打开/关闭输入框内的下拉按钮(向下的三角尖) 修改多选模式标签中...

2017/11/06 10:04

SelectPage v2.13 发布,简洁易用的下拉分页选择器

下拉分页选择器 SelectPage v2.13 发布了,插件更新内容: v2.11 去除 input 和 hidden 的 id, name 的正则匹配 修复完全删除查询关键字时,输入框失去焦点的问题 v2.12 调整部分按钮样式 修...

2017/11/01 09:44

SelectPage v2.10 发布,简洁强大的下拉分页选择器

下拉分页选择器 SelectPage v2.10 发布了,插件更新内容: 移除多余的jQuery表达式 增加初始化时,插件对象的返回 优化插件性能 修改插件默认行为 修复一些特殊环境下使用出现的问题 插件简介...

2017/10/27 09:49

SelectPage v2.9 发布,移除对 Font-Awesome 的依赖

下拉分页插件SelectPage v2.9发布了,插件更新内容: 设置最小宽度限制 设置在原始输入框在初始化时是隐藏状态下,对插件进行初始化,插件宽度异常及元素错位的问题 解决单选模式下,使用API...

2017/10/16 09:38

SelectPage v2.8 发布,简洁而强大的下拉分页选择器

下拉分页选择插件 SelectPage v2.8 发布了,插件更新内容: 调整部分样式 修复可视区域高度较小时,列表始终会向上展开的问题 分离键盘事件处理,对键盘输入精准控制 优化区域外点击处理 优化...

2017/09/25 09:58

SelectPage v2.7 发布,简洁而强大的下拉分页选择器

下拉分页选择插件 SelectPage v2.7 发布了,插件更新内容: 2.5 修复多选模式下,初始化项目的显示文本没有使用formatItem回调进行格式化 修复ajax数据源模式下,输入查询关键字时,翻页始终...

2017/09/13 11:31

SelectPage v2.4 发布,新增纯下拉列表和关闭分页功能

下拉分页选择插件 SelectPage v2.4 发布了,插件更新内容: 增加pagination参数,指定稿件是否使用分页加载数据,以及显示分页栏 增加listSize参数,指定了不使用分页的列表,显示的高度,单...

2017/09/07 09:32

没有更多内容

加载失败,请刷新页面

10
回答
翻页查询问题

@TerryZ 你好,想跟你请教个问题:使用时发现一个问题,当条数比较多时,当翻到第N(N>1)页时,在输入框中输入关键字,返回的结果总页数T(T<N),...

2017/08/14 17:49
5
回答
分页问题

@TerryZ 你好,想跟你请教个问题:ajax请求下,我选中了某条(输入框中赋值上去了),字典关闭后,重新点击输入框,但是Q_WORD[]没得到输入框选...

2017/08/14 18:00

没有更多内容

加载失败,请刷新页面

没有更多内容

简洁而强大的下拉分页选择器 v-selectpage

v-selectpage 简洁而强大的下拉分页选择器 基于 Vue2 强大的选择器, 可分页的列表或表格展现形式, 使用标签形式的多选模式, 国际化 i18n 和服务端数据源支持 文档、实例 请浏览 English site...

2018/07/27 18:31
151
0
录播教室预约系统(三)-DepTable表[普通表]

DepTable表 主要作用 存放单位名称 如图: 模板下载地址 CodeSmith版本为v6.5 第一步:用CodeSmith模板生成DepTable表相关的存储过程 生成的存储过程如下: /****** Object: Stored Proced...

2015/03/03 14:43
15
0
表格插件-BootStrapTable

属性 (Options) 基本使用 $('#tableID').bootstrapTable({}) 表的各项(Table options ) 定义在 jQuery.fn.bootstrapTable.defaults 文件内 名称 类型 默认值 作用描述 height Number 表格的高...

01/16 10:49
1
0
录播教室预约系统(四)-ClassRoom表[带有外键的表]

ClassRoom是与教室信息相关的表,包含教室的名称 这个表比前面介绍的DepTable表稍微复杂点,他有一列DepID 这列是与DepTable表中的ID相对应的的。 有了DepID这一列,我们就可以根据DepID 获取...

2015/03/03 14:44
13
0
录播教室预约系统(四)-ClassRoom表[带有外键的表]

ClassRoom是与教室信息相关的表,包含教室的名称 这个表比前面介绍的DepTable表稍微复杂点,他有一列DepID 这列是与DepTable表中的ID相对应的的。 有了DepID这一列,我们就可以根据DepID 获取...

2015/03/03 14:44
19
0
MyBatis-Plus(七)~CRUD接口

一、Mapper CRUD 接口 说明: 通用 CRUD 封装BaseMapper 接口,为 Mybatis-Plus 启动时自动解析实体表关系映射转换为 Mybatis 内部对象注入容器 泛型 T 为任意实体对象 参数 Serializable 为任...

2018/12/08 17:22
53
0
Mybatis-plus3.x 增加updateAllColumnById扩展实现

Mybatis-plus从2.x 升级到 3.x 后的变化还是比较大的,其中就删除了UpdateAllColumnById方法。项目里用到的地方比较多,昨天抽时间看下源码,写了和扩展重新实现了这个功能。 在这记录下,也...

2018/10/24 00:01
529
2
MyBatis-Plus | 最优雅最简洁地完成数据库操作

引言 两点: 一,使用MyBatis-Plus最新版(3.0.1)完成相关操作 二,好久没写MyBatis操作数据库的博文了,有没有想我啊,哈哈,认真看,认真听,认真学。 测试效果: 下面听我细细道来,MyB...

2018/09/01 18:44
225
0
Jquery 中好的分页插件kkpager

kkpager是Jquery 中好的分页插件之一,下面介绍一下该插件如何使用

2015/09/06 15:10
88
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部