`

JS选项卡控件

体育AjaxIDEA 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title>井底的蛙</title>  
<script type="text/javascript">  
/* 
    选项卡封装 
    by 井底的蛙 
    2008-2-4 
*/ 
opCard = function()  
{  
    this.bind = new Array();  
    this.index = 0;     //默认显示哪个选项卡，从0开始  
      
    this.style = new Array();       //["","",""]  
    this.overStyle = false;     //选项是否有over, out变换样式事件，样式为this.style[2]  
    this.overChange = false;        //内容是否用over, out直接激活  
    this.menu = false;              //菜单类型  
    this.nesting = [false,false,"",""];     //是否嵌套，后面2个参数是指定menu,info的子集深度所用id  
      
    this.auto = [false, 1000];      //自动滚动[true,2000]  
    this.timerID = null;            //自动播放的  
    this.menutimerID = null;        //菜单延时的  
      
    this.creat = function(func)  
    {  
        var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);  
        var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);  
        var my = this, i;  
        var argLen = arguments.length;  
        var arrM = new Array();  
          
        if(this.nesting[0] || this.nesting[1])  // 有选项卡嵌套  
        {   // 过滤出需要的数据  
            var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;  
            var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;  
        }  
        else 
        {  
            var arrMenu = _arrMenu;  
            var arrInfo = _arrInfo;  
        }  
          
        var l = arrMenu.length;  
        if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要，你可以放一个空的在那占位。")}  
          
        // 修正  
        if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活  
          
        // 循环添加各个事件等  
        for(i=0;i<l;i++)  
        {  
            arrMenu[i].cName = arrMenu[i].className;  
            arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);      //加载样式，菜单的话统一样式  
              
            if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器  
            {  
                if(this.overStyle || this.overChange)   // 有over, out 改变样式 或者 激活  
                {  
                    arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}  
                    arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}  
                }  
                arrMenu[i].onclick = function(){if(argLen==1){func()}}  
                arrInfo[i].style.display = "none";  
                continue;  
            }  
              
            if(i!=this.index || this.menu){arrInfo[i].style.display="none"};    //隐藏初始化，菜单的话全部隐藏  
            arrMenu[i].index = i;   //记录自己激活值[序号]  
            arrInfo[i].index = i;  
              
              
            if(this.overChange) //有鼠标over, out事件  
            {  
                arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}  
                arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}  
            }  
            else    //onclick触发  
            {  
                arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}  
                if(this.overStyle)  // 有over, out 改变样式  
                {  
                    arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}  
                    arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}  
                }  
                else    // 没有over, out 改变样式  
                {  
                    if(this.auto[0])    // 有自动运行  
                    {  
                        arrMenu[i].onmouseover = function(){autoStop(this, 0);}  
                        arrMenu[i].onmouseout = function(){autoStop(this, 1);}  
                    }  
                }  
            }  
              
            if(this.auto[0] || this.menu)   //arrinfo 控制自动播放  
            {  
                arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}  
                arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}  
            }  
        }   //for结束  
          
        if(this.auto[0])  
        {  
            this.timerID = setTimeout(autoMove,this.auto[1])  
        }  
          
        // 自动播放  
        function autoMove()  
        {  
            var n;  
            n = my.index + 1;  
            if(n==l){n=0};  
            while(arrMenu[n].getAttribute("skip"))      // 需要跳过的容器  
            {  
                n += 1;  
                if(n==l){n=0};  
            }  
            changeOption(arrMenu[n]);  
            my.timerID = setTimeout(autoMove,my.auto[1]);  
        }  
          
        // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!!  
        function autoStop(obj, num)  
        {  
            if(!my.auto[0]){return;}  
            //if(obj.index==my.index)  
            num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);  
        }  
          
        // 改变选项卡  
        function changeOption(obj)  
        {  
            arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);  //修改旧内容  
            arrInfo[my.index].style.display = "none";   //隐藏旧内容  
              
            obj.className = getClass(obj,my.style[1]);      //修改为新样式  
            arrInfo[obj.index].style.display = "";  //显示新内容  
              
            my.index = obj.index;   //更新当前选择的index  
        }  
          
        /*       
            只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活 
            obj：目标对象。   num：1为over，0为out 
        */ 
        function changeTitle(obj, num)  
        {  
            if(!my.overStyle){return;};  
            if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}  
        }  
          
        /*       
            菜单类型时用 
            obj：目标对象。   num：1为over，0为out 
        */ 
        function changeMenu(num)  
        {  
            if(!my.menu){return;}  
            num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)  
        }  
          
        //关闭菜单  
        function menuClose()  
        {  
            arrInfo[my.index].style.display = "none";  
            arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);  
        }  
          
        // 得到className（防止将原有样式覆盖）  
        function getClass(o, s)  
        {  
            if(o.cName==""){return s}  
            else{return o.cName + " " + s}  
        }  
          
        //嵌套情况下得到真正的子集  
        function getChilds(arrObj, id, num)  
        {  
            var depth = 0;  
            var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);      //得到第一个子集  
            do  //计算深度  
            {  
                if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}  
                firstObj = firstObj.parentNode;  
            }  
            while(firstObj.tagName.toLowerCase()!="body")   // body强制退出。  
              
            var t;  
            var arr = new Array();  
            for(i=0;i<arrObj.length;i++) //过滤出需要的数据  
            {  
                t = arrObj[i], d = 0;  
                do 
                {  
                    if(t.parentNode.getAttribute("id")==id && d == depth)  
                    {     
                        arr.push(arrObj[i]);break;      //得到数据  
                    }  
                    else 
                    {  
                        if(d==depth){break};d+=1;  
                    }  
                    t = t.parentNode;  
                }  
                while(t.tagName.toLowerCase()!="body")  // body强制退出  
            }  
            return arr;  
        }  
    }  
}  
window.onload = function()  
{  
    var aa = new opCard();  
    aa.bind = ["a1","div","b1","div"];  
    aa.style = ["a1_0","a1_1","a1_0"];  
    aa.index = 0;  
    aa.nesting = [false,true,"",""]  
    aa.creat();  
    aa =null;  
      
    // 默认的onclick中，第一个例子  
    var bba = new opCard();  
    bba.bind = ["a2","li","b2","div"];  
    bba.style = ["style1","style2","style3"];  
    bba.overStyle = true;  
    bba.creat();  
    bba = null;  
      
    // 默认的onclick中，第二个例子  
    var bbb = new opCard();  
    bbb.bind = ["a3","li","b3","div"];  
    bbb.style = ["style1","style2","style3"];  
    bbb.overStyle = true;  
    bbb.creat();  
    bbb = null;  
      
    // onmousover触发中的例子  
    var cc = new opCard();  
    cc.bind = ["a4","li","b4","div"];  
    cc.style = ["style1","style2","style3"];  
    cc.overStyle = true;  
    cc.overChange = true;  
    cc.creat();  
    cc = null;  
      
    //自动播放auto第一个例子  
    var dd = new opCard();  
    dd.bind = ["a5","li","b5","div"];  
    dd.style = ["style1","style2","style3"];  
    dd.auto = [true, 3000];  
    dd.creat();  
    dd = null;  
      
    //自动播放auto第二个例子  
    var ee = new opCard();  
    ee.bind = ["a6","li","b6","div"];  
    ee.style = ["style1","style2","style3"];  
    ee.auto = [true, 2000];  
    ee.overChange = true;  
    ee.creat();  
    ee = null;  
      
    //自动播放auto第三个例子  
    var ff = new opCard();  
    ff.bind = ["a7","li","b7","div"];  
    ff.style = ["style1","style2","style3"];  
    ff.auto = [true, 1000];  
    ff.overChange = true;  
    ff.overStyle = true;  
    ff.creat();  
    ff = null;  
      
    //菜单导航例子  
    var gg = new opCard();  
    gg.bind = ["a8","li","b8","div"];  
    gg.style = ["style1","style2","style3"];  
    gg.overStyle = true;  
    gg.menu = true;  
    gg.creat();  
    gg = null;  
      
    //其他应用  
    var hh = new opCard();  
    hh.bind = ["a9","li","a9","li"];  
    hh.style = ["style4","style4","style4"];  
    //hh.overStyle = true;  
    hh.auto = [true, 1000];  
    hh.creat();  
    hh = null;  
}  
</script>  
<style type="text/css">  
body{font-size:12px; font-family:Verdana,"宋体";}  
p,ul{margin:0px; padding:0px;}  
td,div{font-size:12px}  
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}  
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}  
.test{text-decoration:underline;}  
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}  
#b1 div.s strong{color:#0066FF;}  
/* */ 
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}  
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}  
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}  
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}  
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}  
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}  
#b8 div a{margin-right:20px;}  
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}  
</style>  
</head>  
<body>  
<table width="100%" border="0" cellspacing="0" cellpadding="0">  
  <tr>  
    <td id="a1" width="140" valign="top" align="center">  
        <div class="test">简单介绍</div>  
        <div class="test">默认的onclick</div>  
        <div class="test">onmousover触发</div>  
        <div class="test">自动播放auto</div>  
        <div class="test">菜单导航</div>  
        <div class="test">关于嵌套</div>  
        <div class="test">其他应用</div>  
        <div class="test">一些说明</div>  
        <div class="test">&nbsp;</div>  
        <div class="test">&nbsp;</div>  
        <div class="test">&nbsp;</div>  
        <div class="test">&nbsp;</div>  
    </td>  
    <td id="b1" valign="top">  
        <div class="s">  
            封装了一个选项卡，不过已经不像选项卡了-_-!!!<br><br>  
            现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些<br><br>  
            <p>  
            <strong>obj.bind = ["a1","td","b1","div"];</strong><br>  
            绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？<br>  
            td标签的数量和div标签的数量必须相同<br>  
            （若不需要显示内容，只显示菜单话，可以这个在td标签上加&lt;td skip="true"&gt;）<br>  
            如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting<br><br>  
              
            <strong>obj.nesting = [false,true,"",""];</strong><br>  
            当标签tag有嵌套时，需要用到这个<br>  
            比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到<br>  
            菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了<br>  
            判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断<br>  
            但有些情况下，这样还是不行<br>  
            我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];<br>  
            这样就肯定不会错了（不明白的话看下例子就简单多了）<br><br>  
              
            <strong>obj.index = 0;</strong><br>  
            默认显示第几个选项卡，序号从0开始<br><br>  
              
            <strong>obj.style = ["c1","c2","c3"]</strong><br>  
            菜单加载的样式的className：<br>  
            菜单未选中的className是c1<br>  
            菜单选中的className是c2<br>  
            菜单onmouseover的className是c3<br><br>  
              
            <strong>obj.overStyle = false;</strong><br>  
            选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2]<br><br>  
              
            <strong>obj.overChange = false;</strong><br>  
            选项卡内容是否用onmouseover, onmouseout直接激活<br><br>  
              
            <strong>obj.menu = false;</strong><br>  
            选项卡是菜单类型<br><br>  
            <strong>obj.auto = [false, 1000];</strong><br>  
            选项卡是否自动播放，播放速度（毫秒）<br><br>  
              
            <strong>obj.creat();</strong><br>  
            开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)<br>  
            所有的都会触发  
            </p>  
        </div>  
        <div class="s">  
        <!--默认的onclick中，第一个例子-->  
          <div id="a2">  
            <ul>  
              <li>1</li>  
              <li>2</li>  
              <li>3</li>  
              <li>4</li>  
            </ul>  
          </div>  
          <div id="b2">  
            <div>这个例子是用onclick触发的<br>并设置overStyle = true;<br>(over，out改变样式,但不激活)</div>  
            <div>  
                var bba = new opCard();<br>  
                bba.bind = ["a2","li","b2","div"];<br>  
                bba.style = ["style1","style2","style1"];<br>  
                bba.overStyle = true;<br>  
                bba.creat();<br>  
                bba = null;  
            </div>  
            <div>33333</div>  
            <div>4444444</div>  
          </div><br>  
        <!--默认的onclick中，第二个例子-->  
          <div id="a3">  
            <ul>  
              <li>1</li>  
              <li>2</li>  
              <li>3</li>  
              <li skip="true">4</li>  
            </ul>  
          </div>  
          <div id="b3">  
            <div>  
                这个例子是比上面增加skip="true"<br>即&lt;li skip="true"&gt;4&lt;/li&gt;<br>所以选项卡4是没有内容的<br>  
                你可以为选项卡的文字直接加上链接，我这里就不加了  
            </div>  
            <div>222222</div>  
            <div>33333</div>  
            <div>4444444</div>  
          </div>  
        </div>  
        <div class="s">  
        <!--onmousover触发中的例子-->  
          <div id="a4">  
            <ul>  
              <li>1</li>  
              <li>2</li>  
              <li skip="true">3</li>  
              <li>4</li>  
            </ul>  
          </div>  
          <div id="b4">  
            <div>这个例子是用onmouseover触发的<br>(over，out直接激活)<br>并且&lt;li skip="true"&gt;3&lt;/li&gt;[选项卡3不会被激活]<br>overStyle = true;</div>  
            <div>  
                var cc = new opCard();<br>  
                cc.bind = ["a4","li","b4","div"];<br>  
                cc.style = ["style1","style2","style1"];<br>  
                cc.overStyle = true;<br>  
                cc.overChange = true;<br>  
                cc.creat();<br>  
                cc = null;  
            </div>  
            <div>33333</div>  
            <div>4444444</div>  
          </div>  
        </div>  
        <div class="s">  
        <!--自动播放auto第一个例子-->  
          <div id="a5">  
            <ul>  
              <li>1</li>  
              <li>2</li>  
              <li>3</li>  
              <li>4</li>  
            </ul>  
          </div>  
          <div id="b5">  
            <div>1111111<br>我每3秒切换一个选项卡</div>  
            <div>  
                var ee = new opCard();<br>  
                ee.bind = ["a6","li","b6","div"];<br>  
                ee.style = ["style1","style2","style1"];<br>  
                ee.auto = [true, 2000];<br>  
                ee.overChange = true;<br>  
                ee.creat();<br>  
                ee = null;  
            </div>  
            <div>33333<br>我每3秒切换一个选项卡</div>  
            <div>4444444<br>我每3秒切换一个选项卡</div>  
          </div>  
          <div>注：<strong>鼠标在选项卡任意位置都会使停止播放</strong><br><br>下面这个结合overChange一起</div>  
          <!--自动播放auto第二个例子-->  
          <div id="a6">  
            <ul>  
              <li>1</li>  
              <li>2</li>  
              <li>3</li>  
              <li>4</li>  
            </ul>  
          </div>  
          <div id="b6">  
            <div>1111111<br>我每2秒切换一个选项卡</div>  
            <div>  
                var dd = new opCard();<br>  
                dd.bind = ["a5","li","b5","div"];<br>  
                dd.style = ["style1","style2","style1"];<br>  
                dd.auto = [true, 3000];<br>  
                dd.creat();<br>  
                dd = null;<br>  
            </div>  
            <div>33333<br>我每2秒切换一个选项卡</div>  
            <div>4444444<br>我每2秒切换一个选项卡</div>  
          </div>  
          <div><br>下面这个再来个&lt;li skip="true"&gt;3&lt;/li&gt;，且overStyle=true;</div>  
          <!--自动播放auto第三个例子-->  
          <div id="a7">  
            <ul>  
              <li>1</li>  
              <li>2</li>  
              <li skip="true">3</li>  
              <li>4</li>  
            </ul>  
          </div>  
          <div id="b7">  
            <div>1111111<br>我每1秒切换一个选项卡</div>  
            <div>  
                var ff = new opCard();<br>  
                ff.bind = ["a7","li","b7","div"];<br>  
                ff.style = ["style1","style2","style1"];<br>  
                ff.auto = [true, 1000];<br>  
                ff.overChange = true;<br>  
                ff.overStyle = true;<br>  
                ff.creat();<br>  
                ff = null;  
            </div>  
            <div>33333<br>我每1秒切换一个选项卡</div>  
            <div>4444444<br>我每1秒切换一个选项卡</div>  
          </div>  
        </div>  
        <!--菜单导航的例子-->  
        <div class="s">  
          <div id="a8">  
            <ul>  
              <li skip="true">首页</li>  
              <li>新闻</li>  
              <li>论坛</li>  
              <li skip="true">联系我们</li>  
            </ul>  
          </div>  
          <div id="b8">  
            <div></div>  
            <div><a href="#">国内新闻</a><a href="#">国际新闻</a><a href="#">娱乐新闻</a><a href="#">体育新闻</a></div>  
            <div><a href="#">蓝色理想</a><a href="#">blue idea</a></div>  
            <div></div>  
          </div>  
          <div><strong>注：菜单延时一秒关闭</strong><br>这里只是演示，实际可以设置下position什么的。-o-<br>多级菜单不知道能不能支持，没试过</div>  
        </div>  
        <div class="s">  
            我见过的许多选项卡都不能用来嵌套<br>但还是有些时候会用到的<br>  
            所以如您所见，这个演示本身就是一个嵌套，效果还不错  
        </div>  
        <!--其他应用-->  
        <div class="s">  
            比如图片切换什么，不过我太懒了，不写了。。。<br>  
            这个能干什么，我也不知道。。  
            <div id="a9">  
              <li>新年好啊</li>  
              <li>快过年了</li>  
              <li>天好冷啊</li>  
              <li>大家去抢红包吧</li>  
              <li>红包~！红包~！你在哪里啊？</li>  
            </div>              
              
        </div>  
        <div class="s">  
            选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错<br>即使选项卡菜单skip="true"，内容也要放一个空的标签占位<br>  
            其他好像暂时没发现什么<br><br>  
            本来打算加入ajax的，但有些还没想好。<br>  
            效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错<br><br>  
            写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异<br>  
            本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。<br><br>  
              
            哦，还有选项卡是附加样式，不会取消原本设置的样式<br>  
            如左边的下划线是原有的样式  
        </div>  
        <div class="s">啥都没有1</div>  
        <div class="s">啥都没有2</div>  
        <div class="s">啥都没有3</div>  
        <div class="s">啥都没有4</div>  
    </td>  
  </tr>  
</table>  
</body>  
</html> 
分享到：
| 网站配色方案
评论
发表评论

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

相关推荐

    各式javascript选项卡控件

    JavaScript选项卡控件是网页设计中常用的一种交互元素，它能有效地组织和展示大量内容，提高用户界面的可读性和易用性。本资源集合包含了数年间的十几款JavaScript实现的选项卡控件，每一种都有其独特的特性和设计...

    javascript开发的实用页面选项卡控件

    本主题聚焦于一个常见的、实用的页面组件——JavaScript选项卡控件。选项卡控件是网页设计中用于组织和展示大量信息的常用工具，它通过将内容分组到不同的标签页中，使得用户可以方便地切换和浏览各个部分，同时保持...

    js选项卡（。net可用）

    JavaScript选项卡是一种常见的网页交互元素，它允许用户在有限的空间内切换不同...通过研究这些文件，开发者可以快速理解和应用这个轻量级的js选项卡控件。如果有需要，还可以进一步优化和扩展，以满足特定项目的需求。

    asp.net选项卡控件代码

    首先，我们来看一下给定文件中的部分代码，这是用HTML和JavaScript实现的一个简单的选项卡控件： ```html &lt;!DOCTYPE ...

    dhtmlxTabbar选项卡控件

    总之，dhtmlxTabbar是一款强大的JavaScript选项卡控件，通过其丰富的功能和简单易用的API，可以快速构建出高效、美观的多页面应用。结合其详尽的文档和示例，开发者可以轻松地将其集成到自己的项目中，提升Web应用的...

    自动切换选项卡控件（2009）

    在IT界，选项卡控件是一种常见的用户界面元素，它被广泛应用于各种应用程序和网站设计中，以提高用户体验和界面的可读性。"自动切换选项卡控件（2009）"是一个专为2009年设计的特定功能组件，其核心在于能够自动在多...

    Tab选项卡控件及Demo源码.zip

    在IT领域，Tab选项卡控件是一种常见的用户界面元素，广泛应用于各种软件、网页和移动应用中。这种控件能够帮助用户组织和切换不同的视图或功能区域，从而提高交互性和用户体验。本压缩包“Tab选项卡控件及Demo源码....

    html网页版的选项卡控件tab.zip

    在“html网页版的选项卡控件tab.zip”压缩包中，包含了一系列资源，如CSS样式表、HTML文件、JavaScript库以及一个原理图，这些都是构建和实现选项卡功能所必需的。 首先，`style.css`文件提供了页面的基本样式，...

    ASP.NET源码——Tab选项卡控件及Demo源码.zip

    在这个“ASP.NET源码——Tab选项卡控件及Demo源码.zip”压缩包中，我们找到了一个关于Tab选项卡控件的实现及其示例代码，这对于开发者来说是一个宝贵的资源，特别是那些正在学习或工作中需要处理用户界面（UI）布局...

    Tab选项卡控件及Demo源码

    在IT领域，尤其是在Web开发中，`Tab`选项卡控件是一种常见的用户界面元素，它允许用户在不同的视图或内容之间切换，而无需实际跳转到新的页面。这种控件提高了网页或应用的可用性和可读性，因为它有效地组织了大量...

    ASP.NET-[其他类别]Tab选项卡控件及Demo源码.zip

    在ASP.NET中，我们可以使用各种控件来构建用户界面，其中Tab选项卡控件是一种常见且实用的元素，用于在单一页面上组织和展示多个相关的但独立的信息区域，提升用户体验。 在"ASP.NET-[其他类别]Tab选项卡控件及Demo...

    Tab选项卡控件及Demo源码_aspx开发教程.rar

    在ASP.NET Web应用程序开发中，Tab选项卡控件是一种常用的设计元素，用于组织和展示大量内容，使得用户界面更加简洁、易用。本教程将深入探讨Tab控件的使用，并提供一个名为"tabdemo"的Demo源码，帮助开发者更好地...

    [其他类别]Tab选项卡控件及Demo源码_tabdemo（ASP.NET源码）.rar

    在这里，它包含了与Tab选项卡控件相关的源代码，可能包括.aspx页面、.cs后台代码文件、CSS样式表、JavaScript脚本文件等，开发者可以通过解压并查看这些文件来学习和实践ASP.NET中的选项卡控件实现。 【标签】中的...

    .net，实现选项卡单独实例

    在这个实例中，`div`和`css`被用来创建和样式化选项卡结构，而`javascript`则负责处理用户交互，如点击选项卡时切换显示的内容。 在实现选项卡单独实例的过程中，通常会涉及以下几个关键知识点： 1. **HTML 结构**...

    IE 选项卡 浏览控件

    【IE选项卡浏览控件】是一种特殊的用户界面组件，它在单个窗口内模拟了Internet Explorer浏览器的选项卡功能，允许用户在同一应用程序中同时打开和切换多个网页。这种控件通常用于开发桌面应用，比如软件、工具或者...

    用asp.net css js实现选项卡的效果

    例如，你可以使用ASP.NET控件如`Repeater`或`ListView`来动态生成选项卡，或者在切换选项卡时异步加载相应的内容。 5. **优化与兼容性**：为了确保选项卡在不同浏览器和设备上都能正常工作，需要对代码进行兼容性和...

    jquery+css3实现选项卡插件下载

    在网页设计中，交互性和用户体验是至关重要的因素之一，而选项卡是一种常见且实用的界面元素，能够有效地组织和展示大量信息。本资源提供的是一个使用jQuery和CSS3技术实现的选项卡插件，适用于那些希望提升网站或...

    asp.net选项卡

    ASP.NET选项卡控件是一种常见的用户界面元素，用于在单个视图中组织大量内容，让用户可以方便地在多个页面或部分之间切换，而无需实际加载新的页面。这些控件通常用于网页设计，以提高用户体验，减少页面滚动，并...

    js+.net实现选项卡

    在实现选项卡功能时，JS主要负责以下几个关键点： 1. **DOM操作**：通过Document Object Model (DOM) API，JS可以获取、修改和创建HTML元素。在选项卡设计中，我们通常会有一个包含多个标签页的容器，每个标签页...

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