- PVSM.RU - https://www.pvsm.ru -
Здравствуй! Данная статья — презентация javascript-класса, к которому я пришел в результате перевода веб-сервисов на ajax-навигацию.
Первое, что пришлось сделать — переписать выдачу в PHP-фреймворке в случае, если в метод пришел ajax-запрос. Было:
public function method($id = 0)
{
//........
$content = $this->load->view('dom/content', $data, true);
$this->load->view('dom/carcass', $content);
}
Стало:
public function method($id = 0)
{
//........
$content = $this->load->view('dom/content', $data, true);
if ($this->_jetsAjaxNav($content, $data)) return true;
$this->load->view('dom/carcass', $content);
}
protected function _letsAjaxNav($content, $data)
{
if (empty($this->isAjax)) return false;
$response = (object)array();
$response->content = $content;
$response->controller = $this->router->controller;
$response->method = $this->router->method;
$response->title = $data->title;
$response->destinationNode = 'body';
$this->output->set(json_encode($response));
return true;
}
Что из этого вышло [2] или лучше так:
hg clone https://code.google.com/p/x13ajax-nav-js/
Требования:
Так же ссылки для ajax-навигации должны иметь класс ajaxNav или возможен альтернативный вариант — первый родитель ссылки должен иметь класс ajaxNav, например:
<div class="pagination ajaxNav">
<a href="url">1</a>
<a href="url">2</a>
<a href="url">3</a>
<a href="url">3</a>
</div>
Запуск конструктора с передачей в него объекта window (так уж получилось, но именно так использовать совсем не обязательно)
и объекта jQuery (реализовано для избежания вероятных конфликтов в пространстве имён)
$$$ = new $$$(window, $);
Устанавливаем прослойку для изменения дополнительных служебных данных и описания (на случай взаимодействия с поисковиками):
$$$.$.processAjaxResponseInterlayer = function (d)
{
if (typeof d.hashId != 'undefined')
this.params.hashId = d.hashId;
if (typeof d.userId != 'undefined')
this.params.userId = d.userId;
if (typeof d.description != 'undefined')
this.jQuery('#description').attr('content', d.description);
};
Устанавливаем визуальные эффекты:
$$$.$.navEffect = function ()
{
this.jQuery('html').css('box-shadow', 'inset 0px 0px 10px 10px rgba(0, 0, 150, 0.2)');
this.jQuery('a').css({'cursor': 'wait'});
};
$$$.$.navDisEffect = function ()
{
this.jQuery('a').css({'cursor': 'pointer'});
this.jQuery('html').css('box-shadow', '');
}
Во всех методах+контроллерах превращаем все формы в ajax-формы:
$$$('*', letsAjaxAllForms);
function letsAjaxAllForms()
{
//.....
}
Запускаем инициализацию лайтбокса для просмотра фото во всех методах просмотра:
$$$('/view', initLightBox);
function initLightBox()
{
//.....
}
Запускаем инициализацию валидатора форм во всех методах редактирования:
$$$('/edit', initValidation);
function initValidation()
{
//.....
}
В контроллере профиля во всех методах инициализируем мессенджер:
$$$('profile/', initIM);
function initIM()
{
//.....
}
Надеюсь, данный класс обретёт жизнь и в ваших проектах. Спасибо за внимание, алоха!
Автор: frostosx
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/32150
Ссылки в тексте:
[1] обрадовал: https://www.google.ru/search?q=popstate%20chrome%20bug
[2] Что из этого вышло: https://code.google.com/p/x13ajax-nav-js/downloads/list
[3] Источник: http://habrahabr.ru/post/176733/
Нажмите здесь для печати.