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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
iview form清除校验状态的实现
Sep 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
PHP的伪随机数与真随机数详解
2015/05/27 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
主管会计岗位职责
2014/03/13 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
停电调休通知
2015/04/16 职场文书
干部培训简讯
2015/07/20 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
JavaScript实现登录窗体
2021/06/22 Javascript
python图片灰度化处理的几种方法
2021/06/23 Python
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python