УрокРазворачивающийся тизер при клике на заголовок ноды

Поступила заявка, сделать следующий урок: "Пример: страница с перечнем новостей, но показываются только тайтлы + дата публикации и автор. Нажимаешь на тайтл и под ним разворачивается на js тизер с ссылкой на полную ноду."

Для начала нам нужен будет вот такой код в файле node.tpl.php:

<div id="node-<?php echo $node->nid; ?>" class="node">
 
<?php if ($title): ?>
    <h2 class = "title">
        <?php echo $title; ?>  <!-- Заголовок статьи -->
    </h2>
<?php endif; ?>
 
<?php if ($teaser): ?> <!-- Если это анонс -->
    <div class = "node_content teaser">
 
        <!-- выводим содержимое анонса -->
        <?php echo $content; ?>
 
        <!-- выводим ссылку на полную ноду -->
        <?php echo l(t('Read more'), 'node/'. $node->nid); ?>
 
    </div>
<?php endif; ?>
 
<?php if ($page): ?> <!-- Если это статья -->
    <div class = "node_content">
        <?php echo $content; ?> 
    </div>
<?php endif; ?>
 
<div class = "name">
    <?php echo $name; ?> <!-- Имя автора статьи -->
</div>
 
<div class="postdate">
    <?php echo date('j F, Y - G:i',$node->created); ?> <!-- Дата создания статьи -->
</div>
 
</div>

Затем в файл в отдельный файл вставляем вот такой скрипт:

$(document).ready(function() {
    $(".node h2.title").click(function() {
        $(this).parent().find(".node_content").toggle();
    });
});

Сохраняем его под каким-нибудь именем.js и подключаем через info-файл. Да-да, хоть он и маленький, но тем не менее это скрипт :)

Теперь всё будет прекрасно работать. Ещё неплохо было бы в css указать .node_content.teaser { display: none; } , т.к. изначально анонсы будут скрыты. А для h2.title { cursor: pointer; } , чтобы пользователь визуально видел что это ссылка.

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

Спасибо большое) а что будут видеть те у кого выключена поддержка js?

12.09.2010 00:32
Аватар пользователя Spleshka
Spleshka написал:

Просто заголовки кликабельные, без тизеров

12.09.2010 00:54
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

тоже самое б через AJAX, доходчиво, только с тизером и фуллбоди, Эх...лети лети лепесток.

06.10.2010 12:52
Аватар пользователя Spleshka
Spleshka написал:

дойдём до аякса, без проблем. Только чуть-чуть попозже

07.10.2010 15:19
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

замените "ложим" на "кладем"-)

07.10.2010 00:24
Аватар пользователя Spleshka
Spleshka написал:

лингвист среди программистов ?))

07.10.2010 15:18
Аватар пользователя D.Choomc
D.Choomc написал:

филолог)

08.10.2010 01:51
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

:WALL:

09.11.2010 14:48
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

А если нужно сделать тоже самое но для вторых или третьих страниц, а не на главной, то как должен выглядеть код?

Объясните зачем нужен этот кусок кода,

<?php if ($page): ?> <!-- Если это статья -->
    <div class = "node_content">
        <?php echo $content; ?> 
    </div>
<?php endif; ?>

если выводить планировалось только тизер?

09.02.2011 07:28
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

сорри, незнаю как корректно изобразить код.

09.02.2011 07:33
Аватар пользователя Spleshka
Spleshka написал:

Ну мы тизер-то выводим, но полная нода тоже ведь должна что-то отображать) Если не планируется переходить по ней на полную ноду - то хотя бы для поисковиков, чтобы страницы пустыми не были

09.02.2011 15:25
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Теперь понятно.
А как быть с этим -
если нужно сделать тоже самое но для вторых или третьих страниц, а не на главной, то как должен выглядеть код?

09.02.2011 17:06
Аватар пользователя Spleshka
Spleshka написал:

Если на вторых и третьих страницах отображается тизер, то код по-прежнему будет работать. В шаблоне же нет зависимостей от главной страницы

09.02.2011 17:11
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

ок, просто меня "$front_page" в коде смутило.

09.02.2011 18:04
Аватар пользователя Spleshka
Spleshka написал:

то было ссылка на главную страницу. Кстати, я поменял формирование этой ссылки на более кошерный - через функцию l(). А то не определялся бы урл модуля pathauto, и всегда линковался бы на node/%nid. А теперь всё будет красиво

09.02.2011 22:36
Аватар пользователя ViktorK
ViktorK написал:

Извиняюсь за возможно глупый вопрос, т.к. только начал разбираться с Друпалом... И в случае анонса, и в случае статьи выводится одна и та же переменная $content, а значение этой переменной потом меняется в зависимости от того, анонс это или статья?

21.03.2011 13:37
Аватар пользователя Spleshka
Spleshka написал:

Да, меняется.

18.10.2011 05:33
Аватар пользователя Сергей
Сергей написал:

Сорри, с Drupal пока на Вы, поэтому прошу подсказки - во views вывожу тизеры новостей, в предпросмотре темы garland все ок, а в моей собственной теме не выводятся линки на полный материал. Где пнуть, чтобы заработало? Спасибо заранее. PS Drupal 6.25

30.04.2012 14:51
Аватар пользователя Сергей
Сергей написал:

Упс, искал в сети ответ на вопрос, нашел подходящую тему, чтобы задать вопрос, а ответ как раз и есть в этой теме урока - создал node.tpl.php как у Вас, убрал лишнее для меня (автор, время) - все стало хорошо :)

PS Спасибо, что Вы есть! :)

30.04.2012 15:23
Аватар пользователя Сергей
Сергей написал:

К view можно как-то это прикрутить? И есть ли путь сделать так что бы тизер появлялся при наведении мышки.
..извиняюсь за возможно глупый для кого-то вопрос, я новичок в друпале, чуть больше полугода :)

31.01.2014 22:34

Комментировать