VPF::Всплывающие подсказки(tooltip) - Форум программистов

Sardar

Дата 25.5.2005, 18:38 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Преимущество этих подсказок над стандартными аттрибутом title в том, что эти подсказки содержат полноценный HTML, т.е. картинки и т.п. Внешний вид тоже задаёте сами smile

Начиналось всё здесь: http://forum.vingrad.ru/index.php?showtopic=32471

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
.tool_tip {
 position: absolute;
 visibility: hidden;
 /* styles */
 background-color: #a98df5;
}
</style>
<script type="text/javascript">
<!--
ToolTip.offsetX=20; //смещения подсказки от курсора
ToolTip.offsetY=10; //
function ToolTip(obj, text) {
  if(!obj||obj.nodeType!=1) throw "Illigal argument exception"; //обьект к кому привязываем подсказку
  //-- Разметка подсказки ---
  var tip=document.createElement("DIV");
  tip.className="tool_tip";
  tip.innerHTML=text;
  document.body.appendChild(tip);
  //-- события --
  obj.onmouseout=function (ev) {
      tip.style.visibility="hidden";
  };
  obj.onmousemove=function(ev) { //если не нужно что бы подскасзка бегала, то onmouseover
      tip.style.visibility="visible";
      if(window.event) ev=window.event;
      tip.style.left=ev.clientX + document.body.scrollLeft + ToolTip.offsetX;
      tip.style.top=ev.clientY + document.body.scrollTop + ToolTip.offsetY;
  };
}
//переберем заданные элементы, дадим подказку тем у кого есть аттрибут tooltip
//В аргументах передаем имена рассматриваемых тегов, * все теги
function initToolTips() {
//   return;
    var tags, tooltext;
    for(var i=0; i<arguments.length; i++) {
       tags=document.body.getElementsByTagName(arguments[i]);
       for(var j=0; j<tags.length; j++)
            if((tooltext=tags[j].getAttribute("tooltip"))) ToolTip(tags[j], tooltext);
   }
}
//-->
</script>
</head>
<body onload="initToolTips('SPAN','IMG')">
  <span tooltip="<b>Подсказка =)</b>">Test</span>
</body>
</html>

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Opik

Дата 29.8.2005, 10:57 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: нет
Всего: 55

3 Баги:
1) на объектов, кт-ые юзают onmouseout теряется вызов функции при событии.
2) при инициализации тултипа снизу документа пояляется "лишняя" область.
3) при тултипе установленном на объекте, близлежащему к границе документа(у правого/ нижнего скроллинга) объект выходит за рамки и создает неудобства, вместо того, что бы показываться в другую сторону.

Wowa

Дата 30.8.2005, 00:28 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: нет
Всего: 290

Может ли быть такое, что текст в несколько предложения обрезается?

Aliance

Дата 30.8.2005, 00:42 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137

В Opera? Там проблемы с отрисовкой...
Хотя может быть и не в ней проблема, т.к. это же обычный div.
Поидеи, все может быть smile

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Wowa

Дата 30.8.2005, 00:45 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: нет
Всего: 290

IE 6

Aliance вот ссылка: http://exrus.de/ru/search/search.php?search_firms=neue

Вот в этой строке: 003876 Neue Zeiten Edingen-Neckarhausen e.V. (Вес: 1)

Заканчивается на "Вместо знаний".

Sardar

Дата 30.8.2005, 00:46 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Цитата(Wowa @ 29.8.2005, 23:28)

Может ли быть такое, что текст в несколько предложения обрезается?

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

Цитата(Opik @ 29.8.2005, 09:57)

3 Баги:

ОК, доработаю.
Добавлено @ 00:48

Цитата(Wowa @ 29.8.2005, 23:45)

Заканчивается на "Вместо знаний".

Если глянешь в отрендеренный код, то увидишь такое:

Вместо знаний "про язык,

кавычка закрылась, всё остальное браузер игнорирует.

--------------------

Wowa

Дата 30.8.2005, 01:04 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: нет
Всего: 290

Цитата(Sardar @ 29.8.2005, 23:46)

кавычка закрылась, всё остальное браузер игнорирует.

Аа, спасибо.

butionok

Дата 13.9.2005, 14:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: нет
Всего: 3

Sardar, а почему document.getElementById('tip').clientWidth не даёт ширину подсказки?

--------------------

Ненавижу убогую Оперу.

butionok

Дата 13.9.2005, 19:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: нет
Всего: 3

Цитата(Opik @ 29.8.2005, 10:57)

2) при инициализации тултипа снизу документа пояляется "лишняя" область.
3) при тултипе установленном на объекте, близлежащему к границе документа(у правого/ нижнего скроллинга) объект выходит за рамки и создает неудобства, вместо того, что бы показываться в другую сторону.

У меня "лишняя" область наблюдалась (тестировал на IE, Netscape 7.2,8.0, FireFox 1.0.6, Opera 8.02) только тогда, когда я прикреплял tip не к body, а к какому-нибудь слою.

Что касается выхода за рамки, то это решается небольшой модификацией

Код


function ToolTip(obj, text) {
  if(!obj||obj.nodeType!=1) throw "Illigal argument exception"; //обьект к кому привязываем подсказку
  //-- Разметка подсказки ---
  var tip=document.createElement("DIV");
  tip.className="tool_tip";
  tip.innerHTML=text;
  document.body.appendChild(tip);
  //-- события --
  obj.onmouseout=function (ev) {
      tip.style.visibility="hidden";
  };
  obj.onmousemove=function(ev) { //если не нужно что бы подскасзка бегала, то onmouseover
      tip.style.visibility="visible";
      if(window.event) ev=window.event;

if(tip.offsetWidth+ev.clientX+10>document.body.clientWidth) //если подсказка выходит за видимую 
        ToolTip.offsetX=-tip.offsetWidth; //облать, то поворачиваем её
else
        ToolTip.offsetX=20;
if(tip.offsetHeight+ev.clientY+15>document.body.clientHeight)// тоже самое, но по вертикали
       ToolTip.offsetY=-tip.offsetHeight;
else
      ToolTip.offsetY=10;

      tip.style.left=ev.clientX + document.body.scrollLeft + ToolTip.offsetX;
      tip.style.top=ev.clientY + document.body.scrollTop + ToolTip.offsetY;
  };
}

Это сообщение отредактировал(а) Aliance - 13.9.2005, 20:02

--------------------

Ненавижу убогую Оперу.

Sardar

Дата 13.9.2005, 21:48 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Цитата(butionok @ 13.9.2005, 13:22)

Sardar, а почему document.getElementById('tip').clientWidth не даёт ширину подсказки?

Потому что нет такого свойства. Обращайся к справочнику всегда: http://www.w3.org/TR/2000/WD-DOM-Level-1-2...l-one-html.html
и MSDN.

--------------------

sergejzr

Дата 14.10.2005, 23:31 (ссылка)

(нет голосов)

Загрузка ...

Un salsero
Group Icon

Профиль
Группа: Админ
Сообщений: 13285
Регистрация: 10.2.2004
Где: Германия г .Ганновер

Репутация: нет
Всего: 360

узнать ширину/высоту подсказки по свойствам scrollWidth, scrollHeight

--------------------

Me.
FB.
LinkedIn.
ORCID.
YT.

Sardar

Дата 14.10.2005, 23:58 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Млин, обещал же новые подсказки, давно уже готово (для себя и для Opik'а делал), доки только нет, вернее времени нет дописать smile

Первые пара строк: http://sardar.vingrad.ru/projects/ToolTip/index.htm

Глядим в код, врубаемся. Что не ясно спрашиваем. Кратко:

Подсказки могут иметь любую разметку
Могут создаваться заранее - удобно если подсказка содержит в себе целое меню
Могут создаваться по шаблону, удобно для однотипных подсказок, например в галерее в подсказку можно поместить краткую инфу и ссылку далее для каждой картинки.
могут появляться плавно (прозрачно)
гибко настраиваються через аттрибут tooltip-set, синтаксис схожий с CSS

Без доки простой человек кроме простой подсказки мало что сделает, а это лишнее ведь есть стандартный title. Шаблонные подсказки показывают всё удобство.

Звиняюсь, допишу мануал, выложу smile

--------------------

Aliance

Дата 3.11.2005, 22:31 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137

Хм...у меня не работает, хотя и ошибок не выдает :'-(

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 4.11.2005, 00:52 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Подсказки там не сразу открываються, а через время, по дефолту 2 секунды, хотя можешь в аттрибуте tooltip-set="delay-on:<миллисекунды>;" задать задержку smile

--------------------

Aliance

Дата 4.11.2005, 01:11 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
.tool_tip {
 position: absolute;
 visibility: hidden;
 /* styles */
 background-color: #a98df5;
}
</style>
<script type="text/javascript">
<!--
// +----------------------------------------------------------------------+
// | ToolTip - customizable tooltips library                              |
// +----------------------------------------------------------------------+
// | Copyright (c) 2005-2006 Sardar Yumatov                               |
// +----------------------------------------------------------------------+
// | This library is free software; you can redistribute it and/or modify |
// | it under the terms of the GNU Lesser General Public License as       |
// | published by the Free Software Foundation; either version 2.1 of the |
// | License, or (at your option) any later version.                      |
// |                                                                      |
// | This library is distributed in the hope that it will be useful, but  |
// | WITHOUT ANY WARRANTY; without even the implied warranty of           |
// | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the         |
// | GNU Lesser General Public License for more details.                  |
// |                                                                      |
// | This library is subject to version 2.1 of the LGPL license,          |
// | that is bundled with this package in the file LICENSE, and is        |
// | available at through the world-wide-web at                           |
// | http://www.gnu.org/copyleft/lesser.txt                               |
// | If you did not receive a copy of the LGPL license and are unable to  |
// | obtain it through the world-wide-web, please write to the            |
// | Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston,  |
// | MA 02111-1307 USA                                                    |
// +----------------------------------------------------------------------+
// | Author: Sardar Yumatov<[email protected]>                            |
// +----------------------------------------------------------------------+

/**
* Подсказки в (X)HTML документах.
* Этот код используеться для создания легко настраиваемых подсказок к
* (X)HTML элементам. Подсказка может иметь любое содержимое, от простого
* текста, до шаблона с HTML разметкой.
*
* Автор выражает благодарность форуму:
*   http://forum.vingrad.ru/index.php
* без которого не появилась бы (ну может позже =) ) идея написать этот код.
*
* @license LGPL2.1 http://opensource.org/licenses/lgpl-license.php
* @copyright Copyright (c) 2005-2006 Sardar Yumatov
* @author Sardar Yumatov<[email protected]>
* @version 2.0
*/

//=================- Generic -=================
/**
* Отсечение пробельных символов в начале и конце строк
*/
if(!String.prototype.trim) String.prototype.trim=function() {
  var r=/^\s*((?:.|\n)+?)\s*$/.exec(this);
  return r? r[1]: this.toString();
}
/**
* Простой поиск в массиве
*/
if(!Array.prototype.findValue) Array.prototype.inValues=function(value, def) { //simple search
   for(var i=0; i<this.length; i++) if(this[i]==value) return value;
   return def;
}
/**
* Простая функция для приведения строки к числу с дефолтовым значением и границами
*/
function num(str, def, minVal, maxVal, integ){
  var r=integ? parseInt(str): parseFloat(str);
  r=isNaN(r)? Number(def): r;
  r=isNaN(r)? 0: r;
  if(typeof(minVal)=="number") r=Math.max(minVal, r);
  if(typeof(maxVal)=="number") r=Math.min(maxVal, r);
  return r;
}

/**
* Достать прокрутку страницы.
* Thanks to: www.quirksmode.org
*/
function getPageScroll() {
  var x,y;
  if (self.pageYOffset) {// all except Explorer
    x = self.pageXOffset;
    y = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollTop) {// Explorer 6 Strict
    x = document.documentElement.scrollLeft;
    y = document.documentElement.scrollTop;
  } else if (document.body) {// all other Explorers
    x = document.body.scrollLeft;
    y = document.body.scrollTop;
  }
  return {x: x, y: y};
}
/**
* Достать размеры окна
* Thanks to: www.quirksmode.org
*/
function getFrameSize() {
  var x,y;
  if (self.innerHeight) {// all except Explorer
    x = self.innerWidth;
    y = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {// Explorer 6 Strict Mode
    x = document.documentElement.clientWidth;
    y = document.documentElement.clientHeight;
  } else if (document.body) {// other Explorers
    x = document.body.clientWidth;
    y = document.body.clientHeight;
  }
  return {width: x, height: y};
}

//====================- Tool Tip -===========================
/**
* Пустая функция служащая пространством имён для переменных ToolTip'а.
*/
function ToolTip() { alert("ToolTip version 2.0"); }

/**
* Отладочная функция. Вызываеться при ошибках.
* @param string msg текст ошибки
*/
ToolTip.debug=function(msg) {if(this.debugEnable) alert(msg); return null;};

/**
* Задержка между кадрами при анимациях скрытия/раскрытия в миллисекундах.
* не ставь мало, у тебя не такая крутая машина ;-)
* @var integer
*/
ToolTip.blendFrameDelay=10;

/**
* Глобальная переменная/флаг, резрешающая отладочные сообщения.
* @var boolean
*/
ToolTip.debugEnable=true;

/**
* Дефолтовые настройки для всех подсказок
*/
ToolTip.defaultSets={
  type: "simple", //tooltip type: simple, extern, extern-template
  target: "", //element ID
  appearance: "blend", //tooltip apearance: simple, blend
  floating: "accessible", //cursor following: static, accessible, follow
//  fieldWidth: 0.9, //active field width on object in procenten 0-1
//  fieldHeight: 0.9, //active field height
  width: "", //tooltip CSS width
  height: "", //CSS height
  offsetX: 15, //horizontal tooltip offset from cursor in px
  offsetY: 15, //vertical tooltip offset from cursor in px
  delayOn: 1000, //show delay in ms
  delayOff: 100, //hidde delay in ms
  animationLength: 200 //blending animation length in ms
}

/**
* Инициализировать подсказку на элементе.
* Элемент должен иметь аттрибут tooltip и не не обязательный tooltip-set.
* Если элемент их не имеет, то он тихо игнорируеться, что удобно в енумерациях
* "без разбора".
*
* @param HTMLElement obj элемент на котором инициализируем подсказку
*/
function applyToolTip(obj) {
   if(!obj||obj.nodeType!=1) return ToolTip.debug("Illigal argument exception, given element is not a HTMLElement!");
   var t, sets;
   if(((t=obj.getAttribute('tooltip'))==null) & ((sets=obj.getAttribute('tooltip-set'))==null)) return; //no tooltip info
   sets=parseToolTipSettings(sets);
   switch(sets.type) {
      case "simple": if(t) new SimpleToolTip(obj, sets, t); break;
      case "extern": new ExternToolTip(obj, sets); break;
      case "extern-template": new ExternTemplateToolTip(obj, sets); break;
      default: return ToolTip.debug("Uknown tooltip type '"+sets.type+"'!");
   }
}

/**
* Распарсить строку с настройками tooltip-set.
* Возвращаеться обьект с полями соотвествующими настройкам. Синтаксис настроек
* похож на CSS.
* @param string str строка с настройками в синтаксисе CSS
* @return Map обьект - массив множество настроек
*/
function parseToolTipSettings(str) {
  if(str==null) return new ToolTipSettings();
  var ioff=0, ret=new ToolTipSettings();
  str.replace(/\s*(?:(?:([a-zA-Z0-9_\-.]+)\s*\:([^;]+))|(;))\s*/g, function(full, dir, val, delim, offs) {
     if(ToolTip.debugEnable&&ioff!=offs) alert("Illigal syntax near: "+offs+"\n"+str+"\n\nTrying parse rest of string...");
     else ioff=offs+full.length;
     if(!delim) ret.set(dir.toLowerCase().trim(), val);
     return full;
  });
  return ret;
}
/**
* Контейнер опций.
* Достаёт и устанавливает опции по внешнему имени. После опции доступны как по
* внешнему имени через get, так и по внутреннему имени(JS CSS) обращаясь
* напрямую к полям обьекта.
*/
function ToolTipSettings() {}
ToolTipSettings.prototype=ToolTip.defaultSets;
/**
* Установить опцию по имени.
* Типы значений зашиты в код.
* @param string name внешнее имя опции
* @param string value значение опции
*/
ToolTipSettings.prototype.set=function(name, value) {
     switch(name.toLowerCase().trim()) {
       case "type": this.type=['simple', 'extern', 'extern-template'].inValues(value.trim(), this.type); break;
       case "target": this.target=value.trim(); break;
       case "floating": this.floating=['static', 'accessible', 'follow'].inValues(value.trim(), this.floating); break;
       case "appearance": this.appearance=['simple', 'blend'].inValues(value.trim(), this.appearance); break;
//       case "field-width": this.fieldWidth=num(value.trim(), this.fieldWidth, 0, 1); break;
//       case "field-height": this.fieldHeight=num(value.trim(), this.fieldHeight, 0, 1); break;
       case "width": this.width=value.trim(); break;
       case "height": this.height=value.trim(); break;
       case "offset-x": this.offsetX=num(value.trim(), this.offsetX, null, null, true); break;
       case "offset-y": this.offsetY=num(value.trim(), this.offsetY, null, null, true); break;
       case "delay-on": this.delayOn=num(value.trim(), this.delayOn, 0); break;
       case "delay-off": this.delayOff=num(value.trim(), this.delayOff, 0); break;
       case "animation-length": this.animationLength=num(value.trim(), this.animationLength, 0); break;
       default: //ignore unknown settings
     }
}
/**
* Достать опцию по внешнему(со знаками тире) имени.
* @param string name внешнее имя опции
* @return mixed значение опции
*/
ToolTipSettings.prototype.get=function(name) {
   name=name.trim().replace(/-([a-zA-Z])/g, function(full, let) {return let.toUpperCase();});
   if(typeof(this[name])!="function") return this[name];
   else return null;
}

/**
* Приаттачить готовую подксазку к обьекту.
* Инициализируються события и эффекты. Подгоняються размеры из настроек.
* @param HTMLElement obj
* @param HTMLElement tooltip
* @param Map sets
*/
function makeToolTipBox(obj, tooltip, sets) {
  if(tooltip.className.split(/\s+/).inValues('tooltip')==null) tooltip.className+=" tooltip";
  if(sets.appearance=='blend'&&tooltip.className.split(/\s+/).inValues('blend_tooltip')==null) tooltip.className+=" blend_tooltip";

  var offtimer=null;
  var ontimer=null;
  var ox=-1, oy=-1;
  var visible=false;
  
  if(sets.width.trim()) tooltip.style.width=sets.width;
  if(sets.height.trim()) tooltip.style.height=sets.height;
  /**
  * Открытие и закрытие
  */
  function show() {
    if(offtimer) {
      window.clearTimeout(offtimer);
      offtimer=null;
    }
    if(!visible) {
      if(sets.appearance=='blend') { //we must know the dimensions
         tooltip.style.visibility="visible";
         tooltip.style.display="block";
      }
      ontimer=window.setTimeout(function() {tooltipToggleVsiual(tooltip, true, sets);}, sets.delayOn);
      visible=true;
    }
  }
  /**
  * Передвижение подсказки
  */
  function move(ev) {
     if(window.event) ev=window.event;
     show();
     
     var cordx, cordy, hor, vert;
     var sc=getPageScroll();
     var sz=getFrameSize();

     //нужно что бы подсказка не выбегала за экран, разворачиваем
     if((ev.clientY+tooltip.offsetHeight+sets.offsetY)>sz.height) {
       cordy=ev.clientY - tooltip.offsetHeight - sets.offsetY + sc.y;
       vert=true;
     } else {
       cordy=ev.clientY + sc.y + sets.offsetY;
       vert=false;
     }
     
     if((ev.clientX+tooltip.offsetWidth+sets.offsetX)>sz.width) {
       cordx=ev.clientX - tooltip.offsetWidth - sets.offsetX + sc.x;
       hor=true;
     } else {
       cordx=ev.clientX + sc.x + sets.offsetX;
       hor=false;
     }
     
     //если на посдсказку можно набежать мышью, то бежим только к границам экрана, в центр стоим
     if(sets.floating=='accessible') {
       if(oy>=0&&((vert&&oy>cordy)||(!vert&&oy<cordy))) cordy=oy;
       if(ox>=0&&((hor&&ox>cordx)||(!hor&&ox<cordx))) cordx=ox;
       ox=cordx; oy=cordy;
     }
     tooltip.style.left=cordx+'px';
     tooltip.style.top=cordy+'px';
  };
  
  //собираем события. DOM 2 Event не юзаем, жаль ИЕ не поддерживает
  if(obj.onmouseout) obj.old_onmouseout=obj.onmouseout;
  obj.onmouseout=tooltip.onmouseout=function(ev) {
    offtimer=window.setTimeout(function(){tooltipToggleVsiual(tooltip, false, sets); visible=false;}, sets.delayOff);
    if(ontimer) {
       window.clearTimeout(ontimer);
       ontimer=null;
    }
    ox=oy=-1;
    if(obj.old_onmouseout) obj.old_onmouseout(ev); 
  }
  if(obj.onmousemove) obj.old_onmousemove=obj.onmousemove;
  if(sets.floating=="static") {
    if(obj.onmouseover) obj.old_onmouseover=obj.onmouseover;
    obj.onmouseover=function(ev){move(ev); if(obj.old_onmouseover) obj.old_onmouseover(ev);}
    obj.onmousemove=function(ev){show(ev); if(obj.old_onmousemove) obj.old_onmousemove(ev);}
  } else obj.onmousemove=function(ev){move(ev); if(obj.old_onmousemove) obj.old_onmousemove(ev);}
  if(tooltip.onmousemove) tooltip.old_onmousemove=tooltip.onmousemove;
  tooltip.onmousemove=function(ev){show(ev); if(tooltip.old_onmousemove) tooltip.old_onmousemove(ev);}
}


/**
* Скрыть/показать подсказку(HTMLElement).
*/
function tooltipToggleVsiual(tooltip, show, sets) {
  if(sets.appearance=="blend") {
    if(tooltip.tmr) window.clearInterval(tooltip.tmr);
    var res=(ToolTip.blendFrameDelay>0? ToolTip.blendFrameDelay: 50);
    var step=(show? 1: -1)*(1/(sets.animationLength>0? sets.animationLength: 1000))*res; //шаг в процентах от заданного времени

    var opacity=(typeof(tooltip.style.KhtmlOpacity)!="undefined")? parseFloat(tooltip.style.KhtmlOpacity): //konquerror и его семейство
              (typeof(tooltip.style.MozOpacity)!="undefined")? parseFloat(tooltip.style.MozOpacity): //мозилла и прочие Gecko. кстати, долбанная мозилла не покажет какое сейчас значение, если его не меняли...
              (typeof(tooltip.filters)!="undefined")? tooltip.filters.Alpha.opacity/100: //ИЕ вариант
              (typeof(tooltip.style.opacity)!="undefined")? parseFloat(tooltip.style.opacity): //не стоит доверять, может не undefined для понту, а всё равно не поддерживаеться CSS3
              null; //нет прозрачности как таковой
    
    tooltip.style.visibility="visible";
    tooltip.style.display="block";          
    if(opacity==null) {
       tooltip.style.display=show? "block": "none";
       return;
    }
    opacity=isNaN(opacity)? (show? 0: 1) : opacity; //тест на вшивость
    opacity=Math.min(1, Math.max(0, opacity));
    //и так здесь мозилла(возможно konquerror) обложалась, мы не можем узнать значение opacity если оно не менялось
    //потому в первый раз возьмём как будто мы находимся на границе, либо 0, либо 1
    
    tooltip.tmr=window.setInterval(function() {
      if((opacity+=step)>=1||opacity<=0) {
        window.clearInterval(tooltip.tmr);
        tooltip.tmr=null;
        if(opacity<=0) tooltip.style.display="none";
      }
      if(tooltip.filters) tooltip.filters.Alpha.opacity=Math.round(opacity*100);
      tooltip.style.KhtmlOpacity=tooltip.style.MozOpacity=tooltip.style.opacity=opacity.toFixed(3);
    }, ToolTip.blendFrameDelay);
  } else {
    tooltip.style.display=show? "block": "none";
    tooltip.style.visibility=show? "visible": "hidden";
  }
}

//================- Tooltip implementations -====================
/**
* Обьект подсказки собирающий простую подсказку в виде маленького окошка.
* Содержимое подсказки указываеться в аттрибуте tooltip. Содержимым являеться
* валидный HTML, который помещаеться в слой на абсолютной позиции.
* Для слоя должен быть определён правильный CSS класс tooltip_simple
* @param HTMLElement obj
* @param Map sets
* @param string content текст/HTML подсказки
*/
function SimpleToolTip(obj, sets, content) {
  var tip=document.createElement("div");
  tip.className="tooltip_simple tooltip"; 
  tip.innerHTML=content;
  document.body.appendChild(tip);
  
  this.visual=tip;
  this.target=obj;
  obj.tooltip=this;
  makeToolTipBox(obj, tip, sets);  
}

/**
* Обьект подсказки с заранее созданной подсказкой.
* Для работы необходимо существование параметра target, в котором
* задан идентификатор подсказки.
* @param HTMLElement obj
* @param Map sets
*/
function ExternToolTip(obj, sets) {
  if(!sets.target) return ToolTip.debug("Target must be specified for tooltip type extern and extern-template!");
  var tip=document.getElementById(sets.target);
  if(!tip) return ToolTip.debug("No extern tooltip with ID '"+sets.target+"' found!");
  this.visual=tip;
  this.target=obj;
  makeToolTipBox(obj, tip, sets);
}

/**
* Шаблоннная подсказка.
* В шаблоне распознаём теги <% имя %>, которые заменяем на значения.
* Просто и эффективно =)
*/
function ExternTemplateToolTip(obj, sets) {
  function getComment(o, n) {
    if(!n||n<=0) n=1; 
    for(var i=0; i<o.childNodes.length; i++) {
      if((o.childNodes[i].nodeType==8)&&(--n<=0)) return o.childNodes[i].nodeValue;
    }
    return null;
  }
  if(!sets.target) return ToolTip.debug("Target must be specified for tooltip type extern and extern-template!");
  var temp=document.getElementById(sets.target), def, data;
  if(!temp) return ToolTip.debug("No extern tooltip with ID '"+sets.target+"' found!");
  templ=getComment(temp, 1);
  if(!templ) return ToolTip.debug("Extern template with ID '"+sets.target+"' has no template body!");
  def=getComment(temp, 2);
  data=getComment(obj, 1);
  //рапарсим значения
  def=parseToolTipTemplateValues(def? def: "");
  data=parseToolTipTemplateValues(data? data: "");
  //вставим в шаблон, надеемся что вёрстка валидна =)
  var html=templ.replace(/<%\s*([a-zA-Z0-9\-_\.]+)\s*%>/g, function(full, tag) {
     if(typeof(data["~"+tag])!='undefined') return data['~'+tag];
     else if(typeof(def["~"+tag])!='undefined') return def['~'+tag];
     else return "";
  });
  html=html.replace(/<\\%/g, '&lt;%').replace(/%\\>/g, '%&gt;');
  
  var tip=document.createElement("div");
  tip.className="tooltip"; 
  tip.innerHTML=html;
  document.body.appendChild(tip);
  
  this.visual=tip;
  this.target=obj;
  obj.tooltip=this;
  makeToolTipBox(obj, tip, sets);
}
/**
* Распарсим значения, синтаксис как и у опций - name: value;
* @param string str
*/
function parseToolTipTemplateValues(str) {
  var ioff=0;
  var data={};
  str.replace(/\s*(?:(?:([a-zA-Z0-9_\-.]+)\s*\:((?:[^;]+)|(?:\\.)))|(;))\s*/g, function(full, dir, val, delim, offs) {
     if(ToolTip.debugEnable&&ioff!=offs) alert("Illigal syntax in template data near: "+offs+"\n"+str+"\n\nTrying parse rest of string...");
     else ioff=offs+full.length;
     if(!delim) data["~"+dir.toLowerCase().trim()]=val.trim();
     return full;
  });
  return data;
}

/**
* Инициализировать подсказку на всех элементах заданного типа во всём документе.
* В параметрах передаються имена тегов, которые необходимо пересмотреть.
* Следите за регистром если пишете в XHTML.
* Пример: initToolTip("span", "div", "img");
*
* @param ... не ограниченное число параметров, каждый из которых это имя тега
*/
function initToolTip() {
  var tags;
  for(var i=0; i<arguments.length; i++) {
     tags=document.body.getElementsByTagName(arguments[i]);
     for(var j=0; j<tags.length; j++) applyToolTip(tags[j]);
   }
}
//-->
</script>
</head>
<body onload="initToolTips('span','img')">
  <span tooltip="Подсказка =)">Test</span>
</body>
</html>

Ничего =(

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 4.11.2005, 13:39 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Если что то не работает, значит есть ошибка smile

Смотрим в body.onload - функция называеться initToolTips, s там лишняя. Далее что бы подсказки работали, нужно подключить стиль tooltip.css, отдельный .tool_tip не существует.

Знаю что нужно написать ман как это использовать и повытаскивать оставшиеся баги(в основном monkeyproof проверки), но млин катастрофически не хватает времени smile

--------------------

Aliance

Дата 4.11.2005, 14:14 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137

Все спасибо, ошибка в том, что я брал разметку с первой версии, а скрипт со второй smile

Поэтому и лишняя s =)
Огромное спасибо )

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

sulla

Дата 21.3.2006, 20:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 21.12.2005

Репутация: нет
Всего: нет

используя первый вариант подсказок столкнулся стем что нельзя засунуть

Код

initToolTips('SPAN','IMG');

в body документа (оформление и функционал разделены и вызываются чёрте как smile

)) )

для того чтобы работали корректно подсказки помогло вот такая вставка в функцию:

Код


<script FOR=window EVENT=onload TYPE="text/javascript">
<!--запуск сприпта после загрузки!
    initToolTips('SPAN','IMG');
-->    
</SCRIPT>

хык, можете ещё кому пригодиться.

Это сообщение отредактировал(а) sulla - 21.3.2006, 20:19

Гриша

Дата 22.3.2006, 02:21 (ссылка)

(нет голосов)

Загрузка ...

НУС(незнаю|узнаю|создаю)

Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1

Нашел файл с подсказкой по этой ссылке: http://sardar.vingrad.ru/projects/ToolTip/index.htm
Ну все хорошо, просто мечта, самое главное то что еще и текст из подсказки можно скопировать.
Нот вот проблема: Если к пример в подсказку вставить текст длинной 255 символв, т.е. соответсвенно в длину на экране она не уместиться, и втаком случае подсказка не сжимается, а выходит за границы окна слева, а так как изображение у меня слева, то от подсказки остаестя 1/5.
Не подскажите ли решение этой проблемы.

--------------------

Если долго мучиться, что-нибудь получитЬся.

sulla

Дата 22.3.2006, 13:21 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 21.12.2005

Репутация: нет
Всего: нет

собственно подобную пролему решить просто:

в подсказку не просто текст а:
1. div - с заданными высотой и шириной
2. таблицу также с заданными высотой и шириной

только вот есть проблемка если много подсказок ан странице
в конце старницы добавляется кусок пустого протсранства... smile

пропадает толькоесли открыть все подсказки smile

Гриша

Дата 22.3.2006, 17:36 (ссылка)

(нет голосов)

Загрузка ...

НУС(незнаю|узнаю|создаю)

Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1

sulla, спасибо за ответ.

Текст в посдказке может быть как из 5 символов так и из 255.

К примеру если я установлю максимальную ширину подстроенную под текст из 255 символов, то тогда при тексте из 5 символов, подсказка, будет больше длинны этого текста.

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

Вот никак не клеится у меня на сайте (еще не закончил делать) без таких подсказок.

--------------------

Если долго мучиться, что-нибудь получитЬся.

Ciber SLasH

Дата 23.3.2006, 21:59 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 2
Всего: 67

Гриша, а чем тебя не устраивает tooltip, который в аттаче этого поста: http://forum.vingrad.ru/index.php?showtopi...st&p=660816
smile

Гриша

Дата 24.3.2006, 01:28 (ссылка)

(нет голосов)

Загрузка ...

НУС(незнаю|узнаю|создаю)

Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1

Ciber SLasH, вы мне когда в топики в одном написали про этот вариант, так он у меня щас лежит, как запасной. Я вот ща еще раз псомтрел, как всплывающая подсказка в нем все хорошо. Только есть к примеру текст подсказки будет из 10 символов, то сам размер подсказки будет больше. Когд там конечно мудреный, я из самой страницы код скачал в два объелиненных файла с дополнительными кодами.
Вы мне очень хорошо помогли с тем что дали мне ссылку на этот код и даже пояснили как извлекать данные из alt и title.

Я когда увидел tooltip Sardar, там где из него можно брать текст, я просто очумел, я та обрадовался, и подсказка по длине текста выстраивается (ну я как понимаю это в с тсилях нет длинны), но вот когда текста много подсказака уходит в левую сторону за экран, вот это все испортило. Я и подумал, может быть мне подскажут как это исправить.
Я вот еще sulla как то недопонял, как сделать то что он мне написал.

Я добавил в стиль этой подсказки размер width:250px, ну почему-то вот за правый край она не съезжает, но реску перемещается за левый часть экрана, хотя могла бы уместиться по центру.
Да уж очень сложно все это.

Это сообщение отредактировал(а) Гриша - 24.3.2006, 01:49

--------------------

Если долго мучиться, что-нибудь получитЬся.

Гриша

Дата 24.3.2006, 22:42 (ссылка)

(нет голосов)

Загрузка ...

НУС(незнаю|узнаю|создаю)

Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1

Подскажите пожалуйста, а как вот во всплывающей подсказке tooltip Saradar, с этой страницы: http://sardar.vingrad.ru/projects/ToolTip/index.htm
Сделать так, чтобы она была обычной плавающей подсказкой, т.е. что нужно подправить, чтобы текст в подсказке нельзя было выделять, я хочу посмотреть как она себя будет вести в таком случае.

--------------------

Если долго мучиться, что-нибудь получитЬся.

Aliance

Дата 27.3.2006, 00:08 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137

А комментарии он для кого писал?
В этой строчке устанавливается режим подсказки:

Код


floating: "accessible", //cursor following: static, accessible, follow

тебе нужно изменить его на:

Код


floating: "static", //cursor following: static, accessible, follow

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Гриша

Дата 28.3.2006, 03:01 (ссылка)

(нет голосов)

Загрузка ...

НУС(незнаю|узнаю|создаю)

Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1

Aliance, спасибо за разъяснение.
Я попробовал изменить все эти настройки:

Код


type: "simple", //tooltip type: simple, extern, extern-template
target: "", //element ID
appearance: "blend", //tooltip apearance: simple, blend
floating: "accessible", //cursor following: static, accessible, follow

В них нельзя запретить выделение текста в подсказке.
Вот эта настройка: floating: "follow", дает выелять текст, но ездиет за мышкой во все стороны (чтобы выделить текст, нужно постораться), благодаря этому я увидел, что ведет подсказка себя также, т.е. при сужении окна, вылезает за левую часть экрана.

--------------------

Если долго мучиться, что-нибудь получитЬся.

sulla

Дата 28.3.2006, 13:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 21.12.2005

Репутация: нет
Всего: нет

Гриша, а на чём программируете smile

для тог очтобы вставить таблицу или кучу текста поступил так:

Код


$info="<table border=1 width=117px>
    <tr><td>первая строка</td></tr>
    <tr><td><center>";
$info.="<img src='путьк картинке'>";
$info.="</center></td></tr>
    <tr><td>тертья строка</td></tr>
    <tr><td>четвёртая строка</td></tr>
    </table>";

<span tooltip=\"".$info."\"> вот над этим будет подсказка!</span>

проблему с добавлением внизу пустог оместа решил очень просто :
пр иинииализации для каждой подсказки указал top и left равные 10 )

Это сообщение отредактировал(а) sulla - 28.3.2006, 13:52

Гриша

Дата 31.3.2006, 17:28 (ссылка)

(нет голосов)

Загрузка ...

НУС(незнаю|узнаю|создаю)

Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1

sulla, спасибо большое за разъяснения.
Программирую на PHP smile

. C javascript нелады, да и не очень я ему доверяю.
Ну я уже нашел другой вариант вместо отображения подсказок из которых можно копировать текст.

--------------------

Если долго мучиться, что-нибудь получитЬся.

z-END

Дата 14.10.2006, 14:19 (ссылка)

(нет голосов)

Загрузка ...

прафесар™

Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: нет
Всего: 102

А есть какая-то возможность использовать данный скрипт так, чтобы документ оставался валидным?!
а то валидатор на tooltip ругается smile

--------------------

Каждый чилавек пасвоему праф...а памоему НЕТ!

Wowa

Дата 14.10.2006, 14:50 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: нет
Всего: 290

z-END, у тебя там только проблема с тегом span связанная с tooltip. Остальные ошибки с других мест идут.

А вместо тега span ты можешь любой другой тег использовать. В теге body указывается, какие теги должны быть обработаны.

z-END

Дата 14.10.2006, 15:17 (ссылка)

(нет голосов)

Загрузка ...

прафесар™

Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: нет
Всего: 102

Цитата(Wowa @ 14.10.2006, 15:50

)

у тебя там только проблема с тегом span связанная с tooltip.

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

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Test</title>
</head>

<body>
    <a href="#" tooltip="sdsd">TOOLTIP</a>
    <div tooltip="sdsd">TOOLTIP</div>
</body>
</html>

Вот результат:

Цитата

Below are the results of attempting to parse this document with an SGML parser.
Error Line 10 column 21: there is no attribute "TOOLTIP".
<a href="#" tooltip="sdsd">TOOLTIP</a>

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

Error Line 11 column 14: there is no attribute "TOOLTIP".
<div tooltip="sdsd">TOOLTIP</div>

--------------------

Каждый чилавек пасвоему праф...а памоему НЕТ!

Wowa

Дата 14.10.2006, 15:43 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: нет
Всего: 290

А если такой заголовок пустить:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">

Тогда должно быть валидно, ведь имхо в XHTML любые аттрибуты разрешены.

z-END

Дата 14.10.2006, 18:09 (ссылка)

(нет голосов)

Загрузка ...

прафесар™

Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: нет
Всего: 102

а меня какраз проблема HTML мучает smile

--------------------

Каждый чилавек пасвоему праф...а памоему НЕТ!

Rock

Дата 4.11.2006, 19:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 264
Регистрация: 13.1.2005
Где: Краснодар

Репутация: нет
Всего: 1

хотелось бы поподробнее о использовании шаблонов, если можно

Rock

Дата 4.11.2006, 21:32 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 264
Регистрация: 13.1.2005
Где: Краснодар

Репутация: нет
Всего: 1

попытался разобраться в коде, чтобы воспользоваться подсказками на шаблонах, вот что получилось:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="./tooltip.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="./js/tooltip.js"></script>
</head>
<body onload="initToolTip('div');">
<div id="tip_template">
<!-- 
Значение 1: <% var1 %> <br>
Значение 2: <% var2 %>
-->
</div>
<div tooltip-set="type: extern-template; target: tip_template;" tooltip="">
    <!--var1: 444; var2: 1123-->[?]
</div>
</body>
</html>

Вот таким вот образом у меня получилось сделать это, вопрос вообщем так ли это задумывалось и правильно ли я сделал? ))
PS: спасибо за скрипт, очень пригодился.

Wowa

Дата 25.12.2006, 21:14 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: нет
Всего: 290

А как использовать переменные <% var1 %> в шаблоне?

Wowa

Дата 25.12.2006, 21:43 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: нет
Всего: 290

Цитата

Содержимым может быть HTML вёрстка , но все вхождения символов <, > и & должны быть замещены строками <, > и &.

Если я произвожу такую замену, то HTML не интерпретируется, а так и отображается. Быть может это зависит от типа документа?

у меня:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sardar

Дата 25.12.2006, 23:59 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Ого, радует что старые скрипты ещё используються smile

Цитата(Wowa @ 25.12.2006, 20:14

)

А как использовать переменные <% var1 %> в шаблоне?

Честно, делал "на коленке", потому всё покажется немного странным, но работать будет smile

Шаблоны нужны для больших подсказок, которые просто не могут влезть в tooltip аттрибут или генерить для каждого элемента вёрстку не эффективно. Только в шаблонах распознаются теги <% имя %>, заменяемое просто на значение соответствующее имени. Кодом проще:

Код

<!-- Нам нужно указать откуда брать шаблон через опцию 'target'. Дополнительно можно поставить другие опции -->
<div tooltip-set="target: tpl; type: extern-template;">
<!-- 
  test: cool!;
  some: vingrad;
-->
<!--
Первый комментарий должен содержать пары ключь=>значение, что и будут давать значения тегам в шаблоне
Кстати, вижу в регах баг! =)  рег будет брать значение до первого ";", но его можно заэкранировать "\;".
Квантификатор "+" не за той скобкой и теперь можно пользовать не более одной экранирующей последовательности =)
Исправь в 183 строке, рег: /\s*(?:(?:([a-zA-Z0-9_\-.]+)\s*\:((?:[^;]+)|(?:\\.)))|(;))\s*/g
на: /\s*(?:(?:([a-zA-Z0-9_\-.]+)\s*\:((?:[^;]|(?:\\.))+))|(;))\s*/g
-->

Любой контент, что снабжаем подсказкой.
</div>

<!-- Собственно сам шаблон, связываем id с target ранее, первый коммент содержит шаблон -->
<div id="tpl">
<!-- <b><i><% test %></i> and <% some %> or <% cool %></b> -->
<!--
  cool: ну и тут некоторый текст;
-->
<!-- Второй комментарий содержит дефолтовые значения для тегов, на случай если они не определены в теге, что юзает тултип. -->
</div>

Вместо шаблонов можно пользоваться просто вёрсткой (type: extern), если <% теги не нужны %>. Принцип тот же, только div:tpl должен содержать вёрстку подсказки целиком, как есть (вне комментария).

Цитата(Wowa @ 25.12.2006, 20:43

)

Если я произвожу такую замену, то HTML не интерпретируется, а так и отображается.

Вероятней всего у тебя стоит фильтр на выводе, что все & в &'ы обращает. Только тогда ты можешь увидеть мнемоники как есть. Смысл мнемоник в том, что бы в аттрибуте tooltip можно было показать вёрстку. Значение аттрибута не может содержать < и >, вот и решаем. Если используется режим extern или extern-template, т.е. подсказка определена вне тега, то мнемоники конечно же не нужны smile

--------------------

Wowa

Дата 26.12.2006, 00:32 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: нет
Всего: 290

Цитата(Sardar @ 25.12.2006, 21:59

)

Ого, радует что старые скрипты ещё используються smile

Да, я на vingrad.ru его поставил. Чтобы отображалась инфо о пользователе(при наводе мышкой на ник).

P.S. Спасибо за объяснение.

tolik777

Дата 21.1.2007, 17:23 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 133
Регистрация: 19.6.2006

Репутация: нет
Всего: 2

Скажите. Может кто уже видел новую фичу от гугла с использованием AJAX:
http://translate.google.com/translate?hl=r...hl%3Dru%26lr%3D

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

Sardar

Дата 21.1.2007, 17:46 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Аякс там не используется, оригинальный и переведённый текст стоят рядом (в span контейнере, скрыт по display: none). При наведении мышой на текст, копия ноды помещается во временное baloon окошко и показывается. Собственно вся задача создать такое окошко, на JS только позиционируем и показываем.

--------------------

GZep

Дата 21.1.2007, 21:51 (ссылка)

(нет голосов)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: нет
Всего: 32

Цитата(Sardar @ 25.12.2006, 23:59

)

Ого, радует что старые скрипты ещё используються

А что, есть что-то поновее? Я имею ввиду новая версия tooltip'a... smile

--------------------

badGamer

Дата 22.1.2007, 08:21 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 20.1.2007
Где: Кемерово

Репутация: нет
Всего: нет

Sardar, а как в tooltip встроить аякс? два дня бился smile

: и ничсего не понимаю....
Просто никогда не кодил на JS.... а тут такое дело.
Очень хочется чтобы в тексте странички было что-то вида:

Код

<a href="куда-то" tooltip ="15">

, где 15 это id записи в базе например.

Как сделать так, чтобы tooltip запросил инфу у скрипта-обработчика и вернул ответ (аякс тобишь smile

)?
Помогите плиз...

Это сообщение отредактировал(а) badGamer - 22.1.2007, 09:20

GZep

Дата 22.1.2007, 14:39 (ссылка)

(нет голосов)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: нет
Всего: 32

Цитата(badGamer @ 22.1.2007, 08:21

)

а как в tooltip встроить аякс?

Не очень хорошая идея по 2 причинам:

Будет медленно работать, ведь на выполнения запроса нужно время...
Эти всплывающие подсказки е должны быть большими, ибо они плавно появляются и все такое, короче расчитаны на небольшие подсказки, желательно только текст. Из этого следует, что аякс не требуется, можно и без аякса загрузить вместе со страницей все подсказки, не сильно съев трафик.

Вот так вот. smile

--------------------

Sardar

Дата 22.1.2007, 15:50 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

GZep, поддерживаю, ложить в подсказку целую страницу незачем, следовательно всё необходимое можно отослать вместе со страницей. Тогда и подсказка будет действительно подсказкой, а не примером как разработчик умело владеет аяксом smile

--------------------

badGamer

Дата 22.1.2007, 19:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 20.1.2007
Где: Кемерово

Репутация: нет
Всего: нет

Цитата(GZep @ 22.1.2007, 14:39

)

Будет медленно работать, ведь на выполнения запроса нужно время...

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

Цитата(GZep @ 22.1.2007, 14:39

)

Эти всплывающие подсказки е должны быть большими, ибо они плавно появляются и все такое, короче расчитаны на небольшие подсказки, желательно только текст. Из этого следует, что аякс не требуется, можно и без аякса загрузить вместе со страницей все подсказки, не сильно съев трафик.

Ну а кто говорил про большие??? как напрмер (небольшая картинка + небольшое описание + пара сцылок)*150 итого получаецо 800-1000 байт * 150 = порядка 140 килобайт. Это ерунда согласен, но информация изменяется динамически, хоть и нечасто, но всеже изменяется... (делаю интерактивную карту tooltip используется для вывода и нформации о каждом городе)
Вот и хотелось бы брать инфу с сервера.

Если Вам нетрудно, подсобите пожалуйсто. smile

Это сообщение отредактировал(а) badGamer - 22.1.2007, 20:00

GZep

Дата 23.1.2007, 14:17 (ссылка)

(нет голосов)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: нет
Всего: 32

Цитата(badGamer @ 22.1.2007, 19:58

)

очень мало времени

Вы даже, наверное, не представляете себе какие бывают полудохлые хостинги.

Цитата(badGamer @ 22.1.2007, 19:58

)

но информация изменяется динамически

Да. Ну вот и подгружайте информацию при помощи аякса. Например, раньше вы ба подгрузили обычный блок div с содержанием, а теперь надо подгрузить этот блок, только в нем поставить атрибут tooltip и разработка уважаемого Sardar'a будет работать с этим догруженным блоком.

--------------------

badGamer

Дата 24.1.2007, 11:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 20.1.2007
Где: Кемерово

Репутация: нет
Всего: нет

Цитата(GZep @ 23.1.2007, 14:17

)

Вы даже, наверное, не представляете себе какие бывают полудохлые хостинги.

Зачем такими пользоватся? у меня хостингом все нормально smile

Цитата(GZep @ 23.1.2007, 14:17

)

Да. Ну вот и подгружайте информацию при помощи аякса. Например, раньше вы ба подгрузили обычный блок div с содержанием, а теперь надо подгрузить этот блок, только в нем поставить атрибут tooltip и разработка уважаемого Sardar'a будет работать с этим догруженным блоком.

В том-то все и дело, раньше вообще ничего не подгружалосль, описание состояло из 3-4 слов и все было html. А теперь описание стало больше и возникли трудности...

Если Вас это не затруднит киньте, пожалуйста, небольшой пример к вышесказанному... Я очень слабо знаком с JS.
Заранее благодарен smile

GZep

Дата 24.1.2007, 15:34 (ссылка)

(нет голосов)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: нет
Всего: 32

Цитата(badGamer @ 24.1.2007, 11:03

)

киньте, пожалуйста, небольшой пример

Ну, тут не примеры надо , а статьи. А именно статьи про AJAX:
Ajax в википедии(на русском)
Введение в Ajax
Созидательная сила AJAX
И в ФАК Винграда тоже стоит заглянуть...(кстати, обратите внимание на меню слева - в нем для подгрузки данных используется ajax)
Vingrad FAQ :: Сверхдинамичные страницы :: получение и отправка данных на сервер без прямой перезагрузки страницы
Ну с этими статьями я думаю, что все понятно будет. smile

З.Ы. Что хочется добавить: на самом деле эту разработку Sardar'a не надо дорабатывать, а надо внедрить аякс в вашу разметку.

--------------------

badGamer

Дата 24.1.2007, 16:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 20.1.2007
Где: Кемерово

Репутация: нет
Всего: нет

Спасибо конечно за link`s. С AJAX все более-менее понятно. Я бы даже сказал более чем менее smile

Проблема в моей javascript безграмотности...
Как я понимаю нужно юзать вид external tooltip. В итоге каждая ссылка будет вида

Код


<a href="city/134.html" onmouseover="loadinfo('ID')" tooltip-set="type: simple; target: info;">

Сразу вопрос, а как loadinfo сообщить, что это ссылка на 134 город, как передать это значение?
Я правильно извратил идею?

Это сообщение отредактировал(а) badGamer - 24.1.2007, 20:00

GZep

Дата 25.1.2007, 12:42 (ссылка)

(нет голосов)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: нет
Всего: 32

badGamer, Вы хотите подгружать текст подсказки или блок, в котором есть атрибут tooltip с содержанием подсказки. Если 2-е, то это не так сложно, а вот с первым, боюсь вам сможет помочь только Sardar(потому что там придется сам объект ковырять).

Да, и откуда эта разметка?

--------------------

badGamer

Дата 25.1.2007, 15:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 20.1.2007
Где: Кемерово

Репутация: нет
Всего: нет

Мне показалось, что 1 проще намного, Так что видимо вопрос уважаемому Sardar:). итого получилось следующее:

Код


<link rel="stylesheet" href="tooltip.css" type="text/css" media="screen">
<script type="text/javascript" language="JavaScript" src="tooltip.js"></script>
<script type="text/javascript" language="JavaScript" src="JsHttpRequest.js"></script>
<script type="text/javascript" language="JavaScript">
function L(value) {
    document.getElementById('desc').innerHTML= 'Подождите, идет загрузка...';
    var req = new JsHttpRequest();
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            document.getElementById('desc').innerHTML = 
                '<b>MD5("'+req.responseJS.q+'")</b> = ' +
                '"' + req.responseJS.md5 + '"<br> ';
            document.getElementById('debug').innerHTML = req.responseText;
        }
    }
    req.caching = true;
    req.open(null, 'loader.php', true);
    req.send( { q: value } );
}
</script>
</head>
<body onload="initToolTip('area')">
<div class="tooltip_simple" style="visibility:hidden;display:none;" id="desc"></div>
<img src="map.gif" width="200" height="200" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="78,66,87,75" href="2.html" tooltip>
  <area shape="rect" coords="137,64,146,73" href="3.html">
  <area shape="rect" coords="29,160,37,169" href="5.html">
</map>
Ф-ция makeToolTipBox в самом конце.

Сделал так, чтобы ф-цию L(value) не надо было прописывать в onmouseover. Теперь она автоматом вешается на выбранные теги smile

мне нравицо )

Код


obj.onmouseover=function(ev){move(ev); L(obj); if(obj.old_onmouseover) obj.old_onmouseover(ev);}

Выходит следующее: к 2 подсказка отображается. Но мне захотелось, чтобы вообще не надо было к подсказкам ничего добовлять, чтобы js автоматически добавл tooltip к заданному в init тэгу.
в коде tooltip в функции applyToolTip решил вырезать строчку

Код


if(((t=obj.getAttribute('tooltip'))==null) & ((sets=obj.getAttribute('tooltip-set'))==null)) return; //no tooltip info

Тогда подсказки отображаются ко всем <area>, но когда наводишь мышкой (IE) на подсказку выскакивает "Stack overflow at line: 0". И ничего я не могу с этим поделать. Ибо в js разбираюсь в первый раз. Да и в Opera как-то криво работать начинают. (Не исчезают сразу, тормозят).

ps настройки следующие tooltip:

Код


ToolTip.defaultSets={
  type: "extern",   target: "desc",   appearance: "simple",
  floating: "static",   width: "",   height: "", 
  offsetX: 10,   offsetY: 10,   delayOn: 100, 
  delayOff: 200,   animationLength: 200 
}

ВотЪ. помогите плиз разобратся с возникшим глюком, если не трудно smile

p.s. http://pitbull.1gb.in/emap/ - Так это выглядит.
http://pitbull.1gb.in/emap/emap.zip - исходник.

Это сообщение отредактировал(а) badGamer - 27.1.2007, 08:36

badGamer

Дата 27.1.2007, 12:24 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 20.1.2007
Где: Кемерово

Репутация: нет
Всего: нет

Уважаемый Sardar. Дальнейшие эксперименты привели к следующему. По непонятным причинам Ваша подсказка выдает ошибку когда наводишь мышкой (IE) на подсказку выскакивает "Stack overflow at line: 0". Да и в Opera как-то криво работать начинают. (Не исчезают сразу, тормозят).

Это происходит без малейших вмешательств в код. У меня она вскакивает как только я ставлю

Код


type: "extern", //tooltip type: simple, extern, extern-template
  target: "desc", //element ID
  appearance: "simple", //tooltip apearance: simple, blend
  floating: "static"

HTML соответсвенно приведен постом выше, правда вырезаны все ajax вызовы и прочее.

Помогите пожалуйста.

Sardar

Дата 27.1.2007, 19:49 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Цитата(badGamer @ 27.1.2007, 11:24

)

Это происходит без малейших вмешательств в код. У меня она вскакивает как только я ставлю

Дай ссылку на страницу. Похоже где то бесконечная рекурсия, чего в моём коде не может быть.

Извиняюсь, сейчас очень занят, времени едва хватает проверять этот раздел. Через две недели перепишу подсказки с возможностью загружать инфу аяксом (весь общий код разбежится по ViJio, hook'иться можно с любого места). Раньше никак smile

--------------------

badGamer

Дата 28.1.2007, 11:45 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 20.1.2007
Где: Кемерово

Репутация: нет
Всего: нет

http://random.1gb.in/emap/map.html вот пожалуйста.
http://random.1gb.in/emap/emap.rar
Глянь эти ссылки. Если сможешь все-таки посмотри может быстрый взгял в родной код че-нить обнаружит...

Это сообщение отредактировал(а) badGamer - 28.1.2007, 11:47

Sardar

Дата 28.1.2007, 18:35 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Цитата(badGamer @ 28.1.2007, 10:45

)

http://random.1gb.in/emap/map.html вот пожалуйста.

ИЕ7, Опера 9, FF2 - всё работает без ошибок.

ИЕ6 уже нет (винда снесла после апдейта), но если в коде ничего не менял, то под IE6 я раньше тестировал. Понятия не имею почему у тебя выскакивает ошибка... выкладывай версию браузера, призывай больше народу пусть потестят. Это при условии что ссылку дал ты верную и именно там ошибка smile

--------------------

RomantikKZ

Дата 30.3.2007, 20:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 30.3.2007

Репутация: нет
Всего: нет

Здравствуйте,
А будет ли всетаки написан мануал? Т.к. очень нужно smile

Sardar

Дата 30.3.2007, 22:34 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

RomantikKZ, лучше спроси что не ясно (в отдельной теме) smile

Хотел переписать скрипт, затем ман. Скрипт соистоит из собственно самой логики подсказки + общих функций "на все случаи жизни" + парсер CSS подобного синтаксиса. Хотел это всё разделить по ViJio библиотеке, да с учёбой/работой всё руки не доходят :hmm

--------------------

RomantikKZ

Дата 31.3.2007, 19:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 30.3.2007

Репутация: нет
Всего: нет

Жаль :( Да собсно многое не понятно...А особенно с этой проблемой сток овефлоу как у бадмэна...

Sardar

Дата 31.3.2007, 23:13 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Нашёл ошибку, вернее по удивлялся как тупо я умею писать smile

В примере от badGamer на кучу объектов вешается единый объект-подсказка. В результате регистрируем в цепочку массу "почти одинаковых" обработчиков onmouseover и onmousemove. Даже если бы брауер не захлёбывался, то подсказка работала бы корректно только для самого последнего объекта, потому как состояние "открыто/закрыто" держится в нём (в контексте вызова makeToolTipBox для него), а не в объекте подсказки. Что заставило меня так писать не знаю, но знаю что единую подсказку поставить на кучу объектов пока нельзя smile

Всё равно подсказка простая, используй лучше тип simple (пропиши в ToolTip.defaultSets или задавай аттрибутом tooltip-set), этот тип раньше был выставлен по дефолту. Позже перепишу скрипт.

--------------------

legat

Дата 16.5.2007, 17:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 13
Регистрация: 15.4.2007
Где: RU, Севастополь

Репутация: нет
Всего: нет

Код


<span tooltip="<b>Подсказка =)</b>">Test</span>

Надо заменить ДВОЙНЫЕ КАВЫЧКИ на ОДИНАРНЫЕ, вот так:

Код


<span tooltip='<b>Подсказка =)</b>'>Test</span>

Ибо обычно при вёрстке делаются в HTML ДВОЙНЫЕ КАВЫЧКИ и при вставке их - будут глюки в работе.

А при вставке вёрстки с Двойными кавычками в Одинарные - всё работает нормально.

Пофиксите в самом первом треде код - новичкам сложности лишние будут с тем что есть сейчас.

DeMx

Дата 6.7.2007, 19:36 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 51
Регистрация: 18.11.2006

Репутация: нет
Всего: нет

Подсказки работают не корректно в IE 7 (WinXP SP2). Даже вот этот пример:
http://sardar.vingrad.ru/projects/ToolTip/index.htm

Когда наводишь курсор на объект с подсказкой, то она успешно появляется, но когда убираешь - подсказка не исчезает и появляется ошибка: ""filters.Alpha.opacity" - есть null или не является объектом".

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »