Боремся с «лишними» переходами на сайте, или еще пара слов о попапах и аяксах Талдыкин Егор Ardas Group.

Презентация:



Advertisements
Похожие презентации
Drupal Camp Minsk Возможность изменения только одной области Нет инструментов, позволяющих загрузить css или js динамически Механизм по перезагрузке.
Advertisements

Ненавязчивый Unobtrusive JavaScript Сергеев Алексей «Открытые Веб-Технологии»
Ekaterina B. Egorkina,© VEELTECH.RU Загрузка и вывод изображений Каким образом можно сохранить картинку в БД, а потом отобразить ее на странице?
JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion»
ДАЛЕЕ БАЗА ДАННЫХ ACCESS Проектирование базы данных Создание базы данных Создание базы данных без помощи мастера Таблицы Создание таблицы в режиме конструктора.
JavaScript и доступность веб- сайтов Владимир Агафонкин.
Вадим Думбравану руководитель проектов D7. ORM. Object-relational mapping Недостатки текущего похода в API На каждую сущность программируется свой GetList,
Разработка больших сайтов Сумин Андрей Разработчик интерфейсов
D7 – новая платформа разработки сайтов и порталов Тушинский Юрий Технический директор Битрикс.
Учитель информатики: МБОУ Староаннинской СОШ Подшивалова Е.Г.
Seo Поисковая оптимизация Продвижение сайта. Поиско́вая оптимиза́ция (англ. search engine optimization, SEO) комплекс мер для поднятия позиций сайта в.
Click to edit Master title style IDK1011 Основы программирования Диалоговые окна Чтение файлов и директорий.
jQuery jQuery библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу.
Работа с сайтом Добавление страниц, вставка видео, вставка информеров.
Разгони свой сайт Лекция 7: «Ненавязчивый» JavaScript Мациевский Николай 1 / 22 webo.in.
Проф. В.К.Толстых, Технологии разработки Internet- приложений Delphi for.NET примеры: работа с файлами Из цикла лекций «Технологии разработки.
Ekaterina B. Egorkina,© VEELTECH.RU Построение страницы с интерактивным отчетом Простейшая страница с отображением данных в табличном виде. Построение.
Интернет- технологии МИИГаИК. Указание XML-документов в ориентире на будущее
САОД кафедра ОСУ 1 Основные абстрактные типы данных Схема процесса создания программ для решения прикладных задач ВУ.
Практикум Для перехода к следующему слайду нажмите кнопку мыши…
Транксрипт:

Боремся с «лишними» переходами на сайте, или еще пара слов о попапах и аяксах Талдыкин Егор Ardas Group

#ahah в Drupal6 // В конструкторе формы $form['country'] = array( '#type' => 'select', '#title' => t('Country'), '#options' => get_countries(), '#ahah' => array( 'path' => 'ahah/get-sities-list', 'wrapper' => 'sities', ), );

Недостатки #ahah в D6 Необходимость реализовывать menu callback Необходимость работы с кешем формы Сложность изменения Drupal.settings Сложность добавления js/css-файлов Изменение одной области страницы в результате ahah-запроса

#ajax в D7 Элементу изменяющему '#ajax' => array( 'callback' => 'sities_ajax_callback', 'wrapper' => 'sities', ), Элементу изменяемому '#prefix' => ' ', '#suffix' => ' ' Callback-функция function sities_ajax_callback($form, $form_state) { return $form['sity']; }

ajax-сабмит формы #prefix/#suffix для всей формы Callback-функция возвращает всю форму graceful degradation

Мультистеповые формы Хранение текущего шага и данных предыдущих шагов в $form_state['storage'] В конструкторе формы switch/case для вывода нужного шага В submit-е формы: сохранение данных текущего шага $step++ $form_state['rebuild'] = TRUE

Ajax-комманды function test_ajax_callback($form, $form_state) { $commands = array( ajax_command_replace('#wrapper', drupal_render($form)), ajax_command_invoke('.selected', 'hide'), ); return array( '#type' => 'ajax', '#commands' => $commands); }

Ajax submit for any form (asaf) Позволяет сохранять любую форму через ajax Вызывает хуки hook_asaf_form_ajax_commands_alter и hook_asaf_form_FORM_ID_ajax_commands_alter для измениния списка ajax-комманд. Добавляет комманды: обновить страницу ( asaf_ajax_command_reload ) перейти по урлу ( asaf_ajax_command_redirect )

Popup Для «временного» или «быстрого» контента, которому не нужен постоянный урл fancybox вместо overlay 2 режима: inline iframe

inline popup Для контента уже присутсвующего на странице Реализуется переносом ветки DOM-объектов внутрь popup-а, а потом назад, для обеспечения работоспособности навешенных js-обработчиков

iframe popup Iframe для изоляции js/css родителя и popup-а Get-параметр для определения режима popup Отключение рендеринга регионов $list = &drupal_static('list_themes', array()); global $theme; unset($list[$theme]->info['regions'][$region]);

Интеграция popup-ов и форм Внутри popup-ов все формы сабмитятся ajax-ом (модуль asaf) Дополнительные ajax-комманды: обновить popup/родителя перейти по урлу в popup-е/родителе закрыть popup Управление коммандами из аттрибутов ссылки (destination и битовая маска режима) Contact us