"Пример: страница с перечнем новостей, но показываются только тайтлы + дата публикации и автор. Нажимаешь на тайтл и под ним разворачивается на 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; ?> <a href = "<?php echo $front_page; ?>node/<?php echo $node->nid; ?>"> <?php echo t('Read more'); ?> <!-- выводим ссылку на полную ноду --> </a> </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-файл:
В info-файл скрипты и css подключаются таким образом:
JavaScript
scripts[] = скрипт.jsCSS
stylesheets[all][] = style.css
Бывают случаи, когда подключать требуется скрипт или стиль только для конкретной страницы, или для определённого типа материала. В таком случае файлы надо подключать через php-код:
JavaScript
<?php drupal_add_js(drupal_get_path('theme','имяТемы').'/скрипт.js'); ?>CSS
<?php drupal_add_css(drupal_get_path('theme','имяТемы').'/style.css'); ?>
Теперь всё будет прекрасно работать. Ещё неплохо было бы в css указать .node_content.teaser { display: none; } , т.к. изначально анонсы будут скрыты. А для h2.title { cursor: pointer; } , чтобы пользователь визуально видел что это ссылка.