基于Jquery的下拉列表控件(个人觉得实用)
Selectize 是一个基于 jQuery 的 <select> UI 控件,对于标签选择和下拉列表功能非常有用。
Selectize 的目标是通过简单而强大的 API 提供坚实可用的用户体验。
主要特色:
- 简洁的 API,有详细的帮助文档;
- 支持智能排序和多属性搜索,甚至可以使用打分函数进行排序的;
- 支持键盘操作,对用户使用友好;
- 支持同时选择和删除多个项目;
- 支持远程数据加载,例如 Ajax 调用;
使用示例:
单选选择
1
2
3
4
|
$( '#select-beast' ).selectize({ create: true , sortField: 'text' }); |
多项选择
1
2
3
|
$( '#select-state' ).selectize({ maxItems: 3 }); |
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择。
FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以了。
默认情况下,FancySelect 在移动设备上使用原生的选择功能和风格。
使用示例:
1
2
3
4
5
6
7
8
9
10
|
<select class = "basic" > <option value= "" >Select something…</option> <option>Lorem</option> <option>Ipsum</option> <option>Dolor</option> <option>Sit</option> <option>Amet</option> </select> $( '.basic' ).fancySelect(); |
Chosen 是最流行的 jQuery 选择功能插件,也是我最喜欢,最好用的一个!
Chosen 可以帮助你轻松构建用户友好的漂亮选择功能,可以把多选转换为基于标签的输入域。
特色功能:
- 用户友好的下拉选择功能,支持搜索;
- 基于标签的多项选择功能;
- 支持设置选中和无效选项;
- 支持修改和更新事件;
使用示例:
隐藏搜索的单选功能
1
|
$( ".chosen-select" ).chosen({disable_search_threshold: 10}); |
设置多选的最大选择数
1
|
$( ".chosen-select" ).chosen({max_selected_options: 5}); |
监听更新事件
1
|
$( "#form_field" ).chosen().change( … ); |
手动触发更新
1
|
$( "#form_field" ).trigger( "chosen:updated" ); |
自定义宽度
1
|
$( ".chosen-select" ).chosen({width: "95%" }); |
DropKick 可以帮助你把已有的烦人的 <select>
列表转换为漂亮的,可定制的下拉菜单。
使用示例:
默认调用
1
|
$( '.default' ).dropkick(); |
自定义更新事件
1
2
3
4
5
|
$( '.change' ).dropkick({ change: function (value, label) { alert( 'You picked: ' + label + ':' + value); } }); |
自定义皮肤
1
2
3
4
5
6
|
$( '.custom_theme' ).dropkick({ theme: 'black' , change: function (value, label) { $( this ).dropkick( 'theme' , value); } }); |
这款免费、轻量的 jQuery 选择功能插件让你可以轻松创建带有图片和描述的自定义下拉菜单。
使用示例:
使用 JSON 数据
1
2
3
4
5
6
7
8
9
|
$( '#demoBasic' ).ddslick({ data: ddData, width: 300, imagePosition: "left" , selectText: "Select your favorite social network" , onSelected: function (data) { console.log(data); } }); |
获取选中项
1
2
3
4
5
6
7
8
9
|
$( '#demoShowSelected' ).ddslick({ data: ddData, selectText: "Select your favorite social network" , }); $( '#showSelectedData' ).on( 'click' , function () { var ddData = $( '#demoShowSelected' ).data( 'ddslick' ); displaySelectedData( "2: Getting Selected Dropdown Data" , ddData); }); |
设置选中项
1
2
3
4
5
6
7
8
9
10
11
12
|
$( '#demoSetSelected' ).ddslick({ data: ddData, selectText: "Select your favorite social network" }); $( '#btnSetSelected' ).on( 'click' , function () { var i = $( '#setIndex' ).val(); if (i >= 0 && i <5) $( '#demoSetSelected' ).ddslick( 'select' , {index: i }); else $( '#setIndexMsg' ).effect( 'highlight' ,2400); }); |
Select 2 是一款用于替代传统的网页下拉框的 jQuery 插件,支持搜索、远程数据和无限滚动等功能。
使用示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<head> <link href= "select2.css" rel= "stylesheet" /> <script src= "select2.js" ></script> <script> $(document).ready(function() { $( "#e1" ).select 2 (); }); </script> </head> <body> <select id= "e1" > <option value= "AL" >Alabama</option> ... <option value= "WY" >Wyoming</option> </select> </body> |
基于Jquery的下拉列表控件(个人觉得实用)的更多相关文章
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
- 模仿win10样式,基于jquery的时间控件
工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...
- 一些基于jQuery开发的控件
基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...
- 前端关于 superSlide.js 使用,一款基于jquery的前端控件
1引用jQuery.js 和 jquery.SuperSlide.js 2 编写HTML ** 以下是默认的HTMl结构,分别是 ".hd" 里面包含ul, ".bd&q ...
- 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- {VS2010C#}{WinForm}{ActiveX}VS2010C#开发基于WinForm的ActiveX控件
在VS2010中使用C#开发基于WinForm的ActiveX控件 常见的一些ActiveX大部分是使用VB.Delphi.C++开发,使用C#开发ActiveX要解决下面三个问题: 使.NET组件可 ...
- FineUI第八天----下拉列表控件
下拉列表控件 3.模拟树的下拉列表: 其他的控件都跟Asp.net的差不多.
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
Jquery 操作Html 控件 CheckBox.Radio.Select 控件 在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...
随机推荐
- 《linux就该这么学》课堂笔记18 squid服务
Squid服务程序正向解析和反向解析 正向代理模式不仅可以让用户使用Squid代理服务器上网,还可以基于指定的IP地址.域名关键词.网站地址或下载文件后缀等信息,实现类似于访问控制列表的功能.反向代理 ...
- ArmIE的安装
参考:https://developer.arm.com/tools-and-software/server-and-hpc/arm-architecture-tools/arm-instructio ...
- boost与MFC的冲突(new)
在MFC对话框程序中用boost::signals2时出现了问题, 由于MFC为了方便调试,在debug下重新定义了new #ifdef _DEBUG#define new DEBUG_NEW#end ...
- Scikit-learn Preprocessing 预处理
本文主要是对照scikit-learn的preprocessing章节结合代码简单的回顾下预处理技术的几种方法,主要包括标准化.数据最大最小缩放处理.正则化.特征二值化和数据缺失值处理. 数学基础 均 ...
- Scrapy笔记04- Selector详解
Scrapy笔记04- Selector详解 在你爬取网页的时候,最普遍的事情就是在页面源码中提取需要的数据,我们有几个库可以帮你完成这个任务: BeautifulSoup是python中一个非常流行 ...
- 使用Git Flow进行版本控制
重置 # force reset $ git flow init -f
- 【HDU6216】 A Cubic number and A Cubic Number 和 广工的加强版
题目传送门_杭电版 题目传送门_广工版 广工版的是杭电版的加强版. 题意:判断一个质数是否是两个整数的立方差 ---- 数学题 题解: 根据立方差公式:\(a^3 - b^3 = (a - b)(a^ ...
- python jenkins api
#!/usr/bin/pythonimport sys, timeimport shutil, commands#coding=utf-8 import sysreload(sys)sys.setde ...
- [原创]UnLua Emmylua UE4开发环境搭建
前言 公司开发的第二个虚幻4项目已经上线了,慢慢趋于稳定.回想起开荒的日子,历历在目.从引擎脚本的选择,各工具(导表,协议生成...)的重构.开发, 引擎扩展(多骨骼支持,Notify扩展,技能编辑器 ...
- ThreadPoolExecutor源码1
参考:https://www.cnblogs.com/liuyun1995/p/9305273.html ThreadPoolExecutor1 executorService1 = new Thre ...