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


Posted in Javascript onSeptember 07, 2017

下拉分页选择插件 SelectPage v2.4 发布了,插件更新内容:

  • 增加pagination参数,指定稿件是否使用分页加载数据,以及显示分页栏
  • 增加listSize参数,指定了不使用分页的列表,显示的高度,单位为个(选项个数),默认显示10个项目的高度
  • 设置selectOnly:true的情况下,输入框为只读模式,不允许输入查询过滤
  • 修复多选模式下及设置了最大选中项目时,选中了项目再次点击“全选本页”按钮会在已选择的基础上增加最大选中项目个数的项目
  • 调整下拉列表样式及位置
  • 增加单选模式下,选中项目后,自动显示清空按钮
  • 修复多选模式下,移除本页和清除所有两个按钮点击后,回调出错的问题
  • 增加搜索无结果时显示提示信息

插件简介:

多功能下拉选择插件 SelectPage

支持autocomplete、键盘操作、分页、标签多选等多功能的选择器插件

插件效果

多选模式效果图:

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

默认单选模式效果图:

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

入门指南、实例、文档

更多实例、文档请访问: https://terryz.github.io

项目GitHub地址: https://github.com/TerryZ/SelectPage

如果您觉得项目还不错,还请给项目( Github /  码云 )加个Star,以示支持

什么是SelectPage

功能特点

  • 基于jQuery、Bootstrap2、3开发
  • 也可应用于无任何UI框架的原生HTML环境
  • 输入框输入关键字快速查找(autocomplete)
  • 结果列表分页展示
  • 使用键盘快速操作基本功能及分页功能
  • 允许使用静态json数据源或ajax动态请求的数据源
  • 多项选择以标签(Tag)形式展现
  • 结果列表自动判断屏幕边缘,避免内容超出可视范围
  • 丰富的参数设置及功能API调用

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

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

为什么要有SelectPage

有时候我们需要有一个插件,它可以输入关键字进行快速查找,可以下拉进行选择,可以在展示大量数据时进行分页显示,可以使用键盘进行快速操作,可以适应各种UI环境,可以被灵活定制,而上述的情况就真的出现在现实项目的需求里了

这就是为什么会有SelectPage插件的原因

怎么使用SelectPage

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

引用文件

< !-- 基础环境引用说明 -- >
< !-- Bootstrap的UI框架基础样式 -- >
< link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" type="text/css">
< !-- 插件使用了部分font-awesome的图标,所以需要引入该样式 -- >
< link rel="stylesheet" href="font-awesome.min.css" rel="external nofollow" 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" rel="external nofollow" type="text/css">
< !-- Bootstrap3使用 -- >
< link rel="stylesheet" href="selectpage.bootstrap3.css" rel="external nofollow" type="text/css">
< !-- 非Bootstrap生态下引用该样式 -- >
< link rel="stylesheet" href="selectpage.base.css" rel="external nofollow" 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
});

总结

以上所述是小编给大家介绍的SelectPage v2.4 发布新增纯下拉列表和关闭分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
JS Attribute属性操作详解
May 19 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
react redux入门示例
Apr 19 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 #Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 #Javascript
bootstrap-table组合表头的实现方法
Sep 07 #Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 #Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 #Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 #Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 #Javascript
You might like
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
JS 控件事件小结
2012/10/31 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
了解ESlint和其相关操作小结
2018/05/21 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
了解重排与重绘
2019/05/29 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
英国医生在线预约:Top Doctors
2019/10/30 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
迟到检讨书900字
2014/01/14 职场文书
美术指导助理求职信
2014/04/20 职场文书
医院护士工作检讨书
2014/10/26 职场文书
营运督导岗位职责
2015/04/10 职场文书
病危通知书样本
2015/04/17 职场文书
主题班会开场白
2015/06/01 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL