我也贴一个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('父节点元素');

评论

15 楼 Leacher 2007-07-12  

VML

14 楼 hnyashiro 2007-07-10  

以增加DOM对象的数量及控制来换取一个小的效果，不划算！

13 楼 hax 2007-07-10  

良好的结构和语义对于web来说就是绝对的。

或者至少应抱有这样的态度来做事。

在实践中，我会使用一些trick，但限度是：

仅仅用于某些不完善的user agent上的patch。

换言之，如果我要做圆角，那首先我要确保，理解以css来圆角的新的好的browser上能以正确的方式实现。然后老的浏览器有一个方式来patch。在这个patch过程中，我会尽量避免改变dom。

12 楼 zj1211 2007-07-10  

看了一下代码，也并非没有可取之处。　常言道尽信书不如无书。良好的结构和语义也不是绝对的，Java再优雅，JDK不也要带上一些exe, dll吗，高级语言里不也有嵌入汇编吗。　我的理解是，只有它对外的接口是具有良好的结构就可以了，你管它内部是怎么实现的。高档的真皮沙发难道你要求里面的填充物也是真皮？

11 楼 gougou8180 2007-06-20  

- -!
楼上的
我的是用css实现的,你...

10 楼 netfishx 2007-06-18  

gougou8180 写道

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

这么多人说了这么半天，你还是不明白为什么批评你。

之所以要用css来实现圆角而不是图片，目的在于良好的结构和语义，说白了就是为了好维护，而不仅仅是那一点点流量的问题。这时候你再来看看你这堆东西，毫无价值。

9 楼 gougou8180 2007-06-18  

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

8 楼 笨笨狗 2007-06-17  

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

7 楼 simon1118 2007-06-15  

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

6 楼 gougou8180 2007-05-31  

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

5 楼 blackbat 2007-05-19  

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

4 楼 笨笨狗 2007-05-18  

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

3 楼 zlkn2005 2007-05-18  

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

2 楼 linginfanta 2007-05-10  

效果图贴出来看一下

1 楼 hgq0011 2007-05-10  

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