asp.net - Telerik RadListBox /ホバーで何かを行い、RadListBox内のアイテムを選択...（クライアント側）

Question

プロジェクトでRadListBoxを使用しています（asp.netとc＃、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などのリンクボタンの1つをクリックして）選択したアイテムを変更すると、そのためにコールバックが発生し、以下のcssで設定したlbTitleOfIGの色が失われることです：

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

ただし、選択した領域は引き続き強調表示されます...

私はこの色のものがそれほど重要ではないことを知っていますが、何ヶ月も前に私はRadComboBoxについて同様の問題を抱えていました（selectedIndexChanged CallBackの後にフォーカスを失います）

私は私に解決策を与えてくれて本当にありがたいので、他の目的にそれを使うことができます...

これを読んでくれてありがとう、そしてこのスレッドに貴重な時間を割いてください

score 1 · Accepted Answer

まず第一に、クライアント側のプログラミングとは何の関係もありませんが、CSSとは関係ありません。もちろんjQueryや他のライブラリでもできますが、高度なことをする必要がないのでなければ不要のようです。

ヒント:js、css を操作するには、適切に Firebug 拡張機能を Firefoxに使用する必要があります。

最後に、リクエストしたコードは次のようになります。

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

1 つ目はアクティブなリスト項目用で、2 つ目はリスト内のホバー要素用です。

乾杯！

編集ポストバック後に機能するコードは次のとおりです。

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

舞台裏で何が起こっているかについての簡単な説明は次のとおりです。

単に html ul 要素である RadListBox のホバーされたインデックスを格納するための隠しフィールドが必要です。最初の読み込みで特定の css クラスを追加しないことを示すために、値を「-1」に設定します。
pageLoadは、サーバーがクライアントブラウザーにデータを返すときに常に呼び出される JavaScript 関数です。Ajax 経由 (各 UpdatePanel 実行)。ここで重要なことを行います。
新しいコンテンツがロードされた後、最後にホバーされた ul のインデックスを受け取ります (隠しフィールドは UpdatePanel の範囲外にあるため、コンテンツはクリアされません)。
ホバーイベントが以前に発生した場合は、SelectedIndexChanged を作成した要素に特定の css クラスを追加します。
foreach rlbItem:visible では、リスト内のホバーされた要素のインデックスに従って非表示フィールドの値を変更する機能を追加します。
最後に、ホバーされた要素の新しい値を設定します。

それが魔法のすべてです:-)

asp.net - Telerik RadListBox /ホバーで何かを行い、RadListBox内のアイテムを選択...（クライアント側）

1 に答える 1

Related

Reference