javascript之通用简单的table选项卡实现(一)

 

　　鉴于UI妹妹每次交付过来的选项卡都夹带了多多少少的js，而且每遇到选项卡就加一点js，造成垃圾低劣代码逐渐堆积过多了，一直想做一个通用简洁的选项卡库。今天下班回来摆弄了下，搞定！

　　第一步：引用table.js

 <script type="text/javascript" src="table.js"> </script>

　　第二步：定义选中的样式，比如“active”，应用选项卡的块的ID，比如“sidebar”，默认被选中的序号，比如第一个“0”；

　　第三步：调用函数：

<script type="text/javascript">
    	//参数分别为：默认选择项	应用块的id	选中的样式
        table(0, "sidebar", "active")
</script>

　　一切OK，选项卡响应click事件，兼容IE和FF，等有时间了再优化，效果如下：

 

　　HTML源代码如下：

 

 

代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script type="text/javascript" src="table.js"> </script>
         <style type="text/css">
            .sidebar {
                width: 140px;
                background: #C9E4D6;
                min-height: 600px;
                float: left;
                border-left: solid 1px #C8C8C8;
            }
            
            .sidebar ul {
                list-style:none;
                text-align: left;
                padding: 20px 0px 0px 0px;
            }
            
            .sidebar ul li {
                border-bottom: 1px dotted #C8C8C8;
                font-size: 14px;
                height: 30px;
                line-height: 30px;
                padding-left: 15px;
                margin-left: 15px;
                cursor: pointer;
            }
            
            .sidebar .active {
                background: #fff;
            }
        </style>
    </head>
    <body>
        <div class="sidebar" id="sidebar">
            <ul>
                <li>
                    选项一
                </li>
                <li>
                    选项二
                </li>
                <li>
                    选项三
                </li>
                <li>
                    选项四
                </li>
                <li>
                    选项五
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        //参数分别为：默认选择项    应用块的id    选中的样式
        table(0, "sidebar", "active")
    </script>
</html>

　　DEMO下载

　　table.rar

 

　　游玩归来，继续完善我的Table选项卡

 

　　上面的代码存在如下问题：

　　1、只实现了Table的样式切换，没有实现内容的切换

　　2、同一页面如果引用多个Table就无能为力（bug）

　　小弄一下，用钩子将选项卡table和内容关联起来

 

　　效果图：

　　

　　

代码 
        <div class="sidebar" id="sidebar">
            <ul>
                <li point="table1">
                    选项一
                </li>
               <li point="table2">
                    选项二
                </li>
               <li point="table3">
                    选项三
                </li>
               <li point="table4">
                    选项四
                </li>
               <li point="table5">
                    选项五
                </li>
            </ul>
        </div>
        <div id="table1" class="content">
            这是第一个选项卡的内容
        </div>
        <div id="table2" class="content">
            这是第二个选项卡的内容
        </div>
        <div id="table3" class="content">
            这是第三个选项卡的内容
        </div>
        <div id="table4" class="content">
            这是第四个选项卡的内容
        </div>
        <div id="table5" class="content">
            这是第四个选项卡的内容
        </div>

 

 

　　

posted on 2010-05-06 22:37  唯C  阅读(1370)  评论(0)    收藏  举报

导航