0

我在我的项目中使用 RadListBox（带有 c# 和 vs2010 的 asp.net）

我也在 itemTemplate 中使用一些链接按钮...

当我们悬停或选择列表框中的项目时，我想更改这些链接按钮的颜色！（客户端编程）

我的 RadListBox 是这样的：

            <telerik:RadListBox ID="RadlbOfImageGroup" runat="server" DataKeyField="ID" DataSortField="Title"
                DataSourceID="sdsImagesGroup" DataTextField="Title" DataValueField="ID" Skin="BlackByMe"
                EnableEmbeddedSkins="False" EmptyMessage="No Records!">
                <ButtonSettings TransferButtons="All" />
                    <HeaderTemplate> <div id="Header_RadlbOfImageGroup"><h5>Header Area</h5></div>
</HeaderTemplate>

                <ItemTemplate>
                    <asp:LinkButton ID="lbTitleOfIG" CssClass="lbTitleOfIGclass" runat="server" CausesValidation="False"><%# Eval("Title") %></asp:LinkButton>
                    <asp:Label ID="lblTitleOfIG" CssClass="lblTitleOfIGclass" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:LinkButton ID="lbEditOfIG" CssClass="lbEditOfIGclass" runat="server" CausesValidation="False"
                        CommandName="Edit">Edit</asp:LinkButton>
                    &nbsp;&nbsp;
                    <asp:LinkButton ID="lbDeleteOfIG" CssClass="lbDeleteOfIGclass" runat="server" CausesValidation="False"
                        CommandName="Delete">Delete</asp:LinkButton>
                </ItemTemplate>
            </telerik:RadListBox>

我想在悬停和选择项目期间更改 lbTitleOfIG 的颜色！

我怎么能做这份工作？

感谢关注

第一个答案解决了上面的问题-谢谢兄弟...

=================================

但是在进行了如下一些更改后，我遇到了一个新问题：

<telerik:RadAjaxPanel ID="RadAjaxPanelInrpvImageGroup" runat="server" Height="290px" Width="400px">

<telerik:RadListBox ID="RadlbOfImageGroup" runat="server" DataKeyField="ID" DataSortField="Title"
                                    DataSourceID="sdsImagesGroup" DataTextField="Title" DataValueField="ID" Skin="BlackByMe"
                                    EnableEmbeddedSkins="False" Width="260px" Height="365px" 
                                    EmptyMessage="no records!" AutoPostBack="True" 
                                    onselectedindexchanged="RadlbOfImageGroup_SelectedIndexChanged">
                                    <ItemTemplate>
                                        <table style="width: 100%;">
                                            <tr style="width: 100%;">
                                                <td style="width: 64%;">
                                                    <asp:Label ID="lblTitleOfIG" runat="server" CssClass="lbl_ListBox_IG_Title" Text='<%# Eval("Title") %>'></asp:Label>
                                                </td>
                                                <td style="width: 18%; text-align: center;">
                                                    <asp:LinkButton ID="lbEditIG" runat="server" CausesValidation="False" CommandName="Edit"
                                                        CssClass="lb_ListBox_IG" OnClick="lbEditIG_Click">Edit</asp:LinkButton>
                                                </td>
                                                <td style="width: 18%; text-align: center;">
                                                    <asp:LinkButton ID="lbDeleteIG" runat="server" CausesValidation="False" CommandName="Delete"
                                                        CssClass="lb_ListBox_IG" OnClick="lbDeleteIG_Click">Delete</asp:LinkButton>
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </telerik:RadListBox>
                    </telerik:RadListBox>
</telerik:RadAjaxPanel>

更改#1：如您所见，我将 RadListBox 放入了 RadAjaxPanel（它的作用类似于 UpdatePanel）...

change#2 : 添加 SelectedIndexChanged 事件（服务器端），AutoPostBack="True"...

我在 SelectedIndexChanged 事件中有一些代码在 ajax 模式下运行良好......

但是我的新问题是，当我通过单击另一个项目（或单击其中一个链接按钮，如 lbEditIG 或 lbDeleteIG）更改选定项目并因此发生回调时，我失去了我们通过以下 css 设置的 lbTitleOfIG 颜色：

.rlbActive .rlbTemplate span.lbl_ListBox_IG_Title
{
    color:#9EDA29 !important;
    }
.rlbTemplate:hover span.lbl_ListBox_IG_Title
{
    color:#9EDA29 !important;
    }

但所选区域仍然突出显示...

我知道这个颜色的东西不是那么重要，但是几个月前我有一个关于 RadComboBox 的类似问题（在 selectedIndexChanged 回调后失去焦点）

我真的很感激给我一个解决方案，所以我可以将它用于其他目的......

感谢您阅读本文并将您宝贵的时间花在此线程上

4

1 回答 1

1

首先，它与客户端编程无关，而是与CSS无关。当然，您可以使用 jQuery 或其他库来做到这一点，但这似乎是不必要的，除非您不必做复杂的事情。

提示：您应该适当地使用Firefox 的 Firebug 扩展来处理 js、css。

最后你reqested的代码看起来像这样：

.rlbActive .rlbTemplate a.lbTitleOfIGclass{color:Red !important;}
.rlbTemplate:hover a.lbTitleOfIGclass{color:Red !important;}

第一个用于活动列表项，第二个用于列表内的悬停元素。

干杯!

编辑 这是回发后工作的代码：

(1)<asp:HiddenField runat="server" ID="HoveredIndex"  Value="-1" />
    <telerik:RadAjaxPanel ID="RadAjaxPanelInrpvImageGroup" runat="server" Height="290px"
        Width="400px">
        <telerik:RadListBox ID="RadlbOfImageGroup" runat="server" DataKeyField="ID" DataSortField="Title"
            DataTextField="Title" DataValueField="ID" Skin="BlackByMe"
            EnableEmbeddedSkins="False" Width="260px" Height="365px" EmptyMessage="no records!"
            AutoPostBack="True" OnSelectedIndexChanged="RadlbOfImageGroup_SelectedIndexChanged">
            <ItemTemplate>
                <table style="width: 100%;">
                    <tr style="width: 100%;">
                        <td style="width: 64%;">
                            <asp:Label ID="lblTitleOfIG" runat="server" CssClass="lbl_ListBox_IG_Title" Text='<%# Eval("Title") %>'></asp:Label>
                        </td>
                        <td style="width: 18%; text-align: center;">
                            <asp:LinkButton ID="lbEditIG" runat="server" CausesValidation="False" CommandName="Edit"
                                CssClass="lb_ListBox_IG">Edit</asp:LinkButton>
                        </td>
                        <td style="width: 18%; text-align: center;">
                            <asp:LinkButton ID="lbDeleteIG" runat="server" CausesValidation="False" CommandName="Delete"
                                CssClass="lb_ListBox_IG" >Delete</asp:LinkButton>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </telerik:RadListBox>
        <script type="text/javascript">
            function pageLoad()(2)
            {
                var indexbefore = $('input:hidden[id*="HoveredIndex"]').val();(3)
                if (indexbefore != -1)(4)
                    $('.rlbItem').eq(indexbefore).addClass('rlbActive .rlbTemplate span.lbl_ListBox_IG_Title');

                $('.rlbItem:visible').each(function (index)(5)
                {
                    $(this).hover(function ()
                    {
                        $("#result").html("Index is: " + index);
                        $('input:hidden[id*="HoveredIndex"]').val(index);(6)
                    });
                });
            }
        </script>

    </telerik:RadAjaxPanel><div id="result"></div>

以下是对幕后发生的事情的小解释：

  1. 我们需要一个隐藏字段来存储 RadListBox 的悬停索引，它只是 html ul 元素。我们将值设置为“-1”以指示首次加载不应添加特定的 css 类。
  2. pageLoad是 javascript 函数，当服务器向客户端浏览器返回数据时总是调用它，例如。通过 Ajax（每个 UpdatePanel 执行）。我们在这里做重要的事情。
  3. 加载新内容后，我们收到最后悬停的 ul 索引（隐藏字段在 UpdatePanel 范围之外，因此它的内容不会被清除）。
  4. 如果之前发生了悬停事件，我们将特定的 css 类添加到使 SelectedIndexChanged 的​​元素。
  5. 现在 foreach rlbItem:visible 我们添加了根据列表中悬停元素索引更改隐藏字段值的功能。
  6. 我们最终设置了悬停元素的新值。

这就是魔法:-)

于 2011-05-13T10:10:13.827 回答