- 爱易网页
-
ASP.NET教程
- 求tab控件,请高手赐教啊
日期:2014-05-18 浏览次数:20471 次
【高分】求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;