selector - 选中控件

该控件是用来选中一个列表中的列表项,和桌面操作系统上的ctl 和shift一起合用,来选中一些需要的项,selector可以的选择框可以自定义样式

如:

选中控件

Allocate

ui selector控件所在脚本 {lib}util/selector/selector.js

页面结构如下:

<div class="box" id="xxx">
    <div class="itm">0</div>
    <div class="itm">1</div>
    <div class="itm">2</div>
    <div class="itm">3</div>
    <div class="itm">4</div>
    <div class="itm">5</div>
    <div class="itm">6</div>
    <div class="itm">7</div>
    <div class="itm">8</div>
    <div class="itm">9</div>
    <div class="itm">10</div>
    <div class="itm">11</div>
    <div class="itm">12</div>
    <div class="itm">13</div>
    <div class="itm">14</div>
    <div class="itm">15</div>
    <div class="itm">16</div>
    <div class="itm">17</div>
    <div class="itm">18</div>
    <div class="itm">19</div>
    <div class="itm">20</div>
    <div class="itm">21</div>
    <div class="itm">22</div>
    <div class="itm">23</div>
    <div class="itm">24</div>
    <div class="itm">25</div>
    <div class="itm">26</div>
    <div class="itm">27</div>
    <div class="itm">28</div>
    <div class="itm">29</div>
    <div class="itm">30</div>
    <div class="itm">31</div>
    <div class="itm">32</div>
    <div class="itm">33</div>
    <div class="itm">34</div>
    <div class="itm">35</div>
    <div class="itm">36</div>
    <div class="itm">37</div>
    <div class="itm">38</div>
    <div class="itm">39</div>
</div>

添加选择控件依赖文件如下

selector = nej.ut._$$RangeSelector._$allocate({
                            parent:'xxx'
                           ,list:nej.e._$getChildren('xxx')
                           ,item:'itm'
                           ,range:nej.ui._$$Range._$allocate({parent:'xxx'})
                        });
}
define(['{lib}util/selector/selector.range.js','{lib}ui/range/range.js'],f);

以上创建的是一个range ui实例,选择框的样式是默认的样式,如果默认的样式不能满足需求,可以传给util range控件,传入参数是body,这个参数就是选择框的样式

selector = nej.ut._$$RangeSelector._$allocate({
                        parent:'xxx1'
                       ,list:nej.e._$getChildren('xxx1')
                       ,item:'itm'
                       ,range:nej.ut._$$Range._$allocate({parent:'xxx1',body:'select'})
                    });
                    break;

select的样式如下:

.select{border:1px solid red;background:#ccc;position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;_filter:alpha(opacity=70);opacity:0.7;}

更多的参数信息请参照selector.js api说明 上面的选中以后,需要从selector的获取已经获中的项,可以用selector控件的对外接口_$getSelection

Explain

参数

parent 哪个节点里可以响应选中框

item  parent下哪类样式的节点会被可以选中

select 默认选中样式

onchange 选中改变时触发回调,参数只有事件参数

Recycle

selector._$recycle();

Suggest external interface

selector._$getList() 获取所有列表项

selector._$getSelection() 获取选中项

selector._$clear() 清除选中项

Known Issues

不要在parent到document的节点上加position:relative样式,否则选中框的位置就会偏离。

如果传的是util 的range控件传body时最好不要传id,都是节点对象,那们在回收完后body不会挂在document而是移到的内存,如果传id的时候,会去document上取节点,这时已经取不到节点了 如果要在这个页面上进行事件处理,都要把这些节点的mousedown事件阻止掉,才能进行click这类的事件操作

Demo

selector 控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus