`
gougou8180
  • 浏览: 5728 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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

OOPCSSWebDojoUI 
阅读更多
    /**
        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？这样有一个更好的体验。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    书籍：C语言实现OOP

    在书中，作者可能详细讲解了如何利用这些特性来构建类的表示，并实现继承、多态和封装等OOP核心概念。 1. **继承**：在C中，可以通过结构体嵌套和指针的方式实现类的层次结构，模拟继承。子类可以包含一个指向父类...

    C#计算器 充分利用OOP

    在这个"C#计算器"项目中，OOP技术被充分利用，展示了如何在C# WinForm应用程序中有效地组织代码并实现功能模块化。 首先，让我们深入理解一下C#中的OOP概念。OOP有四个核心原则：封装、继承、多态和抽象。封装是将...

    绝对经典 用C实现OOP

    可以定义一个函数指针类型，然后在结构体中存储这种类型的指针，使得不同的结构体实例可以通过相同的接口调用不同的实现。这被称为“虚函数”或“回调函数”。 4. 抽象：抽象在C中通常通过接口（即函数原型）来实现...

    C语言实现OOP

    即在一个结构体中包含另一个结构体的实例，从而实现部分继承的功能。 ```c typedef struct { // 基类属性 char base_attribute[50]; } Base; typedef struct { Base base; // 派生类特有的属性 int derived_...

    工业自动化 TwinCAT3 OOP编程基本例程（方法，接口，属性，实现）

    比如，你可以创建一个名为“IActuator”的接口，规定所有实现此接口的类必须包含启动、停止和状态查询等方法。这样，无论实际使用哪种类型的执行器（如电机或气缸），都可以通过统一的接口进行控制，提高了代码的...

    OOP in C（C语言实现面向对象编程）

    封装是将数据和操作数据的函数捆绑在一起形成一个类的过程，这样可以隐藏对象的内部状态和实现细节，只暴露接口。在C语言中，可以通过结构体（struct）和函数指针来实现封装。 继承（Inheritance）： 继承是基于...

    c语言实现面向对象OOP

    - `core`：可能是一个库或者核心代码的目录，包含实现OOP的关键结构和函数。 - `src`：源代码目录，存放所有的C源文件，每个文件可能对应一个类或功能模块。 - `doc`：文档目录，可能包含设计文档、API参考、用户...

    JavaOOP_第1章上机练习.zip

    Java支持单一继承，即一个子类只能有一个父类，但可以通过接口实现多重继承的效果。 3. 多态：多态是指同一种行为在不同的对象上有不同的表现形式。在Java中，多态主要通过方法重写（Override）和方法重载...

    OOP实现计算机功能

    本篇将深入探讨如何利用OOP来实现计算机的基本计算功能，我们将以一个简单的计算器为例进行详细讲解。 首先，我们来理解OOP的核心概念： 1. 类（Class）：类是对象的模板或蓝图，定义了对象的属性（数据成员）和...

    用c实现oop英文版

    我们可以利用结构体来模拟对象，其中每个结构体变量代表一个对象，结构体中的成员代表对象的属性或状态。 2. **函数指针**：C语言中的函数指针可以用来模拟方法。将函数指针作为结构体的成员，可以使得这些函数与...

    我最近所有的OOP_ASM开发，包括listview这个例子

    3. 继承：通过指针或结构嵌套来实现一个类从另一个类继承属性和行为。 4. 封装：使用汇编语言的寄存器和内存管理来隐藏对象的内部细节，只暴露必要的接口。 5. 多态性：通过函数指针或虚拟方法表实现，使得子类可以...

    在C#中实现OOP

    C# 是一个支持OOP的现代编程语言，非常适合用来实现面向对象的设计。 在C#中，对象是OOP的基础，它们包含了属性（数据）和方法（行为）。例如，我们可以创建一个名为`Car`的类来表示汽车，该类可能有`Weight`和`...

    面向对象oop详解

    多态是OOP的另一个核心特性，它允许我们通过一个接口引用多个不同的实现，即同一个行为具有多种状态。多态可以分为编译时多态和运行时多态。编译时多态是通过方法重载（overload）实现的，它依赖于参数的不同来区分...

    OOP（面向对象编程）四个基本原则

    接口分离原则主张，一个类不应该被迫实现它不使用的接口方法。将大的、宽泛的接口拆分为小而具体的接口，可以让客户端只依赖它们真正需要的方法。这样既减少了冗余，也提高了代码的可读性和可维护性。例如，通过将一...

    JAVA OOP 第一章作业

    类是OOP的基础，它是一个模板或者蓝图，定义了一组属性（数据成员）和行为（方法）。对象是类的实例，它们通过类来创建，具有类所定义的特性和功能。例如，你可以定义一个名为“Person”的类，包含属性如姓名、年龄...

    用c实现oop.PDF

    用c实现oop.PDF

    清华大学oop第一讲

    继承允许一个类（子类）继承另一个类（父类）的属性和行为，从而实现代码重用。组合是指一个类包含其他类的对象，实现更复杂结构的构建。多态性允许不同类的对象对同一消息作出不同的响应，增强了代码的灵活性。 ...

    oop（面向对象程序设计）考试题

    10. 综合应用：给出一个实际问题，要求设计并实现一个完整的OOP系统，综合运用以上知识点。 通过解答这些题目，考生不仅可以检验自己对OOP理论知识的掌握程度，还能提升实际编程能力，为未来的职业生涯打下坚实基础...

    利用PHP的OOP特性实现数据保护

    总的来说，利用PHP的OOP特性实现数据保护，可以提高代码的封装性和安全性，防止不必要的外部干扰，同时也能让代码结构更清晰，易于维护。在实际项目中，开发者应当谨慎选择合适的可见性，以确保数据的正确管理和使用...

    ACCP5.0S2教程\使用Java实现面向对象编程(Java OOP)\使用Java实现面向对象编程(Java OOP)上机贯穿案例源码

    3. **继承**：Java支持单继承，一个类可以继承另一个类的属性和方法，从而实现代码的复用。学习者会接触到extends关键字，并学习如何使用super引用父类的成员。 4. **多态**：多态允许不同的对象对同一消息作出不同...

Magicbox
Global site tag (gtag.js) - Google Analytics