Telerik RadListBox / 在悬停中做一些事情并选择 RadListBox 内的项目 ...（客户端）

Question

我在我的项目中使用 RadListBox (asp.net with c# with vs2010)

我也在 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>

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

change#2：使用 AutoPostBack="True" 添加 SelectedIndexChanged 事件（服务器端）...

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

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

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

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

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

非常感谢您给我一个解决方案，所以我可以将它用于其他目的......

感谢您阅读本文并将您宝贵的时间用于此主题

Answer 1

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

提示： 您应该适当地使用Firebug extension to Firefox 来处理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. 现在，对于每个 rlbItem:visible，我们添加了根据列表中悬停元素索引更改隐藏字段值的功能。
6. 我们终于设置了悬停元素的新值。

这就是魔法:-)