Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Всплывающие подсказки(tooltip), с расширенными возможностями 
:(
    Опции темы
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>





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

PM WWW ICQ   Вверх
Wowa
Дата 14.10.2006, 15:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
Group Icon


Профиль
Группа: Админ
Сообщений: 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 любые аттрибуты разрешены.
PM WWW   Вверх
z-END
Дата 14.10.2006, 18:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прафесар™
****


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

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



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


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

PM WWW ICQ   Вверх
Rock
Дата 4.11.2006, 19:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



хотелось бы поподробнее о использовании шаблонов, если можно 
PM MAIL ICQ   Вверх
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: спасибо за скрипт, очень пригодился. 
PM MAIL ICQ   Вверх
Wowa
Дата 25.12.2006, 21:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
Group Icon


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

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



А как использовать переменные <% var1 %> в шаблоне?
PM WWW   Вверх
Wowa
Дата 25.12.2006, 21:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
Group Icon


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

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



Цитата

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


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

у меня:

Код

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

PM WWW   Вверх
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 не интерпретируется, а так и отображается.

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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Wowa
Дата 26.12.2006, 00:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
Group Icon


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

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



Цитата(Sardar @  25.12.2006,  21:59 Найти цитируемый пост)
Ого, радует что старые скрипты ещё используються smile

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

P.S. Спасибо за объяснение.
PM WWW   Вверх
tolik777
Дата 21.1.2007, 17:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



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

Попробуйте наведите на какое-нибудь слово. Всплывает очень красивое окошко с тенью, а в нем оригинал предложения на английском языке.
Может кто знает как рализовать такое (имею ввиду часть JavaScript а не аякс)
PM MAIL WWW ICQ   Вверх
Sardar
Дата 21.1.2007, 17:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


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

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



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



--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
GZep
Дата 21.1.2007, 21:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

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



Цитата(Sardar @  25.12.2006,  23:59 Найти цитируемый пост)
Ого, радует что старые скрипты ещё используються

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


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
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
PM MAIL ICQ   Вверх
GZep
Дата 22.1.2007, 14:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

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



Цитата(badGamer @  22.1.2007,  08:21 Найти цитируемый пост)
а как в tooltip встроить аякс?

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


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
Sardar
Дата 22.1.2007, 15:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


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

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



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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Страницы: (5) Все 1 2 [3] 4 5 
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.0869 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.