Видео: Вся правда о WebTutor. Настраиваемые отчеты. Продвинутый уровень. 2024
Возможность выбора из списка элементов в CSS3 снижает вероятность того, что пользователь вводит неверную информацию. К счастью, в HTML5 уже есть несколько элементов управления выбором, но вы можете обнаружить, что эти элементы управления не совсем удовлетворяют вашим потребностям время от времени.
В этом случае пользовательская технология выбора, реализованная с помощью jQuery UI, может ответить на эту проблему. Последовательность выбора может состоять из a и ряда тегов
, как показано здесь. (Вы можете найти полный код для этого примера в папке Chapter 06Interactions загружаемого кода как SelectContent. HTML.)
Красный
Зеленый
Синий
Фиолетовый
Обратите внимание, что действия в качестве контейнера и теги
действуют как элементы в контейнере. (Пример включает стили CSS для форматирования каждого из селекторов, например, с использованием красного фона для элемента Red - стиль #Selections определяет ширину селекторов, а также поле и дополнение, используемые для их отображения.)
Независимо от того, как вы реализуете свой собственный список (и не обязательно, чтобы это было показано), он должен иметь расположение контейнера / элемента, подобное показанному здесь. Когда у вас есть договоренность на месте, вы можете создать механизм выбора и отслеживания, как показано в следующем коде:
// Создайте массив для отслеживания выбора. var Selections = new Array (); // Обрабатываем и отбираем. $ (function () {$ ("# Selections"). selectable ({selected: function (event, ui) {// Проверяем, что элемент еще не был добавлен // if (Выбор. indexOf (ui. id) == -1) // Добавить идентификатор выбранного элемента // в массив. Выделение. push (ui. selected. id);}, unselected: function (event, ui) {// Найти местоположение unselected // item в массиве. var Index = Selections. indexOf (ui. unselected. id); // Удалить этот элемент. Выбор. splice (Index, 1);}});}) // Отображение результатов. function ShowResults () {alert ("Вы выбрали:" + Выбор);}
Array, Selections отслеживает текущий список выбора. Чтобы сделать выбор, Выбор, по выбору, вы используете метод selectable (). В этом примере используются два события, выбранные и невыбранные, чтобы отслеживать текущие выборы. Когда пользователь выбирает новый элемент, выбранный обработчик события проверяет, что элемент еще не отображается в разделе «Выбор», а затем он выталкивает новый элемент в «Выбор».
Обработчик невыделенного события должен выполнять две задачи. Во-первых, он должен найти невыбранный элемент, используя метод indexOf (). Во-вторых, он должен использовать splice (), чтобы удалить этот элемент из Selections.
В этом примере не представлен какой-либо причудливый вывод, но вы можете сами убедиться, насколько хорошо работает методология выбора. Нажмите «Показать выбранные», чтобы отобразить список выбранных элементов. Обработчик события ShowResults () отображает список выбранных вами вариантов. В производственном приложении вы можете так же легко обрабатывать каждый из выбранных элементов.
Конечной частью этого конкретного приложения является необходимость определить один особый стиль. Вы должны предоставить средство для отображения для регистрации выбранного состояния определенного элемента, что означает предоставление значений для #Selections. ui-selected style, как показано ниже:
#Selections. ui-selected {background: black; color: white;}
Когда пользователь выбирает элемент, фон становится черным с белым текстом, чтобы пользователь мог видеть визуальное изменение. Вы также можете изменить текст как второе средство, помогающее пользователю увидеть выбор.
