devexpress中如何给TabPage控件的Tab定义背景色

最新推荐文章于 2025-06-10 16:45:33 发布

转载最新推荐文章于 2025-06-10 16:45:33 发布 · 936 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dfxyw/p/5235409.html

文章标签：

#c#

本文介绍了一种使用ASPxPageControl实现的企业信息展示Tab页设计方案。通过自定义样式及前后端代码配合，实现了基本信息与客户联系人的动态展示。包括法人代表、管理用户等详细信息。

js:

/*tab选项卡样式*/
.color .dxtc-link {
background-color: #bf4e6a !important;
}


后台代码：

//选项卡样式
protected void Page_Init(object sender, EventArgs e)
{
ASPxPageControl1.ActiveTabStyle.CssClass = "color";
}


//前台代码
<dx:ASPxPageControl ID="ASPxPageControl1" runat="server" Width="100%" Height="100%" ActiveTabIndex="0">
                                            <%--<TabStyle BackColor="#bf4e6a"></TabStyle>--%>
                                            <ContentStyle>
                                                <Border BorderWidth="0px"/>
                                            </ContentStyle>
                                            <TabPages>
                                                <dx:TabPage Text="基本信息" TabStyle-ForeColor="Black" ActiveTabStyle-ForeColor="White" >
                                                    <ContentCollection>
                                                        <dx:ContentControl>
                                                            <table class="df_tablestyle">
                                                                <tr class="df_tr">
                                                                    <td>
                                                                        <dx:ASPxLabel ID="ASPxLabel2" Text="法人代表：" runat="server"></dx:ASPxLabel>
                                                                        <dx:ASPxLabel ID="lb_peoprincipal" runat="server"></dx:ASPxLabel>
                                                                    </td>
                                                                    <td>
                                                                        <dx:ASPxLabel ID="ASPxLabel3" Text="联系电话：" runat="server"></dx:ASPxLabel>
                                                                        <dx:ASPxLabel ID="lb_peophoneone" runat="server"></dx:ASPxLabel>
                                                                    </td>
                                                                </tr>
                                                                <tr class="df_tr">
                                                                    <td>
                                                                        <dx:ASPxLabel ID="ASPxLabel4" Text="管理用户：" runat="server"></dx:ASPxLabel>
                                                                        <dx:ASPxLabel ID="lb_adminuser" runat="server"></dx:ASPxLabel>
                                                                    </td>
                                                                    <td>
                                                                        <dx:ASPxLabel ID="ASPxLabel5" Text="企业类型：" runat="server"></dx:ASPxLabel>
                                                                        <dx:ASPxLabel ID="lb_peetype" runat="server"></dx:ASPxLabel>
                                                                    </td>
                                                                </tr>
                                                                <tr class="df_tr">
                                                                    <td>
                                                                        <dx:ASPxLabel ID="ASPxLabel6" Text="开户银行：" runat="server"></dx:ASPxLabel>
                                                                        <dx:ASPxLabel ID="lb_peobank" runat="server"></dx:ASPxLabel>
                                                                    </td>
                                                                    <td>
                                                                        <dx:ASPxLabel ID="ASPxLabel7" Text="银行账号：" runat="server"></dx:ASPxLabel>
                                                                        <dx:ASPxLabel ID="lb_peobankaccount" runat="server"></dx:ASPxLabel>
                                                                    </td>
                                                                </tr>
                                                                <tr class="df_tr">
                                                                    <td>
                                                                        <dx:ASPxLabel ID="ASPxLabel8" Text="所在区域：" runat="server"></dx:ASPxLabel>
                                                                        <dx:ASPxLabel ID="lb_peoarea" runat="server"></dx:ASPxLabel>
                                                                    </td>
                                                                    <td>
                                                                        <dx:ASPxLabel ID="ASPxLabel9" Text="经营范围：" runat="server"></dx:ASPxLabel>
                                                                        <dx:ASPxLabel ID="lb_scopbusiness" runat="server"></dx:ASPxLabel>
                                                                    </td>
                                                                </tr>
                                                                <tr class="df_tr">
                                                                    <td colspan="2">
                                                                        <%--<dx:ASPxLabel ID="ASPxLabel10" Text="企业说明：" runat="server"></dx:ASPxLabel>--%>
                                                                        <dx:ASPxLabel ID="lb_providremark" runat="server"></dx:ASPxLabel>
                                                                    </td>

                                                                </tr>
                                                            </table>
                                                        </dx:ContentControl>
                                                    </ContentCollection>
                                                </dx:TabPage>

                                                <dx:TabPage Text="客户联系人" TabStyle-ForeColor="Black" ActiveTabStyle-ForeColor="White">
                                                    <ContentCollection>
                                                        <dx:ContentControl>
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <span style="font-size:16px; color:#bf4e6a;"><i class="glyphicon glyphicon-triangle-bottom"></i>&nbsp;&nbsp;法人代表详情</span>
                                                                    <table class="df_tablestyle">
                                                                        <tr class="df_tr">
                                                                            <td>
                                                                                <dx:ASPxLabel ID="ASPxLabel10" Text="法人代表：" runat="server"></dx:ASPxLabel>
                                                                                <dx:ASPxLabel ID="txt_peoprincipal1" runat="server"></dx:ASPxLabel>
                                                                            </td>
                                                                            <td>
                                                                                <dx:ASPxLabel ID="ASPxLabel12" Text="身份证号：" runat="server"></dx:ASPxLabel>
                                                                                <dx:ASPxLabel ID="txt_user1cardno" runat="server"></dx:ASPxLabel>
                                                                            </td>
                                                                        </tr>
                                                                        <tr class="df_tr">
                                                                            <td>
                                                                                <dx:ASPxLabel ID="ASPxLabel14" Text="联系电话：" runat="server"></dx:ASPxLabel>
                                                                                <dx:ASPxLabel ID="txt_peophoneone1" runat="server"></dx:ASPxLabel>
                                                                            </td>
                                                                            <td>
                                                                                <dx:ASPxLabel ID="ASPxLabel16" Text="电子邮箱：" runat="server"></dx:ASPxLabel>
                                                                                <dx:ASPxLabel ID="txt_peoemail" runat="server"></dx:ASPxLabel>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </div>
                                                                <div class="col-md-12"><hr /></div>
                                                                <div class="col-md-12">
                                                                    <span style="font-size:16px; color:#bf4e6a;"><i class="glyphicon glyphicon-triangle-bottom"></i>&nbsp;&nbsp;责任人详情</span>
                                                                    <table class="df_tablestyle">
                                                                        <tr class="df_tr">
                                                                            <td>
                                                                                <dx:ASPxLabel ID="ASPxLabel18" Text="责&nbsp;任&nbsp;人&nbsp;：" runat="server"></dx:ASPxLabel>
                                                                                <dx:ASPxLabel ID="txt_peolinkman" runat="server"></dx:ASPxLabel>
                                                                            </td>
                                                                            <td>
                                                                                <dx:ASPxLabel ID="ASPxLabel20" Text="身份证号：" runat="server"></dx:ASPxLabel>
                                                                                <dx:ASPxLabel ID="txt_user2cardno" runat="server"></dx:ASPxLabel>
                                                                            </td>
                                                                        </tr>
                                                                        <tr class="df_tr">
                                                                            <td>
                                                                                <dx:ASPxLabel ID="ASPxLabel22" Text="联系电话：" runat="server"></dx:ASPxLabel>
                                                                                <dx:ASPxLabel ID="txt_peophonetwo" runat="server"></dx:ASPxLabel>
                                                                            </td>
                                                                            <td>
                                                                                <dx:ASPxLabel ID="ASPxLabel24" Text="电子邮箱：" runat="server"></dx:ASPxLabel>
                                                                                <dx:ASPxLabel ID="txt_peoemail2" runat="server"></dx:ASPxLabel>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </dx:ContentControl>
                                                    </ContentCollection>
                                                </dx:TabPage>
                                            </TabPages>
                                        </dx:ASPxPageControl>