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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
Javascript缓存API
Jun 14 Javascript
js querySelector() 使用方法
Dec 21 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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 之入门篇
2006/12/04 PHP
URL Rewrite的设置方法
2007/01/02 PHP
PHP print类函数使用总结
2010/06/25 PHP
ini_set的用法介绍
2014/01/07 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
vue+iview写个弹框的示例代码
2017/12/05 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
古驰英国官网:GUCCI英国
2020/03/07 全球购物
主治医师岗位职责
2013/12/10 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
节水倡议书
2015/01/19 职场文书
爱国主题班会教案
2015/08/14 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Python自动化测试PO模型封装过程详解
2021/06/22 Python