LuLu UI组件中文文档 » select下拉框

Fork Me

select下拉框

一、基于<select>的模拟下拉框

  1. 效果演示-单选

    没有选项:

    请选择: 第二个选项选中

    <select>
        <option disabled>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option selected>选项4</option>
        <option>选项5</option>
        <option>选项6</option>
    </select>
    $('#selMatch').click(function () {
        var sel = $(this).prevAll('select');
        sel.find('option').eq(1).prop('selected', true);
        // peak主题下,亦可以使用sel.refresh()
        sel.selectMatch();
    });

    hidden属性隐藏

    $('#selHidden').click(function () {
        var sel = $(this).prevAll('select').eq(0);
        sel.attr('hidden', '');
    });

    滚动条:

  2. 效果演示-复选 NEW

    请选择:

    选中的结果是:选项2, 选项3

    <select multiple>
        <option>选项1</option>
        <option selected>选项2</option>
        <option selected>选项3</option>
        <option>选项4</option>
        <option disabled>选项5</option>
        <option>选项6</option>
    </select>
    $('select').selectMatch();
  3. 语法和参数

    支持模块化调用,使用示意如下:

    var Select = require('common/ui/Select');
    new Select(el);
    

    el参数为jQuery包装器对象或者DOM对象,表示对应的<select>元素。

    也支持传统jQuery链式调用(推荐),示意如下:

    require('common/ui/Select');
    $().selectMatch();

    Select.js下拉方法只能基于原生的<select>元素生成,不支持数据。如果希望基于数据结构创建下拉列表,可以参考使用DropList.js。

    Select.js下拉方法没有任何可选参数,想要处理事件,你就处理<select>这个原生下拉框就好了,其它什么也不用关心。例如:

    $('select').change(function() {
        console.log('来自下拉框:我变化了');
    });
  4. 同步与刷新

    我们有时候,会手动修改<select>元素的选中项,或者动态添加内容。此时,在修改了<select>元素后,调用下$(select).selectMatch()方法,模拟下拉框就会自动刷新匹配,很简单吧。

    如果引入了Enhance.js,亦可以使用$().refresh()进行UI更新。

    非常不建议对模拟生成的下拉框元素进行操作。

  5. 下拉定位

    本组件自带下拉列表位置判断,也就是超出窗体,会自动朝上显示,例如:

  6. 元素禁用

    想要实现自定义下拉控件的的禁用效果,直接<select>元素添加disabled属性就可以了。例如:

    <select style="width:100px;" disabled>
    <option>请选择</option>
    </select>

    复选也是这样。例如:

    <select multiple disabled>
        <option>选项1</option>
        <option>选项2</option>
    </select>
  7. 元素隐藏

    如果想要隐藏(不占据空间的隐藏),可以给原生的<select>元素增加HTML5原生隐藏属性hidden,下拉框和后面的自定义下拉框会一并隐藏。

  8. 一些限制

    下拉采用的相对元素的绝对定位,列表元素在DOM内部,因此,如果父级存在overflow:hidden,可能会让下拉部分列表无法显示,这个需要注意下。

二、下拉框作为插件独立使用

引入CSS:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Select.css">

引入JS:

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Select.js"></script>

单独使用Demo演示

Fork Me 返回顶部