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

本文介绍了一种使用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>

 

转载于:https://www.cnblogs.com/dfxyw/p/5235409.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值