Question

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

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

当我们悬停或选择ListBox中的项目时，我想更改这些LinkButton的颜色！（客户端编程）

我的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一样）......

更改＃2：使用AutoPostBack =“True”添加SelectedIndexChanged事件（服务器端）...

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

但我的新的问题是，当我改变另一个项目则selectedItem通过点击（或点击链接按钮，如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。

最后你需要的代码就是这样：

.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>

以下是对场景背后发生的事情的小解释：

我们需要一个隐藏字段来存储RadListBox的悬停索引，它只是html ul元素。我们将值设置为“-1”表示第一次加载不应该添加特定的css类。

pageLoad 是javascript函数，当服务器向客户端浏览器返回数据时，总是调用它。通过Ajax（每个UpdatePanel执行）。在这里，我们做了重要的事情。

加载新内容后，我们最后收到了ul的索引（隐藏字段在UpdatePanel范围之外，因此它的内容未被清除）。

如果之前发生了悬停事件，我们会将特定的css类添加到生成SelectedIndexChanged的元素中。

现在foreach rlbItem：可见我们根据列表中的悬停元素索引添加更改隐藏字段值的功能。

我们最终设定了悬停元素的新价值。

这就是魔术： - ）

Telerik RadListBox /做一些东西在悬停＆amp;选择RadListBox内的项目...（客户端）

1 个答案: