Tooltip в модулях и компонентах joomla

января 8, 2009

Многие задаются вопросом: “есть ли возможность средствами HTML и CSS реализовать tooltips ( всплывающие подсказки ) в Joomla 1.5″ - да есть, и не только в Joomla 1.5, а везде, но не совсем полноценно и не для всех браузеров, если говорить только про HTML и CSS. Способ очень простой. Но он в тоже время и несколько ресурсоемкий, для веб-мастера. Суть его заключается в том, что настоящий title у ссылки отсутствует, а в месте где необходимо сделать красивый тултип, мы используем конструкцию типа:<a href=”http://www.w3.org/Style/CSS/” class=”info”>css<span>cascade style sheets, the
separation from content and presentation</span></a>

Где, собственно, подсказка и заключена в span. Здесь мы используем чистый html, а к нему CSS - типа такого:

 

 

a.info{

position:relative; /*this is  the key*/

z-index:24;  background-color:#ccc;

color:#000;

text-decoration:none}a.info:hover{z-index:25;  background-color:#ff0}

a.info span{display: none}

a.info:hover  span{ /*the span will display just on :hover  state*/

display:block;

position:absolute;

top:2em;  left:2em; width:15em;

border:1px solid  #0cf;

background-color:#cff;  color:#000;

text-align: center}

Решений, на подобии этого море. Плюс здесь в том, что это чистый CSS, а минус в том, что применение возможно только в местах, где специально создана нужная конструкция. В итоге, мы не можем использовать чистый метод для создания стиля для title на все странице.

Теперь идем дальше. Поскольку мы не можем использовать чистый CSS, то нам поможет великий и могучий JS. Даже если вы не знаете хорошо JavaScript, вампомогут библиотеки типа Mootools, jQery и т.д.. Мы остановимся на Mootools, поскольку он по умолчанию внедрен в  Joomla! 1.5. Для того чтобы вызвать библиотеку в вашем шаблоне вам нужно воспользоваться методом <?php JHTML::_(’behavior.mootools’); ?>, далее, чтобы использовать в вашем шаблоне повсеместно стандартные toltips  Joomla!, вамнужно также вызвать этот метод в шаблоне <?php JHTML::_(’behavior.tooltip’); ?>, тогда вы получите возможность использовать использовать подсказки к ссылкам через стандартный метод Joomla!, присваивая нужной ссылке class=”hasTip”. При этом, оформить свои ссылки вы можете как угодно с помшью следующих css-классов:

  • .tool-tip
  • .tool-title
  • .tool-text

Но это только часть решения, поскольку мы будем иметь красивый toltips только у ссылок с нужным классом. На самом деле, все гараздо проще, нежели можно представить. Если посмотреть на js-код в примере на сайте Mootools, то в любом из предложенных способов мы видем, что используется функция “$$“, напимер:

 

 

var Tips2 = new Tips($$(‘.Tips2′), {

initialize:function(){

this.fx = new Fx.Style(this.toolTip, ‘opacity’, {duration: 500, wait: false}).set(0);

},

onShow: function(toolTip) {

this.fx.start(1);

},

onHide: function(toolTip) {

this.fx.start(0);

}

});

То есть, мы обращаемся  непосредственно к элементу с cllass=”Tips2″ нашего древа DOM. Но, если мы посмотрим документацию Mootools, то мы увидим, что функция “$$” в Mootools позволяет нам также обращатся к любому элементу по селектору. То есть, все что нам нужно сделать для того, чтобы красивые подсказки были у всех ссылок на странице, так это заменить в приведенном примере селектор класса на атрибут тега ссылки:

 

 

var Tips2 = new Tips($$(‘a’), {

initialize:function(){

this.fx = new Fx.Style(this.toolTip, ‘opacity’, {duration: 500, wait: false}).set(0);

},

onShow: function(toolTip) {

this.fx.start(1);

},

onHide: function(toolTip) {

this.fx.start(0);

}

});

Теперь вы применяете эффект красивый подсказок ко всем ссылкам на странице. Причем в данном примере, по просьбе автора вопроса я выбрал эффект при котором в случае отсутствия у ссылки атрибута title будет выводится в подсказке непосредственное содержание ссылки. Да, классы оформления будут такимиже как и для стандартных tooltips:

  • .tool-tip
  • .tool-title
  • .tool-text

Причем сделать их полупрозрачными или еще как - это уже только CSS. А конструкция самого заголовка ссылки может иметь вид title=”Заголовок подсказки :: Текст подсказки”.

Остается только добавить, что если вы хотите абстрагироваться от стандартного метода подсказок  Joomla! 1.5, то вам не нужно в шаблоне вызывать метод   <?php JHTML::_(’behavior.tooltip’); ?>. Досаточно просто вызвать <?php JHTML::_(’behavior.mootools’); ?>, а для инициирования эффекта подсказок Mootools в шаблоне между <head> и </head> прописать скрипт:

 

 

window.addEvent(‘domready’, function() {

var Tips = new Tips($$(‘a’), {

initialize:function(){

this.fx = new Fx.Style(this.toolTip, ‘opacity’, {duration: 500, wait: false}).set(0);

},

onShow: function(toolTip) {

this.fx.start(1);

},

onHide: function(toolTip) {

this.fx.start(0);

}});

});

Вроде  все. Остается только добавить, что использовать это можно и не в Joomla! 1.5, а везде, где вы “прикрутите” Mootools.   Удачи вам с Joomla! :)

Outro:
Пройдите курсы интернет рекламы чтобы лучше разбираться в интернет-маркетинге и веб-аналитике.
Бухгалтерское сопровождение Балансфор поможет решить ваши проблемы с бухгалтерией.
Смешные анегдоты про Дану Борисову вы можете прочитать на сайте www.danaborisova.com/.

Опубликовано в joomla


Комментировать