Архив блога

Категории





Блоги

Как добавить текст-подсказку в поле поиска на сайте DNN?

от Маркус в 10 октября 2012 г. 17:27

Часто разработчики задают вопрос, а как добавить текст-подсказку «Введите запрос» в поле поиска на сайте DNN?
 


Как правило, в своих проектах, я добавляю в скин следующий JavaScript:

$(document).ready(
function(){
var s='Search...';
$("#dnn_dnnSEARCH_txtSearch").val(s).click(function(){
                     var ss=$(this).val();if(ss==s)$(this).val("") }
                     )
              .blur(function(){
                       var ss=$(this).val();if(ss=="")$(this).val(s) }
                   );});

Теперь, когда пользователь установить курсор на поле, чтобы ввести поисковые слова, текст будет исчезать. И наоборот, после очистки поля будет отображаться подсказка в поле.

Но есть проблема. Если вы замените текст-подсказку «Search…» на русское слово «Введите запрос» и используете кодировку  UTF-8, то русские слова будут отображаться в нечитабельной кодировке. Чтобы решить эту проблему внесем изменения в наш код:

$(document).ready(
function(){
var s='<dnn:TEXT runat="server" id="dnnTEXT_Search" Text="" ResourceKey="Search" />';
$("#dnn_dnnSEARCH_txtSearch").val(s).click(function(){
                     var ss=$(this).val();if(ss==s)$(this).val("") }
                     )
              .blur(function(){
                       var ss=$(this).val();if(ss=="")$(this).val(s) }
                   );});

Как вы можете видеть, я заменил часть кода s='Search...'; на var s='<dnn:TEXT runat="server" id="dnnTEXT_SearchTip" Text="" ResourceKey="SearchTip" />'; для того, чтобы использовать механизм локализации, т.е. теперь текс-подсказка поставляется из ресурсного файла локализации скина по ключу «SearchTip». После внесения изменений в ресурсный файл локализации все будет отображаться корректно.

Для окончательного усовершенствования неплохо было бы добавить стили для разного отображения текста-подсказки и поискового запроса так, чтобы цвет шрифта текста-подсказки был «притушенным» (бледным) ну скажем с цветом #ccc, а поисковый запрос был черным (#000). Для этого внесем дополнительные изменения в код скрипта:

$(document).ready(
function(){
var s='<dnn:TEXT runat="server" id="dnnTEXT_SearchTip" Text="" ResourceKey="SearchTip" />',f=$("#dnn_dnnSearch_txtSearchNew");
f.val(s).click(function(){
                     var ss=$(this).val();if(ss==s)$(this).val("");f.addClass("dk");}
                     )
              .blur(function(){var ss=$(this).val();if(ss==''){$(this).val(s);f.removeClass("dk");}});
});

Как видно из кода, при событии установки курсора на поле будет добавляться дополнительный css-класс «dk» в объект поля, который содержит свойство color:#000, а при очистки поля и перевода курсора на другой объект интерфейса этот css-класс «dk» будет удаляться до первоначального набора css-классов с цветом шрифта #ccc.

Обратите внимание, что JavaScript  использует JQuery.

Blogs Parent Separator Блог Маркуса
Дизайн
Поиск
скин
Автор
Маркус

Обо всем по-немногу о DNN.

пока 2 комментариев...

thunder 09.02.2013

"Как правило, в своих проектах, я добавляю в скин следующий JavaScript:" - а кудаэтот скрипт надо включать ? В какой файл ?

 
Маркус 09.02.2013

Я же написал - "... в скин...". Это значит в файл СКИНА.