向wuyq11等提问:RadTabStrip样式如何设置

时间:2023-02-01 13:23:46
向wuyq11等提问:RadTabStrip样式如何设置

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)
向wuyq11等提问:RadTabStrip样式如何设置

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实现

#2


没使用过
看看官网的相关文档
看看jquery的tab

#3


只会你说的不要的东西的飘过

#4


引用 2 楼 wuyq11 的回复:
没使用过
看看官网的相关文档
看看jquery的tab


JQuery不是太会了,学的东西太多太杂了,现在没动力再学了,Demo中的案例都没有这方面的东西

也不知在系统开发中,这种Tab页面你们是如何快捷有效实现的,就烦弄样式这东西,浏览器不兼容更是郁闷得很

#6


向wuyq11等提问:RadTabStrip样式如何设置

http://www.codeproject.com/KB/tabs/magictabcontrol.aspx

这个是开源的,还不错,楼主看看

#8


向wuyq11等提问:RadTabStrip样式如何设置

#9


向wuyq11等提问:RadTabStrip样式如何设置

#10


jquery tab 不好用 ?

#11


还是尝试jquery的tab
这个吧

#12


啊非的 jquery真的很强大

#1


帮顶
只会js+css实现

#2


没使用过
看看官网的相关文档
看看jquery的tab

#3


只会你说的不要的东西的飘过

#4


引用 2 楼 wuyq11 的回复:
没使用过
看看官网的相关文档
看看jquery的tab


JQuery不是太会了,学的东西太多太杂了,现在没动力再学了,Demo中的案例都没有这方面的东西

也不知在系统开发中,这种Tab页面你们是如何快捷有效实现的,就烦弄样式这东西,浏览器不兼容更是郁闷得很

#5


#6


向wuyq11等提问:RadTabStrip样式如何设置

http://www.codeproject.com/KB/tabs/magictabcontrol.aspx

这个是开源的,还不错,楼主看看

#7


#8


向wuyq11等提问:RadTabStrip样式如何设置

#9


向wuyq11等提问:RadTabStrip样式如何设置

#10


jquery tab 不好用 ?

#11


还是尝试jquery的tab
这个吧

#12


啊非的 jquery真的很强大