AJAX popup
Цель: при клике на ссылку (заголовок ноды, картинка, дата или что нам в голову взбредет) открывается popup содержащий нужные нам поля ноды. Содержание грузиться динамически.
Условие: все через views.
Нам нужно: Views Bonus Pack. Качаем, включаем.
Создаем views который будет "грузиться".
Добавляем тип отображения feed, где Style == XLS file.
Указываем Path (например xls), и устанавливаем в аргументах Node: Nid.
Настриваем поля.
Создаем views который будет "грузить".
Обязательное поле в нем Node: Nid, ставим его в самое начало и скрываем.
Теперь в поле с заголовком нужно указать Output this field as a link где Link path: == xls/[nid].
Теперь при клике на заголовок будет открываться нужный нам xls файл.
Осталось лишь одно - прикрутить к этому делу какой-нибудь lightbox. Я использую fancybox. Вот код для него:
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : this,
data : $(this).serializeArray(),
success: function(data) {
var html = new Array();
var i = 0;
$(data).find("td").each(function(){
html[i] = $(this).html();
i++;
});
c = '<div class="views-field-field-img-fid">'+html[0]+'</div>'+
'<div class="views-field-title">'+html[1]+'</div>'+
'<div class="date-display-single">'+html[2]+'</div>'+
'<div class="">'+html[3]+'</div>'
;
$.fancybox(c);
}
});
return false;
});
Принимаю вопрос, предложения, благодарности.
- Блог
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Комментарии
а можно поподробнее, очень интересно, пример можете показать где реализованно
Пример на польском: http://bialystok2016.eu/calendar. Подробнее что конкретно?
UPDATE. Пример больше не работает. Сайт (не по моей воле) перехал на джумлу
спасибо, за пример. очень полезно, спасибо вам будем разбираться.
Пожалуйста. Будут вопросы - задавайте.
Спасибо, что поделились. Тоже стоит похожая задача, хотел делать этим способом http://wootenswebdesign.com/quick-and-easy-beauty-tips используя модуль BeautyTips
Сейчас потестирую ваш способ и определюсь
Тут не принципиально каким модулем js это отображать. Важно лишь то, что этот способ взвращает "чистые" поля. Я пробовал возвращать разными форматами (JSON, XML и т.п.) но коректно картинки отображаются только в XLS.
не работает в google chrome 5.0.34
не оптимальный селектор. впрочем если дом небольшой то и так сойдет.
$(".views-field-title a").click(
Какой будет оптимальным?
спасибо, добавил в закладки
однако
как бы тутда прикрутить обычный лайтбокс (который так и так есть для имэджкэш)
Rewrite the output of this field ->
а можно как нибудь сделать, только чтобы он не при клики а при наведении срабатывал, но все равно и так очень круто.
Можно сделать. $(".views-field-title a").click( function()... меняем click на hover и будет при наведении.
Вроде да, но без лазания в код не выйдет. Здесь (
c = '<div class="views-field-field-img-fid">'+html[0]+'</div>...) мы добавляем стили к каждому загружаемому полю и стандартными методами этого помоему сделать нельзя. Хотя, если память мне не изменяет, лайтбокс и может отображать html без танцев с бубном, но в данном случаи он отобразит несформатированный текст.в закладки
В зкаладки!
Очень понравился сайт с примером!
Имелось в виду XSL? (думаю, лист Excel тут ни при чём)
на сайте не понял, куда кликать, чтобы увидеть всплывающее окно
Кликать на загаловки. Имелось ввиду XLS, ничего другого думать не нужно. Вообще я тоже не в восторгах от использования этого формата, но это единственный формат которой нормально работает с imagecache в views, все остальные пытаются вставить массив с данными.
только после изучения JavaScript'а понял, куда кликать
"ссылки"-то заголовков никак не выделены...
красиво получилось
надо попробовать
два пути. первый посмотреть в ваш штмль чтобы сказать точнее
второй путь более универсальный обрабатывать
$(document).click(function(e)) {
if ($(e.target).hasClass(.views-field-title)) {выполнить что там надо}
}
повторюсь, заниматься такой оптимизацией стоит если у вас очень много элементов на которые вы вешаете событие клик.
Пользы много, работы - мало. Спасибо за пример оптимизации.
Хм, да, действительно, они называют это листом Excel, хотя на самом деле это html. Лучше наверное тогда в XML сохранять, заголовков будет меньше.
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : this,
data : $(this).serializeArray(),
success: function(data) {
var html = new Array();
var i = 0;
$(data).find("td").each(function(){
html[i] = $(this).html();
i++;
});
c = '<div class="views-field-field-img-fid">'+html[0]+'</div>'+
'<div class="views-field-title">'+html[1]+'</div>'+
'<div class="date-display-single">'+html[2]+'</div>'+
'<div class="">'+html[3]+'</div>'
;
$.fancybox(c);
}
});
return false;
});
А куда собственно этот код вставить ?
это jQuery код. надо вставить в файл скрипта который подгрузится вместе со страницей. так я понимаю.
О! Молодца. Сумели настроить fancybox под ИЕ7. А у меня что-то бекграунд опасити не пашет.
А возможно ли в окошке получить поля для редактирования ноды?
Вывод контента - это конечно полезно в ряде случаев, но админить ноды "налету" было бы вообще здоровско!
Однако, при отключенном яваскрипт, пробиться к инфе простыми способами невозможно. Я имею ввиду польский пример. Не проработано.
тест
У меня fancybox не работает
вот еще пример сайта с использованием popup http://mkudrin.jino.ru/spares
Здесь я использовал скрипт highslide + темизация шаблона. Сайт в разработке, просьба не утыкивать)
Тактический глушитель - супер идея!!!
очень спасибо
Добрый день уважаемое сообщество не могу понять куда вставлять данный код, интуитивно понимаю что создать файл и всавить его туда, но куда именно помещать этот файл так и не понял или в какой файл его вставить направьте пожалуйста! Также использую fancybox
как вариант, создаете в папке с темой .js файл и прописываете его в .info файле:
scripts[] = ajaxpopup.js