npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

arale-select

v0.10.1

Published

模拟 select 的组件

Downloads

6

Readme

Select


spm package Build Status Coverage Status

模拟 select 的组件。


使用方法

Select 继承了 overlay,可使用其中包括 widgetbaseclasseventsattributeaspect 的属性和方法。

trigger 为 select

html 片段

<select id="city" name="city">
    <option value="value1">text1</option>
    <option value="value2">text2</option>
</select>

javascript 片段

new Select({
    trigger: '#city'
}).render()

trigger 为其他 DOM

html 片段

<a href="#" id="city"></a>

javascript 片段

new Select({
    trigger: '#city',
    name: 'city',
    model: [
        {value:'value1', text: 'text1'},
        {value:'value2', text: 'text2'}
    ]
}).render();

配置说明

trigger element

trigger 可以为 select 或 其他任何 DOM。

**注意:**trigger只能为一个 DOM,如果选出来多个会取第一个

  • 如果为 select,会将其隐藏并生成一个 a 标签放在原来的位置。
  • 如果为 DOM,实例化的时候则需要提供 model 作为数据源

如果 trigger 比较复杂,可以选择 DOM 自定义结构,而且需要设置 data-role="trigger-content" 来指定填入内容的位置。

model object

model 的来源有两处

  1. 初始化传入
  2. 如果 trigger 为 select,则会根据结构生成 model

model 的格式为

[
    {value:'value1', text: 'text1', selected: true},
    {value:'value2', text: 'text2'}
]

value text selected 均为 option 的属性

template string

生成组件的模版,数据源为 model。

triggerTpl string

可以指定触发器的 DOM 结构,默认就是个 a 标签。

classPrefix string (0.9.0 修改,之前为 prefix)

样式前缀,默认为 ui-select

name string

模拟 select 的属性,表单项需要的 name 值,等同于 select.name

注意:如果 trigger 不是 select,那么会先在页面找 name 的 input,找不到再创建一个。

value string

模拟 select 的属性,获取被选中 option 的 value 值,等同于 select.value

length number

模拟 select 的属性,获取 option 的个数,等同于 select.length

selectedIndex number

模拟 select 的属性,获取被选中 option 的索引值,等同于 select.selectedIndex

multiple boolean

// TODO

disabled boolean

模拟 select 的属性,设置 select 是否可点,等同于 select.disabled

方法

.select(option)

选中某项,option 支持三种

  1. 列表索引,为 Number
  2. 选择器,为 String
  3. DOM,支持 DOM Element 和 jQuery 对象

.syncModel(model)

重新跟进给定的 demo 渲染 select

model 为数据源,和上面提到的 model 格式保持一致

.addOption(option)

将一个选项添加到最后,option 的格式为

{value: 'value1', text: 'text1'}

.getOption(option)

获取某个选项,参数和 .select 方法一致

.removeOption(option)

删除某个选项,参数和 .select 方法一致

.enableOption(option)

使某个选项可选,参数和 .select 方法一致

.disableOption(option)

使某个选项不可选,参数和 .select 方法一致

事件

change

当选择某项的时候会触发,组件初始化不会触发此事件

回调传回的参数为当前选中的项,为 jQuery 对象

new Select({
    trigger: ''
}).on('change', function(target, prev) {
    console.log(target.html());
})

disabledChange

在 disabled 状态变化时会触发这个事件,在初始化的时候也会触发此事件。

.on('disabledChange', function(target, status) {
    console.log(target.html());
})

target 为当前选中的项,status 为变化后的 disabled 状态

问题讨论

  • ui-select-item 避免设置 height #13
  • trigger 和 template 的字体保持一致,不然宽度可能有不对齐的情况