1. Главная
  2. Блоги
  3. Блог karasiov@drupal.org

BeautyTips - тултипы дешево и сердито

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

Аватар пользователя karasiov@drupal.org karasiov@drupal.org 12 ноября 2008 в 16:44

Если вам надо изменить стандартный вид тултипов к ссылкам, каковые тултипы выглядят неприглядно по умолчанию, вы можете воспользоваться свеженьким плагином для jQuery. Он носит название BeautyTips и его описание расположено здесь.

Включение этого плагина можно произвести следующим образом.
1. Скачать файл.
2. Поместить его в каталог где лежит ваша рабочая тема.
3. Cослаться на файл из шаблона page.tpl.php (или что там у вас) например так:

<script src="<?php print base_path() . path_to_theme('имя_темы')?>/jquery.bt.js"></script>

4. Добавить туда же (в page.tpl.php) следующий код:

$('a[href]').bt({
  titleSelector: "attr('title')",
  fill: 'red',
  cssStyles: {color: 'white', fontWeight: 'bold', width: 'auto'},
  width: 400,
  padding: 10,
  cornerRadius: 10,
  animate: true,
  spikeLength: 15,
  spikeGirth: 5,
  positions: ['left', 'right', 'bottom'],
});

Итак у вас все(!!!) ссылки на странице будут выбрасывать красный тултип с содежимым атрибута title при наведении на них курсора мыши. Даже если атрибут title будет пуст!!! Для более точного выбора ссылок следует воспользоваться селекторами jQuery (см. раздел TRAVERSING AND SELECTORS).

Ну и так далее...

На самом деле тултипы можно повесить на любой элемент страницы.

Рабочий пример смотрите тут.

Комментарии

Аватар пользователя karasiov@drupal.org karasiov@drupal.org 12 ноября 2008 в 17:18

Химический Али wrote:
Тултипы - это всплывающие подсказки.

Стыжусь, краснею -- но переписывать лень.
Спасибо, впрочем, за уточнение.

Аватар пользователя Ne01eX Ne01eX 17 ноября 2008 в 22:02

В заголовок шаблона page.tpl.php

В ставил код:

<script src="<?php print base_path() . path_to_theme()?>/js/jquery.bt.js"></script>
<script language="JavaScript" type="text/javascript">
    $('a[href]').bt({
      titleSelector: "attr('title')",
      fill: 'red',
      cssStyles: {color: 'white', fontWeight: 'bold', width: 'auto'},
      width: 400,
      padding: 10,
      cornerRadius: 10,
      animate: true,
      spikeLength: 15,
      spikeGirth: 5,
      positions: ['left', 'right', 'bottom'],
    });
</script>

В консоле ошибок FireFox пишется:

Quote:

Error: $("a[href]").bt is not a function
Source File: http://lug.ru/
Line: 47

Тултипами и не пахнет. Че я делаю не так?

Аватар пользователя Ne01eX Ne01eX 18 ноября 2008 в 22:14

С какими путями не так?

<?php print base_path() . path_to_theme()?>/js/jquery.bt.js">

js-скрипт лежит в этой папке...

Код пункта 4 я правильно заюзал?

Аватар пользователя karasiov@drupal.org karasiov@drupal.org 19 ноября 2008 в 16:51

Ох, извините, естественно у меня в тексте ошибка.
В вызове path_to_theme надо параметром имя темы передать.
Ничо не надо передавать. Соврал.

Аватар пользователя volocuga volocuga 19 ноября 2008 в 18:22

Немного не по теме:давно собираюсь убрать уродские пояснения возле каждого поля/ссылки в админке да и в юзерской части.Просто что то типа иконки,при наведении на которую курсора появлялось окошко с подсказкой.Вообщем-то самое простое-тупо вставить нужный HTML в строки переводов,но этож сколько лопатить то Dirol

Есть ли готовый модуль,что бы Бац! и изменить стандартные подсказки

Аватар пользователя Scarrr Scarrr 14 марта 2009 в 0:59

я даже модуль подключил BeutyTips - через него то точно подключается плагин - а ничего всё равно не работает

Аватар пользователя Scarrr Scarrr 14 марта 2009 в 2:07

Напишите пожалуйста рабочий код - как например сделать подсказки для всех ссылок на главной странице - попробовал разные варианты - но ничего не получается Sad

Аватар пользователя Scarrr Scarrr 14 марта 2009 в 2:34
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.bt.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('a').bt();
  });
</script>

может у кого нибудь ещё не заработает - вот - мой кусок кода, который заработал

Аватар пользователя Scarrr Scarrr 14 марта 2009 в 23:41

только проблемы с работой в ИЕ

вроде для этого нужно загрузить скрипт, разработанный гуглом - для работы с тегом canvas

<!--[if IE]>
<script type="text/javascript" src="/path/to/excanvas-compressed.js"></script>
<![endif]-->

Я попробовал - но всё равно не работает, выполняется, но с ошибками на странице - и тултипы не отображаются.

2 karasiov@drupal.org: а Вы в ИЕ не пробовали это делать?

Аватар пользователя volocuga volocuga 28 марта 2009 в 14:28

Получилось

Мой вариант:

В page.tpl.php между :

<script type="text/javascript" src="/site2/sites/all/themes/my_theme/js/jquery.bt.js"></script>
<!--[if IE]><script src="/site2/sites/all/themes/my_theme/js/excanvas-compressed.js" type="text/javascript" charset="utf-8"></script><![endif]-->
<script type="text/javascript">
  $(document).ready(function() {
    $('#help a').bt();
  });
</script>

,где help-название дива,в пределах которого будут показаны тултипы (в моём случае <div id="help"></div>)

jquery.bt.js и excanvas-compressed.js берутся из зипа отсюда
http://plugins.jquery.com/project/bt