Интеграция JS скрипта в Друпал 7. Часть 2

Теги: 
Друпал
Друпал tooltip
Создание модуля Друпал

Продолжим начатое в предыдущей статье . Итак мы имеем работающий скрипт тултипа. Прежде чем заняться его интеграцией в друпал, скрипт необходимо немного подправить. Сначала подчистим и изменим 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 , в этой функции закомментируем указанные строки 
            $(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
Результат на скрине. Теперь, когда скрипт подогнан под наши нужды, можно приступить его интеграции в друпал, что и будет рассмотрено в следующей статье.

 
  • 1057 просмотров