Глава 10. Опережающий ввод 437
процесс, знакомый любому эпизодическому разработчику DHTML-страниц. Отображение и сокрытие элемента обычно выполняются посредством манипуляций со свойством display стиля элемента. Наш компонент — не исключение. Поэтому изучите листинг 10.39, содержащий код с реализацией отображения и сокрытия всплывающего списка.
Листинг 10.39, Отображение и сокрытие всплывающего списка вариантов
showSuggestions: function() {
var divStyle = this.suggestionsDiv.style; if ( divStyle.display == " )
return;
this.positionSuggestionsDiv();
//Разместить всплывающий список divStyle.display = ";
//Показать всплывающий список
>.
// Скрыть всплывающий список hideSuggestions: function() {
this.suggestionsDiv.style.display = ' none';
Ь |
m |
В приведенном коде мы манипулируем свойством style.display метода suggestionsDiv, чтобы отобразить (посредством значения, равного пустой строке) и скрыть (посредством попе) всплывающее окно. Метод showSuggestions () выполняет дополнительную работу по размещению окна в нужном месте перед его отображением. Вот и все! Действительно все! Компонент готов. Подведем итоги.
10.5.6. Итоги
Да, это был достаточно сложный компонент с большим числом элементов. Мы создали компонент с возможностью повторного использования, которым можно гордиться. Разработанный компонент TextSuggest обрабатывает большое число конфигурационных параметров; допускает расширение; не нагружает сервер; к тому же он ненавязчив, работает во всех браузерах, имеет простой API... Другими словами, он удовлетворяет всем требованиям, перечисленным в табл. 10.2. Полностью исходный код компонента можно найти на сайте http://www.manning.com/crane (http://www.dialektika.com/); библиотеку Rico — на http://openrico.org/, а библиотеку Prototype — на сайте h t t p : //prototype.conio.net/.
10.6. Резюме
Предложение вариантов вводимого текста позволяет пользователям экономить время, предлагая им на выбор ту информацию, которая, возможно, им требуется. Иногда пользователь, набравший всего несколько букв, сразу получает нужные данные. В данной главе были рассмотрены недостатки су-
438 Часть IV. Ajax в примерах
ществующих реализаций и разработано приложение, позволяющее обойтись без ненужных обращений к серверу благодаря интенсивной обработке на стороне клиента. При создании динамического пользовательского интерфейса допускающего взаимодействие с клавиатурой и мышью, мы использовании DHTML. В данном примере показано, как с помощью Ajax обеспечить гладкое взаимодействие с сервером без нарушения взаимодействия пользователя с Web-страницей. Кроме того, предложенный сценарий хорошо работает с браузерами, не поддерживающими Ajax, поскольку в подобных случаях текстовое окно опережающего ввода действует как обычное текстовое окно, в котором пользователи могут вводить данные (просто они не получают готовые предположения по поводу вводимого текста). Наконец, мы убрали объектно-ориентированную оболочку JavaScript, реструктуризировав сценарий в удобный конфигурируемый и полезный компонент TextSuggest.
