如何更改telerik radrotator所选项目的背景颜色

时间:2011-10-31 05:16:15

标签: asp.net telerik rotator

我在我的应用程序中使用radrotator,如何从asp.net c#代码后面更改旋转器选定项目的边框颜色或颜色,我可以期待一些帮助。

1 个答案:

答案 0 :(得分:2)

您可以通过其他CSS类更改RadRotator控件及其项目的边框:

  1. 可以覆盖内部CSS类 rrClipRegion ,以便为旋转器控件的边框设置新颜色:

    .rrClipRegion
    {
        border: 1px solid green !important;
    }
    
  2. 您可以通过CSS为RadRotator的项目设置默认边框颜色,然后您可以通过定义具有新边框颜色的CSS类从后面的代码中更改它,如下所示:

  3. RadRotator标记:

        <telerik:RadRotator ID="RadRotator1" runat="server" FrameDuration="3000" ScrollDirection="Left"
            Height="123px" ItemHeight="113px" Width="180px" ItemWidth="152px" Skin="Default"
            RotatorType="Buttons" OnItemClick="RadRotator1_ItemClick">
            <ItemTemplate>
                <div>
                    <img src="....." alt="" />
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    

    应用边框所需的样式:

    <style type="text/css">
        .rrItem
        {
            margin: 4px;
        }
    
        .rrItem img
        {
            border: 1px solid grey;
        }
    
        .cssSelectedItem img
        {
            border: 1px solid red;
    
        }
    </style>
    

    从代码隐藏更改项目的边框颜色:

    protected void RadRotator1_ItemClick(object sender, RadRotatorEventArgs e)
    {
        RadRotatorItem item = (RadRotatorItem)e.Item;
        item.CssClass = "cssSelectedItem";
    
        RadRotator1.InitialItemIndex = e.Item.Index;
    }
    

    请注意,我已设置了旋转器控件的 InitialItemIndex 属性,以便通过回发保留当前项。此外,该示例适用于尺寸为150x113的图像,因此如果使用不同的尺寸,则应更改属性宽度高度 ItemWidth ItemHeight 相应地。