我也贴一个oop的tab,圆角利用div实现

    /**
        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('父节点元素');

lz能否给一个demo？这样有一个更好的体验。

效果图贴出来看一下

这都是些什么东西啊？看的不太懂。

用一堆嵌套div来实现圆角，得不偿失，完全的无视web标准，唐突的js……

直接定义css文件 再制定格式啊 值得搞那么多的赋值吗？

这是一个组件,里面存在太多div,css用文件实现的话,可能需要的东西更多.
而且类内部对外是不可见的,对外只有一个接口
至于web规范什么的,我不懂,我只知道现在不可以用图形来做圆角,请楼上那位告诉我,还有什么方式可以实现?象dojo之类的圆角,不也这样实现的么.这样实现,网络流量比使用图片更小.

呵呵，学习了
不过看上去比用图片麻烦哦

你生成的最终html代码,到了客户端是毫无任何语义可言的……
所以说是唐突的结构，唐突的js……

因为你不懂，所以你觉得没有意义
这是一个组建，拥有自己的CRUD方法,
不仅仅是在页面显示圆角DIV，说白了
页面所有的WEB UI都是一套画图工具画出来的，而这个组件是这套画图工具中的一个图形子类