1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Как реализовать такой тип якоря во вкладках (или в меню) в ноде?

Главные вкладки

Аватар пользователя Maximal Maximal 16 сентября 2014 в 23:08

Всем доброе время суток!
Нужна небольшая помощь.
Есть нода с тремя вкладками quicktabs. Но quicktabs не позволяет реализовать следующее.
Хочу чтобы вкладки у ноды работали за принципом сайта на одну страницу. То есть как якори на определенную часть ноды.
Каждая нода уникальная и имеет свой текст. Добавлять ноды могут все (все, кроме анонимов).
Кто подскажет что нибудь. Возможно есть готовое решение в виде модуля. Пробовал также field group, но пока не нашел то что нужно.
Использую Д7.
За ранее большое спасибо какой нибудь совет или помощь!
P.S. Если кому-то это покажется очень легким вопросом - извините за такой вопрос. Потратил уже немало времени, поэтому и спрашиваю.

Комментарии

Аватар пользователя Nikit Nikit 17 сентября 2014 в 4:33

"Maximal" wrote:
Хочу чтобы вкладки у ноды работали за принципом сайта на одну страницу. То есть как якори на определенную часть ноды.
Каждая нода уникальная и имеет свой текст. Добавлять ноды могут все (все, кроме анонимов).

Не понятно, может подробнее?

Аватар пользователя Maximal Maximal 17 сентября 2014 в 9:14

Есть нода с тремя вкладками. Вывод через блоки views. Три блока.
Активаня первая вкладка по умолчанию. Нажимаем на вторую вкладку - прокрутка на определенное место ноды, то есть к второму блоку.
Нажимаем на третью - прокрутка к блоку три ноды.
Вкладки - floating.
Как можно такое реализовать? Пока играюсь с menu_tokens, но не получается.

Аватар пользователя Maximal Maximal 17 сентября 2014 в 11:48

Удалось реализовать с помощью menu_tokens dev версия + floating block.
Пока осталось что-то придумать с прокруткой. Возможно поможет модуль Scroll to destination anchors.

Аватар пользователя gun_dose gun_dose 17 сентября 2014 в 12:02

если ссылки на якоря заработали, то проще написать и подключить к теме скрипт для плавной прокрутки, чем утяжелять систему модулями.

Аватар пользователя Maximal Maximal 17 сентября 2014 в 12:44

gun_dose wrote:
если ссылки на якоря заработали, то проще написать и подключить к теме скрипт для плавной прокрутки, чем утяжелять систему модулями.

Та я не силен в скриптах. И модуль Scroll to destination anchors не работает для такого типа якорей. Но спасибо за путь, куда двигаться.
Попробую поискать. Возможно кто-то писал подобное, а я уже поправлю под себя ))
Возможно Вы встречали подобные топики?

У меня ссылка в пути выглядит так [current-page:url]#block-views-profile-block-2 - это не сильно усложнить мне писание скрипта?
Возможно нужно на что-то обратить внимание?

Аватар пользователя gun_dose gun_dose 17 сентября 2014 в 14:12

"Maximal" wrote:
У меня ссылка в пути выглядит так [current-page:url]#block-views-profile-block-2 - это не сильно усложнить мне писание скрипта?
Возможно нужно на что-то обратить внимание?

со ссылкой на якорь вообще хорошо - не надо ссылкам класс присваивать. Гугл по запросу "плавная прокрутка jquery" даёт множество дельных советов. Можно например так:

(function($){
 $('a[href^="#"]').click(function(){
        var target = $(this).attr('href');             
        $('html, body').animate({scrollTop: $(target).offset().top}, 1000);            
        return false;
   });
})(jQuery);
Аватар пользователя Maximal Maximal 18 сентября 2014 в 21:04

gun_dose wrote:

(function($){
 $('a[href^="#"]').click(function(){
        var target = $(this).attr('href');             
        $('html, body').animate({scrollTop: $(target).offset().top}, 1000);            
        return false;
   });
})(jQuery);


Не получается что-то. Создал файл scroll.js, в котором прописал данный код.
Потом добавил в инфо файл темы строку scripts[] = scripts/scroll.js
Файл разместил в папке scripts в корне темы.
Что сделал не так? ))
Кэш чистил

Аватар пользователя gun_dose gun_dose 19 сентября 2014 в 10:33

может селектор неверный. Можно попробовать привязать его к классу, а не к шаблону пути ссылки. Ну и проверить, что на каком шагу не работает. Я обычно для отладки вставляю какой-нибудь alert(123) сразу после того оператора, который неизвестно, работает ли.

Ну и само собой, глянуть сперва код страницы, чтобы проверить, подключается ли скрипт.

Аватар пользователя Maximal Maximal 19 сентября 2014 в 12:19

gun_dose wrote:

Ну и само собой, глянуть сперва код страницы, чтобы проверить, подключается ли скрипт.

Скрипт подключается. Вот так отображается.
В вашем коде я также заменял top на bottom, так как прокрутка вообщем вниз (а также в верх.)

 
<script src="http://mysite.com/modules/statistics/statistics.js?nc5259" type="text/javascript">
(function ($) {
$(document).ready(function() {
$.ajax({
type: "POST",
cache: false,
url: Drupal.settings.statistics.url,
data: Drupal.settings.statistics.data
});
});
})(jQuery);
</script>
Аватар пользователя Maximal Maximal 19 сентября 2014 в 13:07

gun_dose wrote:
это же совсем другой скрипт. Зачем он тут?)))

Вообщем кода не видно. Это весь скрипт, который был.

Аватар пользователя gun_dose gun_dose 19 сентября 2014 в 12:25

"Maximal" wrote:
В вашем коде я также заменял top на bottom, так как прокрутка вообщем вниз (а также в верх.)

топ здесь вообще-то не указывает направление прокрутки, а показывает координату, куда крутить. Естественно, что координата высоты считается от верха страницы

Аватар пользователя gun_dose gun_dose 19 сентября 2014 в 14:33

там в твоём случае нужно $('a[href^="#"]') заменить на $('a[href*="#"]'). Т.е. звёздочку вместо галки поставить, потому что решётка у тебя не в начале ссылки. Но я так и не понял, подключается сам скрипт у тебя или нет)))

Аватар пользователя Maximal Maximal 19 сентября 2014 в 17:52

gun_dose wrote:
там в твоём случае нужно $('a[href^="#"]') заменить на $('a[href*="#"]'). Т.е. звёздочку вместо галки поставить, потому что решётка у тебя не в начале ссылки. Но я так и не понял, подключается сам скрипт у тебя или нет)))

Я уже пробовал заменять. Не помогло.

Скрипт подгружается. И при переходе по ссылке - вижу код своего скрипта.

<script type="text/javascript" src="http://mysite.com/themes/bartik/scripts/scroll.js?nc5hik"></script>

Вот весь код под тэгом script. Возможно где-то конфликт

  <script type="text/javascript" src="http://wotweb.com/videocv/sites/all/modules/jquery_update/replace/jquery...></script>
<script type="text/javascript" src="http://mysite.com/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="http://mysite.com/misc/drupal.js?nc5hik"></script>
<script type="text/javascript" src="http://mysite.com/sites/all/modules/views_slideshow/js/views_slideshow.j...></script>
<script type="text/javascript" src="http://mysite.com/sites/all/modules/admin_menu/admin_devel/admin_devel.j...></script>
<script type="text/javascript" src="http://mysite.com/sites/all/modules/floating_block/floating_block.js?nc5...></script>
<script type="text/javascript" src="http://mysite.com/sites/all/modules/popup/popup.js?nc5hik"></script>
<script type="text/javascript" src="http://mysite.com/sites/all/libraries/jquery.cycle/jquery.cycle.all.min....></script>
<script type="text/javascript" src="http://mysite.com/sites/all/modules/views_slideshow/contrib/views_slides...></script>
<script type="text/javascript" src="http://mysite.com/sites/all/libraries/superfish/superfish.js?nc5hik"></script>
<script type="text/javascript" src="http://mysite.com/sites/all/libraries/superfish/supposition.js?nc5hik"></script>
<script type="text/javascript" src="http://mysite.com/sites/all/libraries/superfish/jquery.hoverIntent.minif...></script>
<script type="text/javascript" src="http://mysite.com/sites/all/libraries/superfish/supersubs.js?nc5hik"></script>
<script type="text/javascript" src="http://mysite.com/sites/all/modules/superfish/superfish.js?nc5hik"></script>
<script type="text/javascript" src="http://mysite.com/themes/bartik/scripts/scroll.js?nc5hik"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":....тут долгий код или текст............. /statistics\/statistics.php"}})
//--><!]]>
</script>