RadTabStrip版本2008.1.415.35,选择Outlook皮肤时很是糟糕,没有框线,给RadMultiPage添加样式"border: solid 1px #b3b3b3;border-top: none;"时,就差Tab标签头的border-bottom,手工给ul和li添加达不到预期效果,熟悉这个控件的朋友给支下招;控件自带的RadTab添加SelectedCssClass无法实现预期效果;RadTabStrip默认只有Office2007的皮肤添加了bakcground,但这不是想要的简单实用效果
另外问下大家web版哪个tabcontrol好用呀,不要说自带的MultiView,不要说AjaxControlToolkit中TabContainer,也不要纯Html+css/js实现的滑动门之类的,需要一个轻量级且实用的tabcontrol
希望实现样式贴图(如何添加红线所示border-bottom)
aspx代码为:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Outlook" MultiPageID="RadMultiPage1"
SelectedIndex="0" Width="100%">
<Tabs>
<telerik:RadTab runat="server" Text="tab1" PageViewID="RadPageView1" Selected="True">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="tab2" PageViewID="RadPageView2">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"
CssClass="tab-main">
<telerik:RadPageView ID="RadPageView1" runat="server" Style="width: 100%; height: 100%;
padding: 12px;">
<table class="form" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="form-item" width="18%" height="25px;">
test1:
</td>
<td>
<asp:TextBox ID="txtCompany" runat="server" Width="207px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="form-item" width="18%" height="25px;">
test2:
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="207px">
</asp:TextBox>
</td>
</tr>
</table>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" Style="width: 100%; height: 100%;
padding: 12px;">
test2
</telerik:RadPageView>
</telerik:RadMultiPage>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
</asp:View>
<asp:View ID="View2" runat="server">
</asp:View>
</asp:MultiView>
html源码为:
<div id="RadTabStrip1" class="RadTabStrip RadTabStrip_Outlook RadTabStripTop_Outlook" style="width:100%;">
<!-- 2008.1.415.35 -->
<div class="rtsLevel rtsLevel1">
<ul class="rtsUL">
<li class="rtsLI rtsFirst">
<a class="rtsLink rtsSelected" href="#">
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">
tab1
</span>
</span>
</span>
</a>
</li>
<li class="rtsLI rtsLast">
<a class="rtsLink rtsAfter" href="#">
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">
tab2
</span>
</span>
</span>
</a>
</li>
</ul>
</div>
<input id="RadTabStrip1_ClientState" name="RadTabStrip1_ClientState" type="hidden"/>
</div>
<div id="RadMultiPage1" class="tab-main">
<div id="RadPageView1" style="width: 100%; height: 100%;
padding: 12px;">
<table class="form" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="form-item" width="18%" height="25px;">
test1:
</td>
<td>
<input name="TextBox1" type="text" id="TextBox1" style="width:207px;" />
</td>
</tr>
<tr>
<td class="form-item" width="18%" height="25px;">
test2:
</td>
<td>
<input name="TextBox2" type="text" id="TextBox2" style="width:207px;" />
</td>
</tr>
</table>
</div>
<div id="RadPageView2" style="display:none;width: 100%; height: 100%;
padding: 12px;">
test2
</div>
<input id="RadMultiPage1_ClientState" name="RadMultiPage1_ClientState"
type="hidden" />
</div>
12 个解决方案
#1
帮顶
只会js+css实现
只会js+css实现
#2
没使用过
看看官网的相关文档
看看jquery的tab
看看官网的相关文档
看看jquery的tab
#3
只会你说的不要的东西的飘过
#4
JQuery不是太会了,学的东西太多太杂了,现在没动力再学了,Demo中的案例都没有这方面的东西
也不知在系统开发中,这种Tab页面你们是如何快捷有效实现的,就烦弄样式这东西,浏览器不兼容更是郁闷得很
#8
#9
#10
jquery tab 不好用 ?
#11
还是尝试jquery的tab
这个吧
这个吧
#12
啊非的 jquery真的很强大
#1
帮顶
只会js+css实现
只会js+css实现
#2
没使用过
看看官网的相关文档
看看jquery的tab
看看官网的相关文档
看看jquery的tab
#3
只会你说的不要的东西的飘过
#4
JQuery不是太会了,学的东西太多太杂了,现在没动力再学了,Demo中的案例都没有这方面的东西
也不知在系统开发中,这种Tab页面你们是如何快捷有效实现的,就烦弄样式这东西,浏览器不兼容更是郁闷得很
#5
#6
#7
#8
#9
#10
jquery tab 不好用 ?
#11
还是尝试jquery的tab
这个吧
这个吧
#12
啊非的 jquery真的很强大