selectbox

首页 > selectbox

关于

select 修饰器 - 让 select 原生控件可自定义样式与结构。

请注意：原生 select 是一个很基础的 UI 控件，包含大量的交互逻辑。如果想要“美化”它必须重新使用 HTML 与 CSS 实现一套，复杂度极高，作为前端工程师的我们应该清楚的知道模拟控件很多时候是弊大于利的，如果你仍然认为值得尝试，请相信这是你见过的世界上最负责的模拟下拉控件，没有之一。

使用 selectbox 除了可以让原生 select 控件受 css 控制之外，甚至可以改变下拉框的 HTML 结构，以便产生更多的表现形式，以满足产品与设计师的要求 —— 比如让选项支持 icon。

特性

已经模拟的特性

• 用户操作产生的数据可同步到原生 select 控件，不会破坏表单特性
• 操作可触发原生 select 的 onchange 事件
• iPhone 、iPad 点击能显示滚轮
• 盲人的读屏器操作支持
• 基本快捷键支持
• 自适应位置
• label 标签 for 行为支持
• 自动 zIndex 值
• disabled 属性
• optgroup 选项分组
• 点击页面任意空白区域自动关闭（包括 iframe）
• 超多选项自动使用滚动条并自动滚动到选中项
• 与原生 select 控件一样快的事件响应能力

不支持的特性

• 原生 select 控件的 DOM 操作无法自动同步到模拟控件
• multiple 属性
• 其他未列举的特性…

兼容性

• IE6~IE11
• Chrome（包括 Android 平台）
• Safari（包括 iOS 平台）
• Firefox
• Opera

调用

1.直接引用

<link rel="stylesheet" href="css/ui-selectbox.css">
<script src="dist/selectbox-min.js"></script>

2.作为 RequireJS 或 SeaJS 的模块引入

var selectbox = require('./popupjs/src/selectbox');

注意：内部依赖全局模块require('jquery')，请注意全局模块配置是否正确。

接口

selectbox(HTMLElement, Options)

其中 HTMLElement 是要修饰的原生 select 节点，Options 是可选项，用来进行自定义模板结构。

若原生的 select 控件被更新，重新执行 selectbox 即可保持同步。

修饰原生下拉控件

<select id="demo-basic">
    <option selected value="0">---请选择---</option>
    <option value="1">选项二</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
    <option value="4">选项四</option>
    <option value="5">选项五</option>
</select>

selectbox(document.getElementById('demo-basic'));

---请选择--- 选项二 选项二 选项三 选项四 选项五 执行

高级：自定义模板

例如我们生成一个包含图片的下拉列表：

<select id="demo-select-img" onchange="alert(this.value)">
    <optgroup label="常用">
        <option value="e100" data-icon="http://ctc.qzonestyle.gtimg.cn/qzone/em/e100.gif">微笑</option>
        <option value="e101" data-icon="http://ctc.qzonestyle.gtimg.cn/qzone/em/e101.gif">瘪嘴</option>
        <option value="e102" data-icon="http://ctc.qzonestyle.gtimg.cn/qzone/em/e102.gif">发情</option>
        <option value="e103" data-icon="http://ctc.qzonestyle.gtimg.cn/qzone/em/e103.gif">惊讶</option>
        <option value="e104" data-icon="http://ctc.qzonestyle.gtimg.cn/qzone/em/e104.gif">得意</option>
        <option value="e105" data-icon="http://ctc.qzonestyle.gtimg.cn/qzone/em/e105.gif">哭泣</option>
    </optgroup>
    <optgroup label="爱情">
        <option value="e163" data-icon="http://ctc.qzonestyle.gtimg.cn/qzone/em/e163.gif">玫瑰</option>
        <option value="e164" data-icon="http://ctc.qzonestyle.gtimg.cn/qzone/em/e164.gif">凋谢</option>
        <option disabled value="e165" data-icon="http://ctc.qzonestyle.gtimg.cn/qzone/em/e165.gif">亲吻(黄钻用户专享)</option>
    </optgroup>
</select>

上面是原生 select 控件的 HTML 代码，注意到我们将图片地址写在了<option>标签的自定义属性data-icon上，接下来我们根据它转换带图的下拉选项：

selectbox(document.getElementById('demo-select-img'), {
    optionHtml: '<dd class="ui-selectbox-option {{className}}" data-option="{{index}}" tabindex="-1"><img src="{{icon}}" alt="icon" style="width:16px;height:16px;vertical-align:middle" /> {{textContent}}</dd>'
});

微笑 瘪嘴 发情 惊讶 得意 哭泣 玫瑰 凋谢 亲吻(黄钻用户专享) 执行

默认的模板结构：

{
    selectboxHtml:
      '<div class="ui-selectbox" hidefocus="true" style="user-select:none" onselectstart="return false" tabindex="-1" aria-hidden>'
    +     '<div class="ui-selectbox-inner" data-value="">{{textContent}}</div>'
    +     '<i class="ui-selectbox-icon"></i>'
    + '</div>',
    dropdownHtml:  '<dl class="ui-selectbox-dropdown" role="menu">{{options}}</dl>',
    optgroupHtml:  '<dt class="ui-selectbox-optgroup">{{label}}</dt>',
    optionHtml:    '<dd class="ui-selectbox-option {{className}}" data-option="{{index}}" tabindex="-1">{{textContent}}</dd>',
    selectedClass: 'ui-selectbox-selected',
    disabledClass: 'ui-selectbox-disabled',
    focusClass:    'ui-selectbox-focus',
    openClass:     'ui-selectbox-open'
}

你可能注意到模板结构中有{{与}}包裹起来的模板变量，这些是可以通过<select>、<option>标签的data-*="*"属性传过来的。

所有特性演示

新页面打开