Боремся с «лишними» переходами на сайте, или еще пара слов  о попапах и аяксах Талдыкин Егор Ardas Group
#ahah в Drupal6 <ul><li>// В конструкторе формы </li></ul><ul><li>$form['country'] = array( </li></ul><ul><li>'#type' => '...
Недос татки #ahah  в D6 <ul><li>Нео бходимость реализовы вать menu callback </li></ul><ul><li>Необходимость работы с кешем...
#ajax  в D7 <ul><li>Элементу изменяющему </li></ul><ul><li>'#ajax' => array( </li></ul><ul><li>'callback' => 'sities_ajax_...
ajax-сабмит формы <ul><li>#prefix/#suffix для всей формы </li></ul><ul><li>Callback-функция возвращает всю форму </li></ul...
Мультистеповые формы <ul><li>Хранение текущего шага и данных предыдущих шагов в  $form_state['storage'] </li></ul><ul><li>...
Ajax-комманды <ul><li>function test_ajax_callback($form, $form_state) { </li></ul><ul><li>$commands = array( </li></ul><ul...
Ajax submit for any form (asaf) <ul><li>Позволяет сохранять любую форму через ajax </li></ul><ul><li>Вызывает хуки  hook_a...
Popup <ul><li>Для «временного» или «быстрого» контента, которому не нужен постоянный урл </li></ul><ul><li>fancybox вместо...
inline popup <ul><li>Для контента уже присутсвующего на странице </li></ul><ul><li>Реализуется переносом ветки DOM-объекто...
iframe popup <ul><li>Iframe для изоляции js/css родителя и popup-а </li></ul><ul><li>Get-параметр для определения режима p...
Интеграция popup-ов и форм <ul><li>Внутри popup-ов все формы сабмитятся ajax-ом (модуль asaf) </li></ul><ul><li>Дополнител...
 
Upcoming SlideShare
Loading in...5
×

Боремся с "лишними" переходами на сайте, или еще пара слов о попапах и аяксах.

1,026
-1

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,026
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Боремся с "лишними" переходами на сайте, или еще пара слов о попапах и аяксах.

  1. 2. Боремся с «лишними» переходами на сайте, или еще пара слов о попапах и аяксах Талдыкин Егор Ardas Group
  2. 3. #ahah в Drupal6 <ul><li>// В конструкторе формы </li></ul><ul><li>$form['country'] = array( </li></ul><ul><li>'#type' => 'select', </li></ul><ul><li>'#title' => t('Country'), </li></ul><ul><li>'#options' => get_countries(), </li></ul><ul><li>'#ahah' => array( </li></ul><ul><li>'path' => 'ahah/get-sities-list', </li></ul><ul><li>'wrapper' => 'sities', </li></ul><ul><li>), </li></ul><ul><li>); </li></ul>
  3. 4. Недос татки #ahah в D6 <ul><li>Нео бходимость реализовы вать menu callback </li></ul><ul><li>Необходимость работы с кешем формы </li></ul><ul><li>Сложность изменения Drupal.settings </li></ul><ul><li>Сложность добавления js/css-файлов </li></ul><ul><li>Изменение одной области страницы в результате ahah-запроса </li></ul>
  4. 5. #ajax в D7 <ul><li>Элементу изменяющему </li></ul><ul><li>'#ajax' => array( </li></ul><ul><li>'callback' => 'sities_ajax_callback', </li></ul><ul><li>'wrapper' => 'sities', </li></ul><ul><li>), </li></ul><ul><li>Элементу изменяемому </li></ul><ul><li>'#prefix' => '<div id=&quot;sities&quot;>', </li></ul><ul><li>'#suffix' => '</div>' </li></ul><ul><li>Callback-функция </li></ul><ul><li>function sities_ajax_callback($form, $form_state) { </li></ul><ul><li>return $form['sity']; </li></ul><ul><li>} </li></ul>
  5. 6. ajax-сабмит формы <ul><li>#prefix/#suffix для всей формы </li></ul><ul><li>Callback-функция возвращает всю форму </li></ul><ul><li>graceful degradation </li></ul>
  6. 7. Мультистеповые формы <ul><li>Хранение текущего шага и данных предыдущих шагов в $form_state['storage'] </li></ul><ul><li>В конструкторе формы switch/case для вывода нужного шага </li></ul><ul><li>В submit-е формы: </li></ul><ul><ul><li>сохранение данных текущего шага </li></ul></ul><ul><ul><li>$step++ </li></ul></ul><ul><ul><li>$form_state['rebuild'] = TRUE </li></ul></ul>
  7. 8. Ajax-комманды <ul><li>function test_ajax_callback($form, $form_state) { </li></ul><ul><li>$commands = array( </li></ul><ul><li>ajax_command_replace('#wrapper', drupal_render($form)), </li></ul><ul><li>ajax_command_invoke('.selected', 'hide'), </li></ul><ul><li>); </li></ul><ul><li>return array( </li></ul><ul><li>'#type' => 'ajax', </li></ul><ul><li>'#commands' => $commands); </li></ul><ul><li>} </li></ul>
  8. 9. Ajax submit for any form (asaf) <ul><li>Позволяет сохранять любую форму через ajax </li></ul><ul><li>Вызывает хуки hook_asaf_form_ajax_commands_alter и hook_asaf_form_FORM_ID_ajax_commands_alter для измениния списка ajax-комманд. </li></ul><ul><li>Добавляет комманды: </li></ul><ul><ul><li>обновить страницу ( asaf_ajax_command_reload ) </li></ul></ul><ul><ul><li>перейти по урлу ( asaf_ajax_command_redirect ) </li></ul></ul>
  9. 10. Popup <ul><li>Для «временного» или «быстрого» контента, которому не нужен постоянный урл </li></ul><ul><li>fancybox вместо overlay </li></ul><ul><li>2 режима: </li></ul><ul><ul><li>inline </li></ul></ul><ul><ul><li>iframe </li></ul></ul>
  10. 11. inline popup <ul><li>Для контента уже присутсвующего на странице </li></ul><ul><li>Реализуется переносом ветки DOM-объектов внутрь popup-а, а потом назад, для обеспечения работоспособности навешенных js-обработчиков </li></ul>
  11. 12. iframe popup <ul><li>Iframe для изоляции js/css родителя и popup-а </li></ul><ul><li>Get-параметр для определения режима popup </li></ul><ul><li>Отключение рендеринга регионов </li></ul><ul><li>$list = &drupal_static('list_themes', array()); </li></ul><ul><li>global $theme; </li></ul><ul><li>unset($list[$theme]->info['regions'][$region]); </li></ul>
  12. 13. Интеграция popup-ов и форм <ul><li>Внутри popup-ов все формы сабмитятся ajax-ом (модуль asaf) </li></ul><ul><li>Дополнительные ajax-комманды: </li></ul><ul><ul><li>обновить popup/родителя </li></ul></ul><ul><ul><li>перейти по урлу в popup-е/родителе </li></ul></ul><ul><ul><li>закрыть popup </li></ul></ul><ul><li>Управление коммандами из аттрибутов ссылки (destination и битовая маска режима) </li></ul><ul><li><a href=&quot;/feedback&quot; class=&quot;popup-link&quot; data-popup-mode=&quot;4&quot; data-popup-destination=&quot;feedback/thanks&quot;>Contact us</a> </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×