`
micrexp
  • 浏览: 12286 次
  • 来自: ...
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

刚刚看了一个XD写的TAB页,顺便发一个我写的

阅读更多
顺便贴一个我写的

代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head>  
    <title>Untitled Page</title>  
    <link type="text/css" href="gridstyle.css" rel="StyleSheet"/>  
    <script language="javascript" type="text/javascript">  
        var HK_TabItem = function(){   
            this.tabControl = null;   
            var button = document.createElement("div");              
            var items = new Array();   
            var active = false;   
            this.appendItem = function(value){   
                items[items.length] = value;   
                valuevalue.oldVisible = value.style.display;   
                value.style.display = "none";   
            }   
            this.getElement = function(){   
                return button;   
            }   
            this.setCaption = function(value){   
                button.innerText = value;   
            }   
            this.setActive = function(){   
                if(active){return};   
                button.className = "tab_tabbuttonactive";   
                this.tabControl.setActiveTab(this);   
                for(var i=0;i<items.length;i++){   
                    items[i].style.display = items[i].oldVisible;   
                }   
                active = true;   
            }   
            this.deActive = function(){   
                button.className = "tab_tabbutton";   
                for(var i=0;i<items.length;i++){   
                    items[i].style.display = "none";   
                }   
                active = false;   
            }   
            function onClick(){   
                button.tab.setActive();   
            }   
            button.attachEvent("onclick",onClick);   
            button.className = "tab_tabbutton";   
            button.tab = this;   
        }   
        var HK_TabControl = function(){   
            var activeTab = null;   
            var banner =document.createElement("div");   
            var head = document.createElement("div");   
            var line = document.createElement("div");   
            var tab = document.createElement("div");   
            var padding = document.createElement("div");   
            banner.className = "tab_banner";   
            head.className = "tab_head";   
            line.className = "tab_line";   
            padding.className = "tab_padding";   
            line.innerHTML = " ";   
            tab.appendChild(banner);   
            tab.appendChild(line);   
            banner.appendChild(head);               
            this.tabs = new Array();   
            this.setActiveTab = function(value){   
                if(activeTab!=null){   
                    activeTab.deActive();   
                }                
                activeTab = value;      
            }   
            this.getActiveTab = function(){   
                return activeTab;   
            }   
            this.appendTab = function(){   
                var tab = new HK_TabItem();   
                banner.appendChild(tab.getElement());   
                tab.tabControl = this;   
                return tab;   
            }   
            this.parent = null;     
            this.init = function(){   
                this.parent.appendChild(tab);   
                banner.appendChild(padding);   
                padding.style.pixelWidth = banner.offsetWidth - padding.offsetLeft-2;   
            }             
        }   
    </script>  
</head>  
<body>  
<div id="test"></div>  
    <div id="test1" style="width: 100px; height: 100px">  
        <input id="Button1" type="button" value="button" />  
        asdfasdf</div>  
    <div id="test2" style="width: 100px; height: 100px">  
        asdfasdf<input id="Text1" type="text" /></div>  
    <div id="test3" style="width: 100px; height: 100px">  
        <input id="Checkbox1" type="checkbox" />asdfasdf</div>  
    <div id="test4" style="width: 100px; height: 100px">  
        asdfasdf<input id="Hidden1" type="hidden" /></div>  
        <script>  
            var tabcontrol = new HK_TabControl();   
            var tab = tabcontrol.appendTab();       
            tab.setCaption("test1");   
            tab.appendItem(document.getElementById("test1"));                     
            var tab = tabcontrol.appendTab();       
            tab.setCaption("test2");   
            tab.appendItem(document.getElementById("test2"));        
            var tab = tabcontrol.appendTab();       
            tab.setCaption("test3");   
            tab.appendItem(document.getElementById("test3"));        
            var tab = tabcontrol.appendTab();       
            tab.setCaption("test4");   
            tab.appendItem(document.getElementById("test4"));        
            tab.setActive();               
            tabcontrol.parent = document.getElementById("test");   
            tabcontrol.init();   
        </script>  
  
</body>  
</html>  
  
css:   
  
tab_tabbuttonactive   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    background-color: #cde6f8;   
    border-width:1px;   
    border-top:solid 1px #336699;   
    border-left:solid 1px #336699;   
    border-right:solid 1px #336699;   
    display:inline;   
    float:left;     
    height:26px;   
    width:80px;   
    text-align:center;   
    vertical-align:middle;   
    line-height:2;   
}   
.tab_padding   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    border-bottom:solid 1px #336699;    
    border-width:1px;   
    background-color: #98b1c4;    
    display:inline;   
    float:left;     
    height:27px;   
}   
.tab_tabbutton   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    border-bottom:solid 1px #336699;    
    border-width:1px;   
    background-color: #98b1c4;    
    display:inline;   
    float:left;     
    height:26px;   
    width:80px;   
    text-align:center;   
    vertical-align:middle;   
    line-height:2;   
}   
.tab_banner   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    background-color: #98b1c4;    
    height:27px;     
}   
.tab_head   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    border-bottom:solid 1px #336699;    
    border-width:1px;   
    background-color: #98b1c4;    
    display:inline;   
    float:left;     
    width:12px;   
    height:27px;   
}   
.tab_line   
{   
    background-color:#cde6f8;   
    line-height: 6px;   
}   

[img ][/img]
  • Script.rar (1.7 KB)
  • 描述: 目前还不支持FF等其它内核的兼容性
  • 下载次数: 189
  • 描述: 图片
  • 大小: 6.7 KB
分享到:
评论
2 楼 knight 2007-05-09  
同意ls的意见,最好截图 + 源码压缩包
1 楼 过儿oO 2007-05-09  
最好来个截图啊

相关推荐

    Template - Glyph - Tab Bar.xd

    XD Tab Bar组件资源

    如何使用BADI对XD01/XD02/XD03进行附加屏幕,字段的增强

    使用 BADI 对 XD01/XD02/XD03 进行附加屏幕,字段的增强是一个非常有用的功能,它可以满足用户的个性化需求,并提高用户体验。但是,我们需要遵守 SAP 的开发标准和命名惯例,以确保我们的 BADI 实现能够与标准系统...

    101xD 3.0_101xD3.0_xd101_101xD3.0.rar_trickdk1_

    【标题】"101xD 3.0_101xD3.0_xd101_101xD3.0.rar_trickdk1_" 提供的信息表明这是一个关于软件或游戏模组的更新包,名为“101xD 3.0”,可能是一个连续版本号的升级,其中“xd101”可能是该版本的一个特定标识或特征...

    阿里设计规范AntDesign官方组件包XD.rar

    阿里设计规范AntDesign官方组件包XD是一个专门为 XD(Adobe Experience Design)用户提供的设计资源集合,旨在帮助设计师高效、一致地创建符合阿里巴巴集团UI标准的产品界面。AntDesign 是阿里巴巴开源的一套基于...

    300+移动端APP(整套简约APP手机移动端UI界面UX交互设计作品集XD分层素材模板xd).zip

    0101启动页模板.xd 0102音乐播放器_XD中文网94xy.com.xd 0103机票界面模板_XD中文网94xy.com.xd 0104信用卡支付界面.xd 0105Adobe Max演讲--冲浪APP .xd 0106UPS物流APP_UI_XD中文网94xy.com.xd 0108虚构应用程序.xd...

    80个高品质UI设计组件 Adobe XD

    标题“80个高品质UI设计组件 Adobe XD”所指的是一个资源集合,其中包含80个专门针对Adobe XD设计的高质量UI组件。这些组件可以帮助设计师加速设计过程,提升设计一致性,同时保证设计质量。 UI设计组件是预构建的...

    一套XD的设计素材

    一套XD的设计素材,蓝色效果,供大家设计参考使用,有需要的可以下载。

    XD ios 11的元件库

    同时, XD也提供了协作功能,允许团队成员共同编辑同一个项目,促进更高效的协作流程。 总之,"XD iOS 11的元件库"是iOS应用设计者的重要工具,它能够帮助设计师快速创建符合iOS 11设计规范的界面,提升设计质量和...

    tab选项后台管理界面设计

    "tab选项后台管理界面设计"这个主题,聚焦于如何构建一个具有可生成和删除功能的选项卡系统,为后台操作提供便捷的导航和组织结构。选项卡设计在用户界面(UI)中扮演着重要角色,它允许用户在多个视图或功能之间...

    dell r730xd 调速工具

    1. **dell_fans_controller_v1.0.0**:这是一个Dell风扇控制器软件的早期版本,专为R730xd设计。它允许管理员通过用户友好的界面调整服务器内各风扇的速度,根据实际工作负载和环境条件优化散热性能。此工具可能包括...

    美食订餐APP(整套简约APP手机移动端UI界面UX交互设计作品集XD分层素材模板xd).zip

    Home Kitchen_UI KIT.xd png icon png Shshi Restaurant.xd Dark_Version.xd Light_Version.xd Preview.jpg food_deliver_app.xd png 5 FOODE UI KIT.xd png Food-Delivery.xd png 绿色美食 HaCOOK (XD).xd png 美食...

    摩托罗拉 建武 八重洲系列写频软件合集.zip

    总的来说,这个压缩包文件提供了一个完整的摩托罗拉建武和八重洲系列对讲机写频解决方案,对于拥有这些设备的用户来说,它是一个不可或缺的工具集合,能够帮助用户充分利用其对讲机的功能,提高工作效率和通信质量。...

    HACMP/XD配置

    对于希望提升IT基础设施可靠性的组织而言,HACMP/XD提供了一个强大而灵活的解决方案。 --- 请注意,虽然本文提供了HACMP/XD实施的基本框架和关键步骤,但在实际操作过程中,还应参考IBM官方文档或寻求专业技术人员...

    STM32L151xD-152xD DS

    - **定时器**:共有 11 个定时器,包括一个 32 位通用定时器、六个 16 位通用定时器、两个 16 位基本定时器、两个独立和窗口型看门狗定时器。 - **通信接口**:支持多种串行通信协议: - 最多两个 I2C 接口(兼容 ...

    企业微信UI设计XD版本weui_for_work.zip

    企业微信UI设计XD版本"weui_for_work.zip"是一个包含企业微信用户界面设计资源的压缩包,主要用于帮助企业或设计师快速创建符合企业微信风格的界面。这个压缩包中的核心文件是"WeUI for Work.sketch",这是一款基于...

    XD-定位控制

    《XD系列可编程控制器用户手册(定位控制篇)》是一本深入探讨XD系列PLC(可编程逻辑控制器)在定位控制应用方面的专业指南。该手册详细介绍了如何利用XD系列控制器实现精准、高效的定位操作,是工程师们进行自动化...

    戴尔720xd风扇调速指令

    戴尔720xd风扇调速指令

    XD-藏书馆手机界面设计.zip

    本项目“XD-藏书馆手机界面设计”聚焦于为用户提供一个优雅、易用且功能丰富的数字阅读平台,旨在将传统的藏书馆体验与现代科技相结合,打造一个全新的移动端阅读空间。 XD(Adobe Experience Design)是Adobe公司...

    TMS320F2837xD技术参考手册-中文Chinese(上)

    TMS320F2837xD技术参考手册-第1-2章:c28x处理器与系统控制 TMS320F2837xD技术参考手册-第3-4章:ROM代码及外设启动与直接内存访问(DMA) TMS320F2837xD技术参考手册-第5-6章:控制率加速器(CLA) TMS320F2837xD...

    xinjie plc_modbus_信捷_信捷XC与XD通讯_XCMODBUS_信捷PLC通讯_

    1. **主站(Master)与从站(Slave)**:在MODBUS网络中,有一个主站负责发起通信请求,而多个从站响应这些请求。在信捷PLC应用中,PLC可以作为主站或者从站,取决于其在整个系统中的角色。 2. **功能码(Function ...

Global site tag (gtag.js) - Google Analytics