list.lib.js

asp的bbs程序

/*
  By Hangring
  #2008.02.02#
  ---
  use list:
  > node.lib.js
  > events.lib.js
  > css.lib.js
  ---
  拾色器
  ---
  包含样式：
  <link rel="stylesheet" href="css/list.lib.css" type="text/css" />
*/

function List () {
    this.container = null;

    // 多行
    // 确定在下拉列表时，是否根据鼠标移动而改变选择项，
    // 在多行列表时只根据鼠标点击改变选择
    this.multiple = false;

    this.data = [];
    // 鼠标单击选择
    this.selectedIndex = -1;
    this.selectedLabel = '';
    this.selectedData = '';

    // 鼠标移动选择
    this.moveSelectedIndex = -1;

    this.css = {
        list:'list',
        item_over:'over'
    };
}

List.prototype.Init = function () {
};

List.prototype.Create = function () {
    var container = this.container = oNode.CreateNode('div');
    CSS.AddClass(container, this.css.list);

    this.SetData(this.data);

    return container;
};

List.prototype.SetData = function (data /* :Array */) {
    var self = this;
    for (var i = 0, len = this.data.length; i < len; i++) {
        var a = oNode.CreateNode('a');
        oNode.AddNode(a, this.container);
        a.href = '#';
        a.index = i;
        a.innerHTML = this.data[i].label;
        Events.AttachEvent(a, 'click', function (e) {
            Events.CancelEvent(e);
        });
        Events.AttachEvent(a, 'mousedown', function (e, th) {
            th = th || this;
            if (th.index != self.selectedIndex) {
                self._Change(th.index);
            }

            Events.CancelEvent(e);
        });
        Events.AttachEvent(a, 'mouseover', function (e, th) {
            th = th || this;
            if (self.multiple) {
                self._MoveChange(th.index);
            }
        });
        Events.AttachEvent(a, 'mouseout', function () {
        });
    }
    len > 0 && this._Change(0);
};

List.prototype.SetSelected = function (index /* :Number */, isSelected /* :Boolean */) {
    if (index == -1) return;
    var item = this.container.getElementsByTagName('a')[index];
    if (isSelected) {
        CSS.AddClass(item, this.css.item_over);
        this._MoveChange(index);
    }
    else {
        CSS.RemoveClass(item, this.css.item_over);
    }
};

List.prototype._MoveChange = function (index /* :Number */) {
    this.IndexChange(index, this.moveSelectedIndex);
    this.moveSelectedIndex = index;
    this.MoveChange();
};

List.prototype.MoveChange = function () {
};

List.prototype.IndexChange = function (index /* :Number */, selectedIndex /* :Number */) {
    if (selectedIndex > - 1) {
        CSS.RemoveClass(this.container.getElementsByTagName('a')[selectedIndex], this.css.item_over);
    }
    CSS.AddClass(this.container.getElementsByTagName('a')[index], this.css.item_over);
};

List.prototype._Change = function (index /* :Number */) {
    this.IndexChange(index, this.selectedIndex);
    this.selectedIndex = index;
    this.selectedLabel = this.data[index].label;
    this.selectedData  = this.data[index].data;
    this.Change();
};

List.prototype.Change = function () {
};