下拉框的分离设计

     模拟系统内置下拉框，使得在所有的系统以及浏览器中具有同样的表现，目标是功能分解，利用 mixin 分离实现。

 

下拉框功能点分析：

 

1.可以存储值，是一个存储数据的容器，相当于 readonly 的 input。

 

2.有下拉箭头，点击下拉箭头可以弹出选项列表。（实际上点击存储容器也有同样的表现）。

 

3.选项列表本质是一个 overlay，选项列表弹出后会遮盖存储容器下面的内容。

 

4.选项列表浮层具有默认的对齐属性，即选项列表的左上角与存储容器的左下角对齐。

 

5.最重要的：下拉框的内容（选项列表）是一个列表，可以通过鼠标或键盘选中特定列表项值。

 

 

下拉框实现设计：

 

1.值容器

 

值容器使用 input 来表现，不过新增自定义属性 data-value 用来表示下拉框的值，input 本身的 value 则用来表示下拉框值的对应展现内容。

 

值容器作为最基本的实现，具备 inputNode(关联input) ，inputValue (下拉框值)，inputDisplay(下拉框展现内容)三个属性，不仅能为下拉框提供支持，经过扩展也可以作为自动补全组件的存储底层：

 

function Base(){}
Base.ATTRS = {
        inputNode:{
            setter:function(el) {

                return Node.one(el);
            }
        },

        inputValue:{
        },

        inputDisplay:{
            valueFn:function() {
                this.get("inputNode").val();
            }
        }
    };

  2.列表

 

列表表示列表数据项的有序组合，列表使用语义化的 ul ,li来表示：

 

 

var LIST_WRAP_TMPL = "<ul class='{listClass}'>";

var LIST_ITEM_TMPL = "<li class='{listItemClass}' data-value='{listItemValue}'>{listItem}</li>";

 

 

具备 listData （列表内容数据），hoverListItem（当前鼠标掠过的单个表项），selectListItem（当前鼠标点击确定的单个表项），以及一些样式类配置：

 

function List(){}

List.ATTRS = {
        listData:{
            setter:function(v) {
                return v || [];
            }
        },
        listClass:{
            value:"ks-selectable2-list"
        },
        listItemClass:{
            value:"ks-selectable2-list-item"
        },

        listItemHoverClass:{
            value:"ks-selectable2-list-item-hover"
        },
        listItemActiveClass:{
            value:"ks-selectable2-list-item-active"
        },

        hoverListItem:{setter:smooth},
        activeListItem:{setter:smooth},
        selectListItem:{setter:smooth}
    };

 

主要逻辑为监控鼠标动作来更新对应属性值（hover,click）。（经扩展也可支持键盘）。

 

 

3.overlay 特性扩充

 

通过扩充 overlay 的特性（盒子，定位，对齐）并结合上述 1,2 的 input 和 list 来产生模拟系统的下拉框类

 

 

UIBase.create([
        S.require("uibase/box"),
        S.require("uibase/contentbox"),
        S.require("uibase/position"),
        UA['ie'] == 6 ? S.require("uibase/shim") : null,
        S.require("uibase/align"),
        SelectBase,
        SelectList);

 

下拉框要处理自己的逻辑了：

 

1.监控 list 的选择项变化，同步 input 的展现内容与自定义的 data-value 属性值。

 

2.将 input 设为只读，并且屏蔽 input 获得焦点 （系统下拉框的 input 是不会出现光标的）。

 

3.添加下拉箭头。

 

3.控制列表显示：点击 input 以及下拉箭头进行列表的显示和隐藏，点击空白区域隐藏列表。

 

4.设置默认对齐属性，列表默认对齐于 input。

 

 

3.demo

 

模拟系统下拉框