同步操作将从 小李/TinySelect 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
TinySelect 是一个以灵活为目标的WEB下拉组件。旨在通过灵活的接口和用法,适应各种不同的场景
select
元素渲染select
、unselect
和ready
事件将dist
目录复制到你的项目中,然后在页面上添加引用
<link rel="stylesheet" type="text/css" href="dist/tinyselect.css" />
<script type="text/javascript" src="dist/tinyselect.js" />
HTML结构
<div id="tinyselectcontext"></div>
或
<select id="tinyselectcontext">
<optgroup label="1-2">
<option>1</option>
<option value="2">二</option>
</optgroup>
<optgroup label="3-5">
<option value="3">3</option>
<option value="4">4</option>
<option value="伍">五</option>
</optgroup>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
数据
var data = [{
"id": 0,
"text": "一月"
}, {
"id": 1,
"text": "二月"
}, {
"id": 2,
"text": "三月"
}, {
"id": 3,
"text": "四月"
}, {
"id": 4,
"text": "五月"
}, {
"id": 5,
"text": "六月"
}, {
"id": 6,
"text": "七月"
}, {
"id": 7,
"text": "八月"
}, {
"id": 8,
"text": "九月"
}, {
"id": 9,
"text": "十月"
}, {
"id": 10,
"text": "十一月"
}, {
"id": 11,
"text": "十二月"
}];
单选
var ts = tinyselect('#tinyselectcontext', data);
多选
var ts = tinyselect('#tinyselectcontext', data, true);
注:参数 true
仅在第二个参数为数据数组时有效。
select
元素创建TinySelect
通过select
元素创建TinySelect
实例时,传入配置需要注意以下问题:
select
的以下属性:
context
的css
属性和style
属性来控制select
占位元素的样式,如:
{
context:{
css: '自定义的样式类名称',
style: '自定义样式'
}
}
TinySelect
不会自动生成任何样式。
否则将应用select
元素的样式,此时至少需要设置select
元素的宽度和高度,
当然要是再设置个border
那就更好了。optgroup
分组var ts = tinyselect('#tinyselectcontext', {
css: 'custom-select-style',
style:{
width: 400
},
item:{
data: data,
render: function(data, index){
return (index + 1) + ':' + data.text;
}
}
});
这里指定了自定义的样式类custom-select-style
,这个类会被附加到下拉组件的顶层容器上,可以通过.tinyselect-container.custom-select-style
这样的方式来重写样式。
更多用法,请看示例。
创建下拉组件的默认选项。这里列出了所有可用的项,这些项会被附加到TinySelect
上面,可以通过修改tinyselect.defaults
来改变这些默认配置,如: tinyselect.defaults.result.multi = true
这样的写法会让页面内之后创建的下拉组件都默认启用多选模式。
{
// 组件是否是只读的
readonly: false,
// 显示模式,可以设置的值为: dropdown(默认下拉模式), list(列表模式), popup(弹出模式)
mode: 'dropdown',
// 是否支持键盘操作,默认为 true
keyboard: true,
// 附加的样式类名称
css: NULL,
// 下拉框容器的样式
style: {
// 这个行高是必须的,覆盖这些样式时,需要注意,
// 其值需要是可以转换成整数的类型,因为下拉的项会使用这个作为默认的行高
// 例外的情况:设置了项的行高(即下面的 item.line-height)
lineHeight: '28px'
},
// 下拉框的头部
header: {
// 头部渲染器,其this上下文就是其DOM对象,
// 直接操作这个对象来改变头部
// 这个是在执行完其初始化,添加到容器前调用的
render: false,
// 过滤框
filter: {
// 触发过滤的动作,可以设置为 change 或 enter(默认)。
// 为change时,输入有变化时执行
// 为enter时,按下回车时执行
trigger: 'enter',
// 此值表示在输入框经过指定时间后没有键盘输入时,触发过滤动作
// 单位是毫秒,默认值为 618
// 当 trigger 为change时有效
// 设置这个是为了防止使用亚洲输入法时(比如:中文,日文等)时,文字输入中将字母上屏导致的事件触发
delay: 618,
// 过滤框的提示文字
placeholder: '输入后按回车过滤',
// 过滤时是否区分大小写,默认为 false
matchCase: false,
// 附加的样式类名称
css: NULL,
// 过滤框的样式
style: {}
},
// 附加的样式类名称
css: NULL,
// 头部样式
style: {}
},
// 下拉项容器
box: {
// 下拉列表没有数据时显示的文字
empty: '没有数据',
// 数据项的布局方式
// 可设置的值有: list(列表布局,默认值), grid(网格布局), table(表格布局)
layout: layout_list,
// 附加的样式类名称
css: NULL,
// 下拉项容器的样式
style: {}
},
// 数据项分组设置
group: {
// 分组值字段
// 设置此值时才会分组
valueField: false,
// 分组文本字段,不设置时使用 valueField
// 相同的 valueField 而 textField不同时,只会取第一个 textField的值
textField: false,
// 数据项不包含指定的 valueField字段时的分组名称
unknown: '未分组',
// 分组的渲染器
render: false,
// 附加的样式类名称
css: NULL,
// 下拉项容器的样式
style: {}
},
// 下拉项
item: {
// 下拉项数据的数组,每一项需要对象结构的数据
data: [],
// 默认选中的项
value: false,
// 数据对象的值字段,在获取/设置值时,会使用这个字段
valueField: 'id',
// 数据对象的文本字段,下拉项的显示文字
textField: 'text',
// 可见项的数量,数据数量多余此值时出现滚动条
visible: 5,
// 下拉项的渲染器,使用返回值设置项的内容
// render: function(itemdata, index, alldata){} this 指向即将渲染的网页元素对象。
// itemdata:这一项的数据
// index: 这一项数据的索引
// alldata:下拉的所有数据
// 设置为false 禁用渲染器
render: false,
// 是否在数据项比设定的 visible 多时使用异步渲染(true),
// 在数据较多时建议设置为true,以避免大量的dom操作阻塞页面执行
async: TRUE,
// 附加的样式类名称
css: NULL,
// 每一个下拉项的样式
style: {}
},
// 下拉底部DOM
footer: {
// 底部渲染器,其this上下文就是其DOM对象,
// 直接操作这个对象来改变底部
// 需要注意的是,底部分了“左”、“右”两个区域,以放置不同的东西
// 这个是在执行完其初始化,添加到容器前调用的
render: false,
/**
* 下拉项数量
*/
totalTpl: '共' + str_placeholder + '项',
/**
* 选中的下拉项数据
*/
selectedTpl: '选中' + str_placeholder + '项/',
// 附加的样式类名称
css: NULL,
// 底部的样式
style: {}
},
result: {
// 是否启用多选模式
multi: false,
// 是否显示下拉指示器
// false 始终不显示
// true 始终显示
// null 单选时显示 多选时不显示
arrow: null,
// 当从select创建实例时,是否需要将TinySelect的选中值同步到select上,默认为 true
sync: true,
// 渲染选中结果的渲染器,可以通过这个来改变选中结果的渲染
render: false,
// 多选结果展示方式,可以设置为 0(显示选中的数量,默认值) 或者 1(显示 选中的项列表)
// 这是一个预留配置项
type: 0,
// 附加的样式类名称
css: NULL,
// 多选结果的样式
style: {}
}
}
注:
style
项可以使用所有的css
样式,名称中有连字符的时候可以写成font-size
或者fontSize
通过选项option.keyboard
设置是否支持键盘操作,默认为true
当为true
时,可以通过以下键操作组件:
↑
上方向键,项向上移动一位↓
下方向键,项向下移动一位Space
空格键,选中/取消选中当前项Esc
Esc键,关闭组件目前组件提供了三种显示模式:
布局是指数据项的排列方式,通过参数option.box.layout
来设置,可以设置为
布局grid
与table
不同之处在于:
grid
是所有项以网格方式显示,每一行显示的项的数量与每项占用的宽度相关,如果要控制每一行显示项的数量,那么请设置项的宽度和下拉框的宽度table
的一行显示的是一项数据的多个字段不同的布局基本上都是通过不同的样式来实现的。
TinySelect 提供了一组易用的操作接口。这些接口除了取值类的,其它都返回了下拉组件的实例,也就是说非取值类的接口可以进行链式调用。
显示下拉组件。
callback 下拉组件显示后的回调函数。这个回调函数没有参数,其上下文this
对象指向下拉组件的弹出框DOM对象。
隐藏下拉组件。
callback 下拉组件隐藏后的回调函数。这个回调函数没有参数,其上下文this
对象指向下拉组件的弹出框DOM对象。
设置/获取下拉组件的选中值。当传了参数时是设置值;不传参数时,是获取值,此时若是单选则返回选中的值,多选则返回选中的值的数组。
value 第一个参数是要设置的值,单选时传入单个值,多选时传入值数组。
trigger 是否触发事件。true
触发,false
不触发。在设置值时,如果希望结果框中显示设置的值,这个参数需要传入true
。默认为false
。
在初始化下拉组件后立即调用
.value()
设置值的时候,需要确保渲染已经完成,即事件ready
已经被触发。
根据关键字或函数过滤数据项。返回所有命中项的数据组成的数组。
keyOrFn 关键字或过滤器函数。当传入字符串的时候,会在下拉项中查找匹配的文本,若有匹配则返回这项的数据;传入函数时,通过函数的返回值决定是否命中(返回true
表示命中),这个函数的上下文this
对象是某一个下拉项的DOM对象,并且有一个参数data
,data
是这个数据项的数据。
toggle 是否切换显示状态,即隐藏未命中项,显示命中项。默认为false
。
清除下拉组件的选中项。
加载数据,重新渲染下拉项,调用这个函数前的所有数据项都会在重新渲染前被清空。
data 组件会根据这个数据重新渲染所有的下拉项。
设置/获取下拉组件的只读模式。当传了参数时是设置模式,不传参数时为获取模式。
readonly 为true
时设置下拉组件只读,为false
取消下拉组件的只读模式;不传时为获取当前是否是只读模式。
绑定事件到下拉组件上。
eventType 事件类型名。,目前支持select
,unselect
,ready
,传入其它值无效。
handler 事件的处理函数。详见下方 [事件][0] 部分
从下拉组件上取消事件的绑定。参数同上面的on函数。需要注意的是,在调用off
的时候,handler
需要是函数引用,这个函数引用应该与调用on
的时候是同一个引用,所以,调用on
时使用了匿名函数,那么在这里无法解除绑定。
TinySelect 目前提供了三个事件:select
, unselect
, ready
。
下拉项被选中时触发的事件。上下文this
指向下拉组件,处理函数有一个参数e
,其结构如下:
{
data: Object,
index: Number,
target: HtmlElement,
type: String
}
,其中,data
是下拉项的数据,index
是下拉项的索引,target
是下拉项的DOM元素,type
是事件类型。
下拉项被取消选中时触发的事件。参数与用法与select
事件相同。
下拉组件的所有下拉项渲染完成后触发的事件,这个事件触发后表示下拉组件初始化已经完成,可以正常使用了。
在初始化下拉组件后立即调用
.value()
设置值的时候,需要确保渲染已经完成。
可以通过重写这些样式来实现不同的效果。 如果仅仅想要重设配色,那么可以直接通过修改src/colors.less文件,然后重新编译。这个文件里面提供了目前组件中的大部分颜色变量。
仅在
popup
模式时存在
position: fixed
撑满窗口此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。