js oop / jms http://gougou8180.javaeye.com UTF-8 Copyright 2003-2008, JavaEye.com http://blogs.law.harvard.edu/tech/rss JavaEye - 做最棒的软件开发交流社区 gougou8180 作者: gougou8180  链接：http://gougou8180.javaeye.com/blog/78483  发表时间: 2007年05月10日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

/**
        last modify 2007.3.01
     */


Tab = Class.create();//(Component);
Tab.construct = function(){//($self, $class) {
    var that = this;
    var _num = 1;
   
    this.initialize = function() {
        //$self.super0.initialize.call(this);
    };
   
    this.objEvent = function(div,child) {
        child.ondblclick = that.dblclick;
        child.onclick = that.click;
        //div.onclick = that.clickit;
    };
   
    this.objParam = function() {
   
    };
   
    this.Create = function(element) {
        this.div = document.createElement("div");
        for(i=0;i<_num;i++) {
            var child = _createElement();
            that.div.appendChild(child);
            that.objParam();
            that.objEvent(this.div,child);
            if(0 == i)
                child.style.borderBottom = 0;
        }
        try {
            element.appendChild(this.div);
        }catch(e) { alert("tab组件父节点不正确"); }
        //$self.super0.html = that.div;
    };
   
this.clickit = function(){
that.select();
return false;
};
   
    this.setPosition = function(x,y) {
        var o = that.getHTML();
        with(o.style){
            left = x;
            top  = y;
        }
    };
      
    this.getPosition = function() {
        var o = that.getHTML();
        var x = parseInt(o.style.left) || 0;
        var y = parseInt(o.style.top) || 0;
        return {x:x, y:y};
    };
   
    this.getHTML = function() {
        return this.div;   
    };
   
    //设置创建tab页个数，初始值为1，在create前调用
    this.setNum = function(num) {
        _num = parseInt(num) || 1;
    };
   
    //创建圆角div
    var _createElement = function() {
        var div = document.createElement("div");
        var div_1 = document.createElement("div");
        var div_2 = document.createElement("div");
        var div_3 = document.createElement("div");
        var div_4 = document.createElement("div");
        var div_5 = document.createElement("div");
        div_5.innerText = "标签名";
        div.appendChild(div_1);
        div.appendChild(div_2);
        div.appendChild(div_3);
        div.appendChild(div_4);
        div.appendChild(div_5);
        _elementParam(div,div_1,div_2,div_3,div_4,div_5);
        return div;
    };
   
    //设置圆角div属性
    var _elementParam = function(div,div_1,div_2,div_3,div_4,div_5) {
        div.style.overflow = "hidden";
        div_1.style.overflow = "hidden";
        div_2.style.overflow = "hidden";
        div_3.style.overflow = "hidden";
        div_4.style.overflow = "hidden";
        div_1.style.height = "1px";
        div_2.style.height = "1px";
        div_3.style.height = "1px";
        div_4.style.height = "2px";
        div_5.style.height = "1px";
        div.style.borderBottom = "1px #999 solid";
        div_1.style.borderTop = "1px #999 solid";
        div_1.style.borderLeft = "1px #999 solid";
        div_1.style.borderRight = "1px #999 solid";
        div_2.style.borderLeft = "1px #999 solid";
        div_2.style.borderRight = "1px #999 solid";
        div_3.style.borderLeft = "1px #999 solid";
        div_3.style.borderRight = "1px #999 solid";
        div_4.style.borderLeft = "1px #999 solid";
        div_4.style.borderRight = "1px #999 solid";
        div_5.style.borderLeft = "1px #999 solid";
        div_5.style.borderRight = "1px #999 solid";
        div_1.style.margin = "0 5px";
        div_2.style.margin = "0 3px";
        div_3.style.margin = "0 2px";
        div_4.style.margin = "0 1px";
        div_2.style.borderWidth = 2;
        div_5.style.display = "inline";
        div_5.style.fontSize = "12px";
        div_5.style.textAlign = "center";
        div_5.style.whiteSpace = "nowrap";
        div_5.style.width = "80px";
        div.style.width = "80px";
        div.style.display = "inline";
    };
   
    //双击事件
    this.dblclick = function() {
        var div_5 = this.lastChild;
        var inp = document.createElement("input");
        div_5.appendChild(inp);
        inp.style.position = "absolute";
        inp.style.left = 1;
        inp.style.top = 4;
        inp.style.fontSize = div_5.style.fontSize;
        inp.style.height = div_5.offsetHeight;
        inp.style.width = div_5.offsetWidth - 2;
        inp.style.border = "none";
        inp.style.textAlign = "center";
        inp.value = div_5.innerText;
        inp.maxLength = 6;
        inp.select();
        inp.onblur = function() {
            div_5.innerText = ("" == this.value ? " ":this.value);
            this.removeNode(true);
        };
    };
   
    //点击事件,调用click_operate操作
    this.click = function() {
        var child = that.div.childNodes;
        for(var i=0;i<child.length;i++)
            child[i].style.borderBottom = "1 #999 solid";
        this.style.borderBottom = 0;
        that.click_operate();
    };
   
    this.click_operate = function() {
        //未实现
    };
   
    //设置尺寸大小
    this.setDimension = function(dimension) {
        if(!isNaN(dimension)) {
            var child = this.div.childNodes;
            for(var i=0;i<child.length;i++) {
                child[i].style.width = dimension;
                child[i].lastChild.style.width = dimension;
            }
        }
    };
   
    //设置字体大小
    this.setFontSize = function(size) {
        var child = this.div.childNodes;
        for(var i=0;i<child.length;i++)
            child[i].lastChild.style.fontSize = size;
    };
   
    this.data = {};
   
    this.setData = function() {
    this.data.__p = {};
        this.data.__p.name = "Tab";
        this.data.parentId = this.div.parentNode.id;
        this.data.left = this.div.offsetLeft;
        this.data.top = this.div.offsetTop;
        this.data.property = {};
        this.data.property.value = [];
        for(var i=0;i<_num;i++) {
            this.div.property.value[i] = this.div.childNodes[i].lastChild.innerText;   
        }
        this.data.property.fontSize = this.div.firstChild.lastChild.style.fontSize;
        this.data.property.width = this.div.firstChild.offsetWidth;
    };
   
    this.load = function(data) {
        var obj  = document.getElementById(data.parentId);
        var _num = data.property.value.length;
        this.create(obj);
        this.div.style.left = data.left;
        this.div.style.top = data.top;
        for(var i=0;i<_num;i++) {
            this.div.childNodes[i].lastChild.innerText = data.property.value[i];
            this.div.childNodes[i].lastChild.fontSize = data.property.fontSize;
            this.div.childNodes[i].lastChild.style.width = data.property.width;
            this.div.childNodes[i].style.width = data.property.width;   
        }
        //$self.super0.html = that.div;
    };
}

使用的modello.js包,需要配合的一些js父类已经被屏蔽,闭包未处理,使用的时候
var tab = new Tab();
tab.setNum('tab个数');
tab.Create('父节点元素');

已有 14 人发表留言，猛击->>这里<<-参与讨论


JavaEye推荐

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱

]]> Thu, 10 May 2007 13:19:27 +0800 http://gougou8180.javaeye.com/blog/78483 http://gougou8180.javaeye.com/blog/78483