Интеграция JS скрипта в Друпал 7. Часть 2
Продолжим начатое в предыдущей статье . Итак мы имеем работающий скрипт тултипа. Прежде чем заняться его интеграцией в друпал, скрипт необходимо немного подправить. Сначала подчистим и изменим HTML код. Уберем лишние примеры и попробуем привязать тултип не к ссылке, а к тегу <span>.
Попутно разберемся как работает скрипт, снова обратившись к доке.
Элемент, к которому привязывается тултип, должен иметь атрибут data-tooltip значением которого является ID существующего тултипа. Например так, как в нашем коде
data-tooltip="sticky1"Подобный атрибут может иметь любой элемент, находяйся в блоке <body></body>
Сами тултипы находятся в двух контейнерах <div> . Внешний с классом stickytooltip и внутренний, в котором располагаются слои с тултипами, каждый из которых имеет идентификатор соответствующий значению атрибутов элементов data-tooltip к которым привязан тултип. Например так.
<div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1"> Sticky Tooptip 1 content here... </div> <div class="stickystatus"></div></div> </div>Внешний контейнер строка 1-7. Внутренний 2-6. Контейнер с HTML кодом тултипа строка 3-5. Пустой <div> с классом stickystatus необходим для отображения статус-бара тултипа. Приведенный выше код описывающий тултип, размещается в любом месте блока <body></body> , поскольку не отображается на странице. Задача JS скрипта (я в JS не силен) очевидно заключается в том, что по событию hover он подцепляет <div> нужного тултипа, согласно его ID и отображает его в нужном месте.
Теперь пробуем оживить наш код.
<!DOCTYPE HTML> <html> <head> <title>Проверка скрипта</title> <meta charset="utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="stickytooltip.js"></script> <link rel="stylesheet" type="text/css" href="stickytooltip.css" /> </head> <body> <p><span data-tooltip="sticky1" style="cursor:pointer;"><b>Это текст в контейнере</b></span></p> <!--HTML for the tooltips--> <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1" class="atip" style="width:350px"> Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. <img style="float:left;" src="4.jpg"/>Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты. <br>Когда от милой моей долины поднимается пар и полдневное солнце стоит над непроницаемой чащей темного леса и лишь редкий луч проскальзывает в его святая святых, а я лежу в высокой траве у быстрого ручья и, прильнув </div> </div> <div class="stickystatus"></div></div> </body> </html>Строка 11 описывает контейнер <span> содержащий какой-либо текст. Он имеет аттрибут data-tooltip="sticky1" указывающий на <div> с идентификатором "sticky1" , в котором описан HTML код тултипа, который должен появиться при наведении курсора на

контейнер.Поскольку мы имеем дело не со ссылкой, то определен стиль курсора style="cursor:pointer;" , который изменяет вид курсора над контейнером по типу ссылки.
Строки 15-19 описывают код тултипа, в который помещена картинка, находящаяся в корне хоста. Также, при помощи описания стиля, style="width:350px" изменена ширина окна тултипа.
Ну и еще пожалуй стоит убрать возможность фиксировать окно тултипа нажатием S . Вполне достаточно и нажатия правой клавиши мыши. Для этого в JS файле stickytooltip.js , в этой функции закомментируем указанные строки
Ну и еще пожалуй стоит убрать возможность фиксировать окно тултипа нажатием S . Вполне достаточно и нажатия правой клавиши мыши. Для этого в JS файле stickytooltip.js , в этой функции закомментируем указанные строки
$(this).bind('keypress', function(e){ var keyunicode=e.charCode || e.keyCode // if (keyunicode==115){ //if "s" key was pressed // stickytooltip.docktooltip($, $tooltip, e) // } })А также я изменил строки 13, 14 этого-же файла так
stickynotice1: ["Кликните правой клавишей", "чтобы зафиксировать окно"], //customize tooltip status message stickynotice2: "Кликните в любом месте вне окна, для его скрытия", //customize tooltip status messageРезультат на скрине. Теперь, когда скрипт подогнан под наши нужды, можно приступить его интеграции в друпал, что и будет рассмотрено в следующей статье.