Архив блога

Апрель 2019 >>
п в с ч п с в
25 26 27 28 29 30 31
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 1 2 3 4 5
  

Категории





    Блоги

      Добавить

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

      от Маркус в 10 октября 2012 г. 18: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_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=''; для того, чтобы использовать механизм локализации, т.е. теперь текс-подсказка поставляется из ресурсного файла локализации скина по ключу «SearchTip». После внесения изменений в ресурсный файл локализации все будет отображаться корректно.

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

      $(document).ready(
      function(){
      var s='',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

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

      • Добавить комментарий
      • Комментировать