推荐.NET教程： ASP.NET C# 开发环境 Ajax教程 控件开发 统计报表 数据库 Web服务 安装部署 CommunityServer NHibernate DataGrid/GridView 实用代码 VS2005
示例源码 MVC/三层 SqlHelper 入门源码 开源 CMS Ajax/Atlas C#.net 毕业设计 源码 经典代码 商业 本站作品 持久层 随书源码 WebService 英文/汉化 Asp.net2.0

阿牛·乐园

每天进步一点点
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  71 随笔 :: 14 文章 :: 378 评论 :: 13 引用
一个简单好用的JS标签(辞职当天帮同事写的东东)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    
    <style type="text/css">
        .focus
        {
            background:#ffcc00;
        }
        
        .menu
        {
            color:red;
        }
    </style>
    <script type="text/javascript">
        Evlon={};
        Evlon.createDelegate = function(instance, method)
        {
            return function()
            {
                method.apply(instance, arguments);
            }
        }
        Evlon.Tab = function(tabWnd, elmt, focusClassName, elmtContent, enableHoverSwitch)
        {
            this.tabWnd = tabWnd;
            this.elmt = elmt;
            this.focusClassName = focusClassName;
            this.content = elmtContent;
            this.enableHoverSwitch = enableHoverSwitch;
            this._timer = null;
            
            this.hide = function()
            {
                var re = new RegExp(" " + focusClassName,"ig");
                this.elmt.className = this.elmt.className.replace(re,'');
                this.content.style.display = 'none';
            }
            this.show = function()
            {
                this.elmt.className += ' ' + focusClassName;
                this.content.style.display = '';
            }
            this.menu_onclick = function()
            {
                this.menu_onmouseout();
                return this.tabWnd.switchTab(this);
            }
            
            this.menu_onmouseover = function()
            {
                window.status = new Date();
                this.menu_onmouseout();
                this._timer = window.setTimeout( Evlon.createDelegate(this.elmt, this.elmt.onclick), 1000);
            }
            this.menu_onmouseout = function()
            {
                if(this._timer)
                {
                    window.clearTimeout(this._timer);
                }
            }
            this.hide();
            this.elmt.onclick = Evlon.createDelegate(this, this.menu_onclick)
            if(this.enableHoverSwitch)
            {
                this.elmt.onmouseover =  Evlon.createDelegate(this, this.menu_onmouseover)
                
                this.elmt.onmouseout = Evlon.createDelegate(this, this.menu_onmouseout)
            }
        }
        
        Evlon.TabWnd = function(idMenu, idDiv, focusClassName, enableHoverSwitch)
        {
            var $ = document.getElementById;
            
            this._menu = $(idMenu);
            this._content = $(idDiv);
            this.tabs = [];
            this.enableHoverSwitch = false | enableHoverSwitch;
            
            this.switchTab = function(newTab)
            {
                this.current.hide();
                this.current = newTab;
                this.current.show();
            }
            
            var childrens = this._menu.children;
            var contents = this._content.children;
            if(contents.length != childrens.length)
                throw '菜单和内容数目必须一致！';
            if(childrens.length > 0)
            {
                for(var i = 0; i < childrens.length; ++i)
                {
                    var li = childrens[i];
                    this.tabs.push(new Evlon.Tab(this, li, focusClassName, contents[i], this.enableHoverSwitch));
                }
                this.current = this.tabs[0];
                this.current.show();
            }
        }
        

    </script>
</head>

<body>

<ul id="ulMenu" class="menu">
     <li><a href="#">AAAA</a></li>
     <li>BBBB</li>
     <li>CCCC</li>
     <li>dddd</li>
     
</ul>
<div id="divContent">
    <div>AAAAAAAAAA</div>
    <div>BBBBBBBBB</div>
    <div>CCCCCCCCC</div>
    <div>dddddd</div>
</div>
<ul id="ulMenu1">
     <li>AAAA</li>
     <li>BBBB</li>
     <li>CCCC</li>
     <li>dddd</li>
     
</ul>
<div id="divContent1">
    <div>AAAAAAAAAA</div>
    <div>BBBBBBBBB</div>
    <div>CCCCCCCCC</div>
    <div>dddddd</div>
</div>
<script type="text/javascript">
var tab = new Evlon.TabWnd("ulMenu","divContent","focus",true);
var tab1 = new Evlon.TabWnd("ulMenu1","divContent1","focus");
</script>
</body>
</html>
posted on 2008-03-04 09:04 阿牛 阅读(264) 评论(0)  编辑 收藏 所属分类: DHTML,JS

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

闪存

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      


相关链接:

最新IT新闻:
AMD剥离芯片制造业务 获60亿美元投资
Google向Wine贡献更多代码
苹果创始人Steve Wozniak称iPod将被淘汰
福布斯：硅谷日子将更难过 谁下一个倒下
微软老矣 尚能赚否？