boostrap selectpicker 用法
1、.html中先引用
<link href="{{ url_for('static', filename='css/bootstrap-select.css') }}" rel="stylesheet">
<script src="{{ url_for('static',filename='js/bootstrap-select.js') }}"></script>
2、flask 模板中写法:
{{ form2.cron_name(class='form-control show-tick selectpicker') }}
3、js代码:
$(".selectpicker").selectpicker({
liveSearch:true,
});
4、selectpicker其他属性
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| actionsBox | bool | false |
当设置为 |
| container | string| false | false |
当设置为一个字符string,追加选择一个特定的元素或选择器,例如 |
| countSelectedText | string| function | function |
设置当selectedTextFormat是显示文本的格式 当设定为一个函数,第一个参数是所选择的选项的数目,并且第二个是选项的总数。该函数必须返回一个字符string。 |
| deselectAllText | string | 'Deselect All' |
当取消选择所有选项按钮上的文本 |
| dropdownAlignRight | bool | 'auto' |
false |
对齐菜单,而不是左右。如果设置为 |
| dropupAuto | bool | true |
进行检查以查看其具有更多的空间,上方或下方。如果dropup有足够的空间完全打开正常,但上面有更大的空间,在dropup仍能正常打开。否则,就变成了dropup。如果dropupAuto设置为false,dropups必须手动调用。 |
| header | string | false |
增加了菜单的顶部的头部; 默认包含关闭按钮 |
| hideDisabled | bool | false |
从菜单中删除禁用的选项和optgroups |
| iconBase | string | 'glyphicon' |
将基地使用不同的图标字体代替Glyphicons。如果改变iconBase,你也可能要更改 |
| liveSearch | bool | false |
当设置为 |
| liveSearchNormalize | bool | false |
设置liveSearchNormalize以 |
| liveSearchPlaceholder | string | null |
当设置为一个字符string,一个占位符属性等于该字符string将被添加到实况搜索输入。 |
| liveSearchStyle | string | 'contains' |
当设置为 |
| maxOptions | integer | false | false |
当设置为一个integer ,并在多选择,所选选项的数量不能超过给定值。 该选项还可以存在作为数据属性为 |
| maxOptionsText | string| array | function | function |
启用maxOptions时所显示的文本,并为给定的方案选项的最大数量已被选定。 如果使用的功能,它必须返回一个数组。阵列[0]是当maxOptions被施加到整个选择元件使用的文本。阵列[1]是当maxOptions上的OPTGROUP用于使用的文本。如果使用字符string,相同的文字用于元素和OPTGROUP两者。 |
| mobile | bool | false |
当设置为 |
| multipleSeparator | string | ', ' |
坐落在分隔所选选项的按钮显示的字符。 |
| noneSelectedText | string | 'Nothing selected' |
当多个选择时所显示的文本没有选择的选择。 |
| selectAllText | string | 'Select All' |
当选择了所有选项,按钮上的文本 |
| selectedTextFormat | 'values'| 'static'| 'count'| 'count > x'(其中,x是integer ) |
'values' |
指定选择如何显示有多个选择。
|
| selectOnTab | bool | false |
当设置为 |
| showContent | bool | true |
当设置为 |
| showIcon | bool | true |
当设置为 |
| showSubtext | bool | false |
当设置为 |
| showTick | bool | false |
show(没有的项目上选择的选项勾选 |
| size | 'auto'| integer | false |
'auto' |
当设置为 当设置为integer 时,菜单将显示项目的给定数量,即使下拉被切断。 当设置为 |
| style | string| null | null |
当设置为一个字符string,添加值到该按钮的风格。 |
| tickIcon | string | 'glyphicon-ok' |
设置要使用的图标旁边显示的“滴答”来选择的选项。 |
| title | string| null | null |
对于selectpicker的默认标题。 |
| width | 'auto'| 'fit'| css-width| false(其中css-width是单位CSS的宽度,例如100px) |
false |
当设置为 当设置为一个css-宽度,所述selectpicker的宽度内联强制为给定值。 当设置为 |
| windowPadding | integer | array | 0 |
这是在该窗口中有一个下拉菜单中不应该涉及的领域情况下非常有用-例如一个固定的头。当设置为一个integer ,同样填充将被添加到四面八方。可替代地,一个integer 数组可以在格式来使用 |
boostrap selectpicker 用法的更多相关文章
- bootstrap-select,selectpicker 用法详细:通过官方文档翻译
用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法,于是去官网看了下 顺便弄过来翻译一下: 选项可以通过数据属性或JavaScript传递.对于数据属性,附加选项名称dat ...
- BootStrap--selectpicker的使用
bootstrap-select,selectpicker 用法详细:通过官方文档翻译 用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法,于是去官网看了下 顺便弄过来 ...
- vue.js+boostrap最佳实践
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
- vue.js+boostrap
vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
- bootstrap-select用法详解
首先需要引入 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href=&quo ...
- Boostrap的自适应功能
其实理解栅栏模式之后,自适应功能就简单很多了,根据浏览器的大小,Boostrap有四种栅栏类名提供使用,用法与Css样式表类名选择器样式调用是一样的: xs:col-xs-1 ~ col-xs-12, ...
- bootstrap-select and selectpicker 修改下拉框的宽度或者下方留白
bootstrap-select and selectpicker 修改下拉框的宽度或者下方留白 $("#sel_userName").selectpicker({ "w ...
- EditText 基本用法
title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...
随机推荐
- 机器学习:scikit-learn 文档、深入学习机器学习的思路
一.scikit-learn 的文档查阅 网页访问 scikit-learn 的文档: scikit-learn.org —— Document —— User Guide: scikit-learn ...
- java继承捡漏
总结:老师真是的.讲课的时候,觉得打的比喻特别有趣,结果啊不晓得他是良苦用心.知识就是包含在里面 继承:子类继承父类,子类就可以把父类的东西拿来用 这体现在程序运行时,你会发现,子类对象可以调用父类的 ...
- 转:InnoDB Crash Recovery 流程源码实现分析
此文章转载给登博的文章,给大家分享 InnoDB Crash Recovery 流程源码实现分析 Crash Recovery问题 本文主要分析了InnoDB整个crash recovery的源码处理 ...
- python-xlrd api
1.导入模块 import xlrd from xlrd import open_workbook 2.打开Excel文件读取数据 data = xlrd.open_workbook('excelFi ...
- 删除CentOS系统自带的jdk
转自:https://www.cnblogs.com/linjiqin/archive/2013/03/23/2977377.html 在安装CentOS6.4时,系统会自动安装jdk,先把它下载掉, ...
- DAY7-面向对象之绑定方法与非绑定方法
一.类中定义的函数分成两大类 一:绑定方法(绑定给谁,谁来调用就自动将它本身当作第一个参数传入): 1. 绑定到类的方法:用classmethod装饰器装饰的方法. 为类量身定制 类.boud_met ...
- 【MySQL】20个经典面试题(转)
原文链接:http://bbs.51cto.com/thread-1470880-1.html Part2:经典题目 1.MySQL的复制原理以及流程 基本原理流程,3个线程以及之间的关联: 2.my ...
- IOS UITableView分组与索引分区实例
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...
- python struct.pack中的对齐字节问题
最近测试涉及到了序列字节化相关问题,碰到一个头疼的问题 buff = struct.pack("3s","B00") print repr(buff) 输 ...
- 用fontcreator创建了一个半成品的字体
下效果,哈哈. 为啥说半成品呢?因为只制作了0到9这几个字符,其他的字母.汉字.符号啥的都没有制作,唯一感觉就是字体设计是一个非常有设计感的活儿,而且需要付出很多的精力,尤其是汉字字体,常见的有6k多 ...