hdividedbox.lib.js

asp的bbs程序

/*
  By Hangring
  #2008.03.05#
  ---
  use list:
  > global.lib.js
  > node.lib.js
  > css.lib.js
  > browser.lib.js
  > events.lib.js
  > function.lib.js
  ---
  水平分隔区块
*/

function HDividedBox () {
    // container
    this.container = null;
    // 对应节点，当this.container设置时，elements自动获取子节点
    this.elements = [];
    // 对应内容，如果this.container未设置则应设置此属性
    this.contents = [];

    // the number of dividers.
    this.count = 0;
    // 最后一个已显示的区块索引
    this.lastIndex = 0;

    // 区块默认尺寸
    this.defaultWidth = 100;
    // 区块的最小宽度
    this.minWidth = 20;
    // 分栏条宽度
    this.barWidth = 8;
    // bar back
    this.barBack = null;

    // dividers
    this.childs = [];
    // dividers width
    this.widths = [];
    // drag bar
    this.bars = [];

    // event
    // 是否由窗体尺寸改变引起改变控件改变尺寸
    this.resizeFromWin = true;
    // 是否鼠标按下
    this.isDown = false;
    // bar HTMLElement
    this.curBar = null;
    // function
    this.mousedown = null;
    this.mousemove = null;
    this.mouseup   = null;
    // down x, y
    this.dx = this.dy = 0;
    // move x, y
    this.mx = this.my = 0;
    // 鼠标为点击时，拖动条左右的区块当前宽度
    this.ow1 = this.ow2 = 0;
    // 鼠标按下与弹起的差
    this.tx = 0;
    // 鼠标为点击时，拖动条的位置
    this.barLeft = 0;
    // 鼠标为点击时，拖动条右边区块的位置
    this.rightBoxLeft = 0;

    this.css = {
        dividedbox:'dividedbox',
        box:'box',
        hbox:'hbox',
        bar:'bar',
        bar_back:'bar-back',
        // 容器及自定义各个区块与拖动条的样式
        container: '',
        // :String|:Array
        bars: [],
        // :String|:Array
        childs: []
    };
}

HDividedBox.prototype.Init = function () {
    var c = this.container;
    if (c) {
        c.className = '';
        this.count = 0;
        for (var i = 0, len = c.childNodes.length; i < len; i++) {
            if (oNode.IsNode(c.childNodes[i])) {
                c.childNodes[i].className = '';
                this.elements[this.count++] = c.childNodes[i];
            }
        }

        if (this.count == 0) return false;
    }
    else {
        if (this.contents.length == 0) return false;
        this.count = this.contents.length;
    }
    return true;
};

HDividedBox.prototype.Create = function () {
    var self = this;

    if (!this.Init()) return false;

    // container
    var c = this.container;
    if (!oNode.IsNode(c)) c = this.container = oNode.CreateNode('div');
    CSS.AddClass(c, this.css.dividedbox, this.css.container);

    // 初始化每个区块尺寸
    this.lastIndex = this.count - 1;
    for (var i = 0; i < this.count; i++) {
        this.widths[i] = typeof this.widths[i] != 'number' || this.widths[i] < this.minWidth ? this.defaultWidth : this.widths[i];
    }

    var w = 0;
    for (var i = 0, j = 0; i < this.count; i++) {
        var child = this.childs[i] = this.elements[i] || oNode.CreateNode('div');
        if (!this.elements[i]) {
            oNode.AddNode(child, c);
            child.innerHTML = this.contents[i] || '&nbsp;';
        }

        var childCss = this.css.childs;
        CSS.AddClass(child, this.css.box, this.css.hbox, (typeof childCss == 'string' ? childCss : childCss[i]) || '');
        child.index = i;
        child.style.left = w + 'px';
        child.style.width = this.widths[i] + 'px';
        w += this.widths[i];

        // add bar
        if (i + 1 < this.count) {
            var bar = this.bars[j] = oNode.CreateNode('div');
            this.elements[i] ? oNode.InsertBefore(bar, this.elements[i + 1]) : oNode.AddNode(bar, c);
            var barsCss = this.css.bars;
            CSS.AddClass(bar, this.css.bar, (typeof barsCss == 'string' ? barsCss : barsCss[i]) || '');
            bar.index = j;
            bar.style.left = w + 'px';
            bar.style.width = this.barWidth + 'px';
            j++;

            w += this.barWidth;
        }
    }

    // add-ons
    var addons = 'var self = arguments.callee.self';

    // resize
    if (this.resizeFromWin) {
        Events.AttachEvent(window, 'resize', function () {self.Resize()});
    }

    // resize with bar
    var mousedown = this.mousedown = function (e) {

        var obj = $EO(e);
        for (var i = 0, len = self.bars.length; i < len; i++) {
            if (obj == self.bars[i]) {
                self.isDown = true;
                self.GetSize();
                self.curBar = obj;

                var barBack = self.barBack;
                if (!barBack) {
                    barBack = self.barBack = CSS.AddBack();
                    CSS.AddClass(barBack, self.css.bar_back);
                }
                barBack.Show();

                self.dx = e.clientX;
                self.dy = e.clientY;
                self.ow1 = self.childs[obj.index].offsetWidth;//self.widths[obj.index];
                self.ow2 = self.childs[obj.index + 1].offsetWidth;//self.widths[obj.index + 1];
                self.barLeft = parseInt(obj.style.left);
                self.rightBoxLeft = parseInt(self.childs[obj.index + 1].style.left);
                break;
            }
        }
    };
    var mousemove = this.mousemove = function (e) {
        if (self.isDown) {
            //$('info').innerHTML = Math.random();
            self.mx = e.clientX;
            self.my = e.clientY;
            self._ResizeBar();
        }
    };
    var mouseup = this.mouseup = function (e) {
        if (self.isDown) {
            self.isDown = false;
            self.GetSize(self.curBar.index);
            self.barBack.Hide();
        }
    };
    /*
    mousedown = mousedown.Rebuild(['e'], addons);
    mousedown.self = self;
    mousemove = mousemove.Rebuild(['e'], addons);
    mousemove.self = self;
    mouseup = mouseup.Rebuild(['e'], addons);
    mouseup.self = self;
    */
    Events.AttachEvent(document, 'mousedown', mousedown);
    Events.AttachEvent(document, 'mousemove', mousemove);
    Events.AttachEvent(document, 'mouseup', mouseup);

    return c;
};

HDividedBox.prototype.SetSize = function (w, h) {
};
HDividedBox.prototype.SetSizeW = function (w) {
};
HDividedBox.prototype.SetSizeH = function (h) {
    h += typeof h == 'number' ? 'px' : '';
    this.container.style.height = h;
    for (var i = 0, len = this.childs.length; i < len; i++) {
        this.childs[i].style.height = h;
        this.bars[i] && (this.bars[i].style.height = h);
    }
};

HDividedBox.prototype.GetSize = function (index) {
    if (this.lastIndex == this.count - 1) {
        for (var i = 0; i < this.count; i++) {
            this.widths[i] = this.childs[i].offsetWidth;
        }
    }
    else if (typeof index != 'undefined') {
        for (var i = 0; i < this.lastIndex; i++) {
            this.widths[i] = this.childs[i].offsetWidth;
        }
        this.widths[this.lastIndex] = parseInt(this.bars[this.lastIndex].style.left) - parseInt(this.childs[this.lastIndex].style.left);
        //$('info').innerHTML = index + ' ' + this.lastIndex + ' ' + this.widths + ' ' + this.tx;
    }
};

HDividedBox.prototype._ResizeBar = function (index /* bar index:Number */) {
    //
    var tx = this.mx - this.dx;
    var index = this.curBar.index;

    if (this.ow1 + tx < this.minWidth || this.ow2 - tx < this.minWidth) {
        this.tx = 0;
        return;
    }

    this.curBar.style.left = this.barLeft + tx + 'px';
    this.childs[index].style.width = this.ow1 + tx + 'px';
    this.childs[index + 1].style.left = this.rightBoxLeft + tx + 'px';
    this.childs[index + 1].style.width = this.ow2 - tx + 'px';
    this.tx = tx;

    this.ResizeBar(index);
};

// 外部定义
HDividedBox.prototype.ResizeBar = function (index /* bar index:Number */) {
};

// window resize
HDividedBox.prototype._Resize = function () {
    if (this.widths.length == 0) this.GetSize();
    var cw = this.container.offsetWidth;

    var _count = this.count - 1;
    while (1) {
        var w = 0;
        var sign = false;
        for (var i = 0; i < _count; i++) {
            w += this.widths[i] + this.barWidth;
        }
        if (cw > w + this.minWidth) {
            break;
        }
        else {
            // 最后一个区块无相应拖动快
            this.bars[_count - 1] && (this.bars[_count - 1].style.visibility = 'hidden');
            this.childs[_count].style.visibility = 'hidden';
            _count--;
        }
    }

    var w = 0;
    for (var i = 0; i < this.count; i++) {
        var v = i > _count ? 'hidden' : 'visible';
        this.bars[i - 1] && (this.bars[i - 1].style.visibility = v);
        this.childs[i].style.visibility = v;
        this.childs[i].style.width = this.widths[i] + 'px';
        if (i < _count) w += this.widths[i] + this.barWidth;
    }
    try {
        this.childs[_count].style.width = cw - w + 'px';
    }
    catch (e) {}

    this.lastIndex = _count;
    //$('info').innerHTML = _count + ' ' + this.widths;
};

// 外部调用
HDividedBox.prototype.Resize = function () {
    this._Resize();
};

/*
    // (1)
    var hbox = new HDividedBox();
    hbox.container = $('info');
    //hbox.resizeFromWin = false;
    hbox.Create();
    hbox.Resize();
    //Events.AttachEvent(window, 'resize', function () {hbox.Resize()});

    // (2)
    var hbox = new HDividedBox();
    hbox.contents = ['aaaaaaa', 'bbbbbb', 'fdsafdsf'];
    hbox.Create();
    oNode.AddNode(hbox.container, $('info'));
    hbox.Resize();
*/