SelectPage 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
SelectPage 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发网页组件
开发厂商
地区 国产
提 交 者 TerryZ
适用人群 未知
收录时间 2017-06-13

软件简介

多功能下拉选择插件 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
});
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (12)

加载中
可否支持react
2019/04/23 22:56
回复
举报
TerryZ软件作者

引用来自“LopnorSimo”的评论

可否支持表格数据
Vue 版本 SelectPage 支持
2018/11/16 21:16
回复
举报
jquery版本太低,不兼容
2017/11/02 11:30
回复
举报
666
2017/11/02 08:08
回复
举报
就是样式丑了点
2017/10/27 10:26
回复
举报
打分: 力荐
666
2017/10/10 16:59
回复
举报
可否支持表格数据
2017/09/25 21:57
回复
举报
打分: 力荐
非bootstrap环境下 分页按钮不显示???
2017/09/18 15:45
回复
举报
TerryZ软件作者
#SelectPage# 插件获得国外插件聚合站点 jqueryscript.net 周推荐榜 http://www.jqueryscript.net/blog/7-Newest-Free-jQuery-Plugins-For-This-Week-34-2017.html
2017/08/24 23:05
回复
举报
打分: 力荐
支持开源,比较良心的开源小项目
2017/08/22 12:23
回复
举报
更多评论
发表于大前端专区
2018/09/04 09:51

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

下拉分页选择器 SelectPage v2.19发布了,更新内容: 设置 orderBy 属性默认值为 false,意为不进行排序 增加列表展开、图标等内容的动画内容 修改 eTagRemove(datas) 事件的返回参数为被移除内容的原始数据 修复排序字段只以 showField 字段进行排序的问题 修复多选模式下动态修改数据源生效延迟及会展开列表的问题 修复...

6
7
发表于大前端专区
2018/03/05 09:29

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

下拉分页选择器 SelectPage v2.18发布了,更新内容: v2.18: 修复使用 formatItem 自定义列表时,提示文本也是 html 代码的问题(使用 formatItem 自定义格式化内容时,不将内容设置到 title 属性中) 解决在切换分页后,修改数据源,出现“无查询结果”的问题 插件样式优化调整 调整插件分页区域样式名称 修复初始化项...

4
23
发表了资讯
2017/11/20 10:18

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

下拉分页选择器 SelectPage v2.15发布了,更新内容: $.fn.selectPageText() 获得选中项目的文本增加对多选模式的支持 增加 json 数据模式中 searchField 对指定字段进行搜索的功能,ajax 数据模式已支持 完善国际化功能,将所有固定文本资源都替换为国际化处理 解决原始输入框(input)在隐藏状态或是父容器是隐藏的状态...

11
54
发表了资讯
2017/11/06 10:04

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

下拉分页选择器 SelectPage v2.14发布了,更新内容: 多选模式下的样式调整,增加少量动画 增加 dropButton 参数设置,用于打开/关闭输入框内的下拉按钮(向下的三角尖) 修改多选模式标签中的关闭按钮和单选模式的清空按钮为图标,优化标签关闭时的点中率不高的问题 优化 ajax 数据源模式下,session 超时后,以更友好的...

11
20
发表了资讯
2017/11/01 09:44

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

下拉分页选择器 SelectPage v2.13 发布了,插件更新内容: v2.11 去除 input 和 hidden 的 id, name 的正则匹配 修复完全删除查询关键字时,输入框失去焦点的问题 v2.12 调整部分按钮样式 修复 ajax 数据源模式下,部分情况会在初始化时会选中所有项目的问题 v2.13 解决 ajax 模式下,查询关键字缺失问题 新增 eOpen 回调...

10
19
发表了资讯
2017/10/27 09:49

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

下拉分页选择器 SelectPage v2.10 发布了,插件更新内容: 移除多余的jQuery表达式 增加初始化时,插件对象的返回 优化插件性能 修改插件默认行为 修复一些特殊环境下使用出现的问题 插件简介: 风格简洁,功能强大的下拉分页选择插件 插件使用入门、实例、文档请访问: English official site 中文官网 插件预览:...

5
36
发表了资讯
2017/10/16 09:38

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

下拉分页插件SelectPage v2.9发布了,插件更新内容: 设置最小宽度限制 设置在原始输入框在初始化时是隐藏状态下,对插件进行初始化,插件宽度异常及元素错位的问题 解决单选模式下,使用API清空选中项目中,没有移除清空按钮的问题 解决列表显示提示信息时,列表不显示的问题 插件使用的图标不再依赖Font-Awesome图标库...

9
21
发表了资讯
2017/09/25 09:59

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

下拉分页选择插件 SelectPage v2.8 发布了,插件更新内容: 调整部分样式 修复可视区域高度较小时,列表始终会向上展开的问题 分离键盘事件处理,对键盘输入精准控制 优化区域外点击处理 优化数据展示渲染效率 优化列表位置定位的准确性 插件简介: 多功能下拉选择插件 SelectPage 简洁而强大的下拉分页选择器;支持远程...

7
47
发表了资讯
2017/09/13 11:31

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

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

8
43
发表了资讯
2017/09/07 09:34

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

下拉分页选择插件 SelectPage v2.4 发布了,插件更新内容: 增加pagination参数,指定稿件是否使用分页加载数据,以及显示分页栏 增加listSize参数,指定了不使用分页的列表,显示的高度,单位为个(选项个数),默认显示10个项目的高度 设置selectOnly:true的情况下,输入框为只读模式,不允许输入查询过滤 修复多选模式...

6
39
发表了资讯
2017/08/24 10:22

SelectPage v2.3 发布,新增无 UI 框架支持

下拉分页选择插件 SelectPage v2.3 发布了,插件更新内容: 修复在查询关键字状态下,分页数据没有被更新,导致分页按钮功能不正常问题 清理整理内部对象 修复多选模式下,若设置了最大选中项目个数,点击“全选本页”按钮时,仅选中指定的最大数量 增加selectpage.base.css兼容无UI框架的方案,但建议要至少使用normali...

2
36
发表了资讯
2017/08/21 10:10

SelectPage 2.2 发布,多功能 autocomplete 下拉分页插件

下拉分页选择插件 SelectPage v2.2 发布了,插件更新内容: 增加为原始输入框的value属性设置初始化值,以初始化插件选中项目 修复多选模式下关闭标签出错的问题 修复输入查询关键字后失去焦点,再次获得焦点时,插件没有根据已存在的关键进行过滤 增加inputDelay配置项目,设置ajax数据源模式下,延迟输入查询的时间,避...

14
45
发表了资讯
2017/08/14 15:18

下拉分页选择插件 SelectPage v2.0 发布,大量更新

下拉分页选择插件 SelectPage v2.0 发布了,插件更新内容: 代码重构 修改默认样式,使用更简洁的风格 增加maxSelectLimit参数,设置多选模式下最大选择个数限制 增加eTagRemove回调函数,在多选模式下,移除标签时触发的回调 优化错误信息展示的交互方式 增加初始化选中项目时(多选模式),允许设置多个内容,例如:d...

6
55
发表了资讯
2017/08/09 09:34

SelectPage v1.2 发布,多功能下拉分页选择插件

更新内容: 修复界面上排版内容较少时,列表会向上展示开的问题 增加多选模式下的控制按钮区域,功能:“全选本页”、“取消本页”、“清空全部” 修复最大宽度下超出父容器的宽度问题 修复ajax模式报错的问题 增加ajax_success请求成功后的数据处理回调 插件介绍: 多功能下拉选择插件 功能特点 基于jQuery、Bootstrap...

13
37
发表了资讯
2017/06/24 19:39

SelectPage 1.1 发布,多功能下拉分页选择插件

SelectPage 1.1 发布了。 更新内容 SelectPage 1.1 版本针对 Bootstrap3 版本进行了兼容,解决在 Bootstrap3 环境下使用时样式排版混乱问题。 多功能下拉选择插件 功能特点 基于jQuery、Bootstrap2、3开发 输入自动查找 列表结果分页展示 使用键盘快速操作基本功能及分页功能 多项选择以标签(Tag)形式展现 结果列表自动...

3
24
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2018/07/27 18:31

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

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

0
0
发表了博客
2018/10/18 14:43

Fastadmin 后台表单,外键关键,步骤

1.在 public\assets\js\backend 目录中找到对应的js,修改 2.对应控制器中加上index()方法;开启关联查询 重点: protected $relationSearch = true; //开启关联查询 public function index() { //设置过滤方法 $this->request->filter(['strip_tags']); //当前是否为关联查询 $this->relationSearch = true; // 解决排序...

0
0
发表了博客
2019/06/03 17:46

pagehelper用法

spring boot 和 mybatis 中使用 pagehelper: 1、 在pom.xml 中加入pagehelper的引用: <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.0.4</version> </dependency>   <dependency>    <groupId...

0
0
发表了博客
2018/03/14 08:58

分页下拉框选择

简洁而强大的下拉分页选择器;支持远程数据(AJAX)、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件 入门指南、实例、文档 插件效果 多选模式效果图: 默认单选模式效果图: 纯下拉选择(不分页)模式: 什么是SelectPage 功能特点 基于jQuery 兼容Bootstrap2、3样式,以及...

0
0
发表了博客
04/13 18:09

2-11 Mybatis-Plus 分页演示

分页想用之前要把MybatisPlusConfig配置好,否则就用不了。 selectPage需要两个参数 分页效果 改成第一页取三条 如果想排序就用setOrders,里面封转一个对象叫做OrderItem 下面讲自定义sql语句 结束

0
0
发表于开发技能专区
2019/12/04 17:30

mybatis-plus 3.2.0 分页返回total为0 解决方案

首先这个问题肯定是开启了二级缓存导致的 其次通过查看文档看到有这么一句话 也就是使用`CachePaginationInterceptor`替换`PaginationInterceptor `即 但是发现mybatis-plus3.2.0的jar包中并没有`CachePaginatio...

0
0
发表于软件架构专区
2019/10/15 19:43

mybatis-plus的使用 ------ 进阶

前言: 关于mybatis-plus的简介以及基本使用,我在《mybatis-plus的使用 ------ 入门》一文中已做介绍,此处不再赘述。本文主要对mybatis-plus的AR模式、插件、逆向工程、自定义全局操作、公共字段自动填充等知识...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2017/08/14 17:49

翻页查询问题

@TerryZ 你好,想跟你请教个问题:使用时发现一个问题,当条数比较多时,当翻到第N(N>1)页时,在输入框中输入关键字,返回的结果总页数T(T<N),会弹出当前页为N,总页数为T(T<N),是不是可以输入框输入关键字后,查询页码为1; OSCHINA开源中国已发起提问!!!

10
0
发表了问答
2017/08/14 18:00

分页问题

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

5
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
12 评论
194 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部