controls.lib.js

asp的bbs程序

/*
  By Hangring
  #2007.12.27#
  ---
  use list:
  > global.lib.js
  > node.lib.js
  > css.lib.js
  > events.lib.js
  ---
  特效
  ---
  包含样式：
  <link rel="stylesheet" href="css/controls.lib.css" type="text/css" />
*/

$Defined('Controls');
var Controls = {};

// 列表
// 样式
// container
Controls.C_List = 'controls-list';
Controls.C_List_Item = 'controls-list-item';
Controls.C_List_Item_Over = 'controls-list-item-over';
// data => [{label:'label1',data:'data1'}, {lable:'label1',data:'data1'}, ...]
Controls.List = function (data /* :Array */) {
    var controls = this;
    var l = oNode.CreateNode('div');
    l.tabIndex = -1;
    l.className = this.C_List;

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

    // 点击执行
    l.click = function () {};

    // 当前被选择项
    l.selectedIndex = -1;
    l.selectedLabel = '';
    l.selectedData = '';

    // 设置列表内容
    l.setData = function (data) {
        l.innerHTML = '';
        for (var i = 0, len = data.length; i < len; i++) {
            var it = oNode.CreateNode('a');
            it.href = 'javascript:void(0)';
            it.className = controls.C_List_Item;
            it.index = i;
            it.onclick = function () {
                if (l.selectedIndex > -1) {
                    CSS.RemoveClass(this.parentNode.getElementsByTagName('a')[l.selectedIndex], controls.C_List_Item_Over);
                }
                CSS.AddClass(this, controls.C_List_Item_Over);

                l.selectedIndex = this.index;
                l.selectedLabel = data[this.index].label;
                l.selectedData = data[this.index].data;

                l.click(l.selectedLabel);
            };
            it.onmouseover = function () {
                if (! l.multiple) {
                    l.setSelected(l.selectedIndex, false);
                    l.setSelected(this.index, true);
                }
            };
            it.onmouseout = function () {
            };
            it.innerHTML = data[i].label;

            oNode.AddNode(it, l);
        }
        l.setSelected(0, true);
    }

    // 设置被选择项
    l.setSelected = function (index, is_selected) {
        if (index == -1) return;
        var item = this.getElementsByTagName('a')[index];
        if (is_selected) {
            CSS.AddClass(item, controls.C_List_Item_Over);

            l.selectedIndex = index;
            l.selectedLabel = data[index].label;
            l.selectedData = data[index].data;
        }
        else {
            CSS.RemoveClass(item, controls.C_List_Item_Over);
        }
    };

    l.setData(data);

    return l;
};

// 组合框
Controls.Controls_Combobox = 'controls-combobox';
Controls.Controls_Combobox_C = 'controls-combobox-c';
Controls.ComboBox = 
function (dp /* [{label:'label1', data:'data1'}, {label:'label2', data:'data2'}]:Array */, editable /* :Boolean */) {
    var c = oNode.CreateNode('div');
    var id = c.id = 'combobox_' + Global.Random();

    c.className = this.Controls_Combobox;
    c.dataProvider = dp;
    c.editable = editable;

    // 当前选择项
    c.selectedIndex = -1;

    // 内部容器
    var c_in = oNode.CreateNode('div');
    //oNode.AddNode(c_in, c);
    c_in.style.position = 'relative';

    // 显示区域
    var tf = c.tf = oNode.CreateNode('input');
    tf.readOnly = editable ? false : true;
    oNode.AddNode(tf, c);

    // 列表
    var list = c.list = this.List(dp);
    oNode.AddNode(list);
    list.multiple = false;
    list.className = this.Controls_Combobox_C;
    CSS.SetDisplay(list, false);
    list.click = function (label) {
        tf.value = label;
        c.selectedIndex = list.selectedIndex;
        CSS.SetDisplay(list, false);
    };
    Events.AttachEvent(document, 'mousedown', function (e) {
        var obj = $EO(e);

        while (obj) {
            if (obj == c || obj == list) return;
            obj = obj.parentNode;
        }
        CSS.SetDisplay(list, false);
    }, true /* capture */);

    // 显示区域默认值
    tf.value = list.selectedLabel;
    c.selectedIndex = list.selectedIndex;
    list.setSelected(c.selectedIndex, true);

    // 事件显示列表
    function _click (e) {
        if (list.style.display == 'none') {
            CSS.SetDisplay(list, true);
            list.style.left = Global.GetOffsetLeft(c) + 'px';
            list.style.top = Global.GetOffsetTop(c) + c.offsetHeight + 'px';
            list.style.width = c.offsetWidth - 2 + 'px';

            list.setSelected(list.selectedIndex, false);
            list.setSelected(c.selectedIndex, true);

            CSS.SetDisplay(list, true);
        }
        else {
            CSS.SetDisplay(list, false);
        }

        Events.CancelBubble($E(e));
    }
    c.onclick = _click;

    return c;
};

//
Controls.NumberBar =
function () {
    var opt = {
        // 容器的宽度, 高度
        W:200, H:20,
        // 间距
        s:0,
        // 箭头按键的宽度
        w:20,
        // 滑块宽度
        bw:20
    };
    // 滑块容器宽度
    opt.cbw = opt.W - opt.w * 2 - opt.s * 2;

    var c = oNode.CreateNode('div');
    c.tabIndex = '-1';
    with (c.style) {
        position = 'relative';
        background = '#999';
        width = opt.W + 'px';
        height = opt.H + 'px';
    }

    var c_bar = oNode.CreateNode('div');
    oNode.AddNode(c_bar, c);
    with (c_bar.style) {
        position = 'absolute';
        width = opt.cbw + 'px';
        height = opt.H + 'px';
        left = (opt.w + opt.s) + 'px'
        top = '0';
    }
    var bar = oNode.CreateNode('div');
    oNode.AddNode(bar, c_bar);
    with (bar.style) {
        position = 'absolute';
        background = '#fcc';
        width = opt.bw + 'px';
        height = opt.H + 'px';
        left = '55px';
        top = '0';
    }

    var prev = oNode.CreateNode('div');
    oNode.AddNode(prev, c);
    with (prev.style) {
        position = 'absolute';
        background = '#ccc';
        width = opt.w + 'px'
        height = opt.H + 'px';
        left = '0'
        top = '0';
    }
    Events.AttachEvent(prev, 'click', function () {
        //
        alert('prev');
    });

    var next = oNode.CreateNode('div');
    oNode.AddNode(next, c);
    with (next.style) {
        position = 'absolute';
        background = '#ccc';
        width = opt.w + 'px'
        height = opt.H + 'px';
        left = opt.W - opt.w + 'px';
        top = '0';
    }
    Events.AttachEvent(next, 'click', function () {
        //
        alert('next');
    });

    var bar_mark;
    var is_down = false;
    var X = 0, Y = 0;
    var x = 0, y = 0;
    function mouse_down (e) {
        var obj = $EO(e);
        if (obj === bar) {
            c.focus();
            is_down = true;
            x = e.clientX + Global.GetScrollLeft();
            y = e.clientY + Global.GetScrollTop();
            X = parseInt(bar.style.left);//Global.GetOffsetLeft(bar);
            Y = parseInt(bar.style.top);//Global.GetOffsetTop(bar);

/*
            bar_mark = oNode.CreateNode('div');
            oNode.AddNode(bar_mark);
            with (bar_mark.style) {
                position = 'absolute';
                width = bar.offsetWidth + 'px';
                height = bar.offsetHeight + 'px';
                left = X + 'px';
                top = Y + 'px';
                background = '#f00';
            }
*/
            CSS.SelectOff();
        }
    }
    function mouse_move (e) {
        if (is_down) {
            var x_t = X + e.clientX + Global.GetScrollLeft() - x;
            var y_t = Y + e.clientY + Global.GetScrollTop() - y + 'px';

            if (x_t < 0) {
                x_t = 0;
            }
            else if (x_t > opt.cbw - opt.bw) {
                x_t = opt.cbw - opt.bw;
            }
            bar.style.left = x_t + 'px';
            //bar_mark.style.left = x_t;
        }
    }
    function mouse_up (e) {
        if (is_down) {
            is_down = false;
        }
        else {
            CSS.SelectOn();
        }
    }
    Events.AttachEvent(document, 'mousedown', mouse_down);
    Events.AttachEvent(document, 'mousemove', mouse_move);
    Events.AttachEvent(document, 'mouseup', mouse_up);

    // 移除事件
    c.remove_event = function () {
        Events.RemoveEvent(document, 'mousedown', mouse_down);
        Events.RemoveEvent(document, 'mousemove', mouse_move);
        Events.RemoveEvent(document, 'mouseup', mouse_up);
    }

    return c;
};

// 上下文菜单
Controls.ContextMenu = 
function (p) {
    var menu = oNode.CreateNode('div');
    oNode.AddNode(menu);
    menu.parent = p;
    with (menu.style) {
        position = 'absolute';
        display = 'none';
        width = '100px';
        height = '100px';
        background = '#ccc';
        left = '200px';
        top = '200px';
    }
    menu.innerHTML = '<a href="javascript:void(0)">fdsfa</a>';
    if (p) {
        menu.style.left = p.offsetWidth + parseInt(p.style.left) + 'px';
        menu.style.top = p.offsetHeight + parseInt(p.style.top) + 'px';
    }
    else {
        function mouse_down (e) {
            var obj = $EO(e);
            var down_out = true;
            while (obj) {
                var _menu = menu;
                while (_menu) {
                    if (_menu == obj) {
                        down_out = false;
                        break;
                    }
                    _menu = _menu.child;
                }
                obj = obj.parentNode;
            }
            if (down_out) {
                Controls.ContextMenu.HideMenu(menu);
                Events.RemoveEvent(document, 'mousedown', mouse_down);
            }
        }
        Events.AttachEvent(document, 'mousedown', mouse_down);
    }

    function _click (e) {
        if (! menu.child) {
            menu.child = Controls.ContextMenu(menu);
        }
        else {
            Controls.ContextMenu.HideMenu(menu.child);
            menu.child = null;
        }
        alert($EO(e).tagName);
    }
    menu.Click = _click;
    Events.AttachEvent(menu, 'click', _click);

    menu.style.display = '';
    return menu;
};
// 隐藏菜单
Controls.ContextMenu.HideMenu = function (menu) {
    if (menu.child) {
        //Controls.ContextMenu.HideMenu(menu.child);
        arguments.callee(menu.child);
    }
    Events.RemoveEvent(menu, 'click', menu.Click);
    oNode.RemoveNode(menu);
};