我也贴一个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都是一套画图工具画出来的，而这个组件是这套画图工具中的一个图形子类