- 爱易网页
- 
                            ASP.NET教程
- 求tab控件,请高手赐教啊 
日期:2014-05-18  浏览次数:20574 次 
                    
                        
                         【高分】求tab控件,请高手赐教啊!!!!!!!
我想找一个能触发服务器事件得tab控件,而且可以加背景图得。
我看见微软一个网页工具,里面有tab页得控件。后来我看见一个tab是由三个图片左、中、右拼接而成得,鼠标放上去没有显示网址,好像不是客户端控件。我在网上找得tabs控件一般都是css或者根据javasript在客户端做的,不知道怎么触发服务器事件(像点击button一样),不过看到一个由asp:menu和tabview组成得tabs控件,可是那个menu有个bug,如果在css里加背景图它会显示两个背景图(而且是相叠得)。如果在menu得imageurl属性加图片,则只能显示图片不能显示文字(文字在图片旁边不在图片上)。所以郁闷了一天了。
因为我要tab控件点击之后能触发服务器控件,同时能加好看得背景图片。
请问高手们做过这样得例子没有,有得话给个连接。不甚感谢!
------解决方案--------------------
先顶一下
------解决方案--------------------
mark
------解决方案--------------------
自己可以做一个自定义控件啊
------解决方案--------------------
用menu控件就可以实现,用一个自定义的模版加SPAN,背景用样式控制。
<asp:Menu runat="server" ID="Menu1" Orientation="horizontal">
           <StaticSelectedStyle CssClass="current"/>
           <StaticMenuStyle CssClass="MenuHorizontal" />
           <DynamicMenuStyle CssClass="MenuVertical" />
           <StaticItemTemplate>                    
                <span><%# Eval("Text") %></span>
            </StaticItemTemplate>
           <Items>
               <asp:MenuItem Value="1" Text="123546" Selected="true"></asp:MenuItem>
               <asp:MenuItem Value="2" Text="222222"></asp:MenuItem>
           </Items>
       </asp:Menu>
CSS:
.MenuHorizontal {    
     float:left;
     width:100%;
     font-family: 宋体, Arial;
     font-size:100%;    
     border-bottom:1px solid #2763A5;
     line-height:normal;
     }
.MenuHorizontal a
{		
		float:left;
     background:url("images\\tableft10.gif") no-repeat left top;
     margin:0;
     padding:0 0 0 4px;
     text-decoration:none;
     cursor:hand;
}
.MenuHorizontal a span  
{
	   float:left;
     display:inline;
     background:url("images\\tabright10.gif") no-repeat right top;
     padding:5px 15px 4px 6px;
     color:#FFF;
     width:50px;
     text-align:center;
    
     }    
/*MenuHorizontal a span {float:none;}*/
.MenuHorizontal a:hover span {
     color:#FFF;
     }
.MenuHorizontal a:hover {
     background-position:0% -42px;
     }
.MenuHorizontal a:hover span {
     background-position:100% -42px;
     }     
.MenuHorizontal .current a  
{
	background-position:0% -42px;
       }
.MenuHorizontal .current a span  
{
	background-position:100% -42px;
       }
.MenuVertical {
       width: 1em;
       /*border-right: 1px solid #000;*/
       padding: 0 0 1em 0;
       margin-top: 1em;
       margin-bottom: 1em;
       font-family: 宋体, Arial;
               /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
       font-size : 10px;
       background-color: #90bade;
       color: #333;  
       }
      
      
.MenuVertical td{
               border-bottom: 1px solid #90bade;
               margin: 0;               
               }
.MenuVertical td
{
	width:12em;
}
.MenuVertical a{
       display: block;
       padding: 5px 5px 5px 0.5em;
       border-left: 10px solid #1958b7;
       border-right: 10px solid #508fc4;
       background:#2175bc;     
       color: #fff;
       text-decoration: none;
       width: 12em;
       }
.MenuVertical a:hover {
       border-left: 10px solid #1c64d1;
       border-right: 10px solid #5ba3e0;