Статьи

Сделайте эту форму удобной для пользователя!

Декабрь 22, 2018

Я сейчас читаю
jQuery Cookbook и буду публиковать в блоге несколько интересных примеров, которые мне попадаются и пополам, хотя бы немного. Надеюсь, это имеет больше смысла для неподготовленного глаза. Итак, начнем! Рассмотрим форму как таковую:

Кто собирается выиграть кубок Heineken в следующем году?

Нажмите на любую из команд, обратите внимание, что выбран радио-блок. Затем начните вводить текст в поле «Другое». Не странно ли, что ранее выбранная вами команда все еще выбрана, хотя вы явно начали вводить текст в поле «Другое». Должен ли пользователь серьезно выбирать радиокнопку «прочее», хотя индикация «прочее» уже была дана? Теперь на этот раз очистите текстовое поле «прочее» и выберите другую команду. Затем выберите «другой» переключатель. Обратите внимание, что «другое» текстовое поле не имеет фокуса, даже если вы вряд ли нажмете другое поле и не хотите ничего печатать. Вы не настолько иррациональны. Дело в том, что когда выбран переключатель «Другое», имеет смысл, что смежное текстовое поле должно получить фокус. Помнить,хорошее удобство использования означает, что пользователь может достичь того, что он хочет, с меньшим количеством нажатий. И помните, хорошее удобство использования означает, что все интуитивно понятно, а графический интерфейс не отображает противоречий. Итак, мы действительно хотим что-то вроде этого:

Кто собирается выиграть кубок Heineken в следующем году?

Так как мы это сделали? Что ж, давайте посмотрим на код:

<html>
<head>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
</head>
<body>
Consider a form as such:
<p>Who is going to win the Heineken cup next year?</P>
<ul id="choice">
<li>
<input name="source" id="source1" type="radio" value="Leinster"/>
<label for="source1">Leinster</label>
</li>
<li>
<input name="source" id="source2" type="radio" value="Munster"/>
<label for="source2">Munster</label>
</li>
<li>
<input name="source" id="source3" type="radio" value="Ulster"/>
<label for="source3">Ulster</label>
</li>
<li>
<input name="source" id="source4" type="radio" value="Connacht"/>
<label for="source4">Connacht</label>
</li>
<li>
<input name="source" id="source5" type="radio" value="Other"/>
<label for="source5">Other</label>
<input name="Source5Txt" id="Source5Txt" type="text"/>
</li>
</li>
</ul>
<script>
$('#choice input:text').(function() {
   // store some variables locally as they are used more than once.
   var $inputText = $(this);
   var $radioBtn = $inputText.siblings('input:radio'); // all sibling radio buttons

   // If any of the sibling radio buttons change, check to see
   $radioBtn.change(function(){
      // if it checked focus on the text input
      if (this.checked) {$inputText.focus();}
   });

   // listen for the blur event on the text input
   $inputText.keypress(function() {
       $radioBtn.attr('checked', true);
   });
});
</script>
</body>
</html>

Обсуждение:

  1. : text — это селектор класса JQuery psuedo, который выбирает все элементы типа text. Согласно рекомендациям JQuery, селекторам псевдокласса должен предшествовать другой селектор или элемент тега, в противном случае подразумевается универсальный селектор. В этом случае мы делаем ввод: текст . В этом случае будет выбрано только одно текстовое поле. Ничего страшного.
  2. .Each (function () {в этом случае означает итерацию общих вводов типа text и выполнение указанной функции. Не забывайте, что «.each» может работать с наборами элементов любого размера, включая только 1, как в этом случае пример.
  3. $ (this) соответствует объекту, которым управляет каждый. В этом случае это каждое поле ввода текста. Если вы не верите мне, добавьте: 
    
  console.log("this is: " + $(this)[0].id);

    и вы увидите что-то вроде:

    это: Source5Txt в консоли.

  4. Кнопка inputText и переключатель хранятся в локальном контексте. Это для эффективности.

До следующего раза, береги себя.

34
Share: