Telerik RadListBox / Делать некоторые вещи при наведении курсора и выбирать элементы внутри RadListBox ...(на стороне клиента)
Я использую RadListBox в моем проекте (asp.net с C# с vs2010)
также я использую некоторые кнопки ссылки в itemTemplate...
Я хочу изменить цвет этих кнопок ссылок, когда мы наведем курсор мыши или выберите элемент в ListBox! (Программирование на стороне клиента)
Мой 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>
<asp:LinkButton ID="lbEditOfIG" CssClass="lbEditOfIGclass" runat="server" CausesValidation="False"
CommandName="Edit">Edit</asp:LinkButton>
<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: добавьте событие SelectedIndexChanged (на стороне сервера) с AutoPostBack="True"...
у меня есть несколько кодов в событии 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 CallBack)
я был бы очень признателен за то, что дал мне решение, так что я могу использовать его для других целей...
спасибо, что прочитали это и уделили ваше драгоценное время этой теме
1 ответ
Прежде всего, это не имеет ничего общего с программированием на стороне клиента, но с CSS. Конечно, вы можете сделать это с помощью jQuery или другой библиотеки, но это кажется ненужным, если вам не нужно делать сложные вещи.
Совет: Для работы с js, css вы должны использовать расширение Firebug для Firefox.
Наконец код, который вы запросили, выглядит так:
.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, поэтому его содержимое не очищается).
- Если событие hovered произошло ранее, мы добавляем определенный класс css к элементу, который создал SelectedIndexChanged.
- Теперь foreach rlbItem:visible мы добавляем функциональность для изменения значения скрытого поля в соответствии с индексом элемента в списке.
- Мы наконец-то установили новое значение элемента наведения.
Это все волшебство:-)