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 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
javascript if条件判断方法小结
May 17 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
全面理解闭包机制
Jul 11 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
js实现AI五子棋人机大战
May 28 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 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 array_merge下进行数组合并的代码
2008/07/22 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
讲解Python中的标识运算符
2015/05/14 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
幼儿园中班教学反思
2014/02/10 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
企业年检委托书范本
2014/10/14 职场文书
工作失职检讨书500字
2014/10/17 职场文书
部队2015年终工作总结
2015/04/02 职场文书