怎么在asp.net 中使用 winform 的 TabControl 控件

怎么在asp.net 中使用 winform 的 TabControl 控件

解决方案 »

  1.   

    手写一个TabControl 
    <!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>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    <title>简洁Tab</title>
    <style type="text/css">
    <!--
    body,div,ul,li{
     margin:0 auto;
     padding:0;
    }
    body{
     font:12px "宋体";
     text-align:center;
    }
    a:link{
     color:#00F;
     text-decoration:none;
    }
    a:visited {
     color: #00F;
     text-decoration:none;
    }
    a:hover {
     color: #c00;
     text-decoration:underline;
    }
    ul{
     list-style:none;
    }
    .main{
     clear:both;
     padding:8px;
     text-align:center;
    }
    /*第一种形式*/
    #tabs0 {
     height: 200px;
     width: 400px;
     border: 1px solid #cbcbcb;
     background-color: #f2f6fb;
    }
    .menu0{
     width: 400px;
    }
    .menu0 li{
     display:block;
     float: left;
     padding: 4px 0;
     width:100px;
     text-align: center;
     cursor:pointer;
     background: #FFFFff;
    }
    .menu0 li.hover{
     background: #f2f6fb;
    }
    #main0 ul{
     display: none;
    }
    #main0 ul.block{
     display: block;
    }
    /*第二种形式*/
    #tabs1{
     text-align:left;
     width:400px;
    }
    .menu1box{
     position:relative;
     overflow:hidden;
     height:22px;
     width:400px;
     text-align:left;
    }
    #menu1{
     position:absolute;
     top:0;
     left:0;
     z-index:1;
    }
    #menu1 li{
     float:left;
     display:block;
     cursor:pointer;
     width:72px;
     text-align:center;
     line-height:21px;
     height:21px;
    }
    #menu1 li.hover{
     background:#fff;
     border-left:1px solid #333;
     border-top:1px solid #333;
     border-right:1px solid #333;
    }
    .main1box{
     clear:both;
     margin-top:-1px;
     border:1px solid #333;
     height:181px;
     width:400px;
    }
    #main1 ul{
     display: none;
    }
    #main1 ul.block{
     display: block;
    }
    /*第三种形式*/
    .menu2box{
     position:relative;
     overflow:hidden;
     height:22px;
     width:400px;
     text-align:left;
     background: #FFFFff;
    }
    #tabs2 {
     height: 200px;
     width: 400px;
     border: 1px solid #cbcbcb;
     background-color: #f2f6fb;
    }
    #tip2{
     position:absolute;
     top:0;
     left:0;
     height:22px;
     line-height:22px;
     z-index:0;
     width:100px;
     background: #f2f6fb;
    }
    #menu2{
     position:absolute;
     top:0;
     left:0;
     z-index:1;
    }
    #menu2 li{
     display:block;
     float: left;
     padding: 4px 0;
     width:100px;
     text-align: center;
     cursor:pointer;
    }
    -->
    </style>
    <script>
    <!--
    /*第一种形式 第二种形式 更换显示样式*/
    function setTab(m,n){
     var tli=document.getElementById("menu"+m).getElementsByTagName("li");
     var mli=document.getElementById("main"+m).getElementsByTagName("ul");
     for(i=0;i<tli.length;i++){
      tli[i].className=i==n?"hover":"";
      mli[i].style.display=i==n?"block":"none";
     }
    }
    /*第三种形式 利用一个背景层定位*/
    var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
    function nowtab(m,n){
     if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
     document.getElementById("tip"+m).style.left=n*100+'px';
     document.getElementById("main2").innerHTML=m3[n];
    }
    //-->
    </script>
    </head>
    <body>
    <br />
    <br />
    <!--第一种形式-->
    <div id="tabs0">
     <ul class="menu0" id="menu0">
      <li onclick="setTab(0,0)" class="hover">新闻</li>
      <li onclick="setTab(0,1)">评论</li>
      <li onclick="setTab(0,2)">技术</li>
      <li onclick="setTab(0,3)">点评</li>
     </ul>
     <div class="main" id="main0">
      <ul class="block"><li>新闻列表</li></ul>
      <ul><li>评论列表</li></ul>
      <ul><li>技术列表</li></ul>
      <ul><li>点评列表</li></ul>
     </div>
    </div>
    <br />
    <br />
    <!--第二种形式-->
    <div id="tabs1">
     <div class="menu1box">
      <ul id="menu1">
       <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
       <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
       <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
       <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
      </ul>
     </div>
     <div class="main1box">
      <div class="main" id="main1">
       <ul class="block"><li>新闻列表</li></ul>
       <ul><li>评论列表</li></ul>
       <ul><li>技术列表</li></ul>
       <ul><li>点评列表</li></ul>
      </div>
     </div>
    </div>
    <br />
    <br />
    <!--第三种形式-->
    <div id="tabs2">
     <div class="menu2box">
      <div id="tip2"></div>
      <ul id="menu2">
       <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
       <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
       <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
       <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
      </ul>
     </div>
      <div class="main" id="main2">
    新闻内容
     </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    </body>
    </html>