Tooltip - всплывающие подсказски
Посмотрев в “Моем мире”, а также на сайтах знакомств (при наведении на имя пользователя появляется его фото), захотелось увидеть данную штучку и в instant cms. Думаю, это будет очень актуальной штучкой для социальной сети, если вы решитесь построить социалку. Поискав в интернете, понял, что данная штука делается через iquery, а сам компонент называется tooltip.js. Если немного вникнуть в суть, то данную штучку можно привентить в любую систему.
И так, как вы поняли со скриншота, скрипт работает в модуле “Кто онлайн“. Рабочюю версию скрипта можете посмотреть на сайте http://www.nsc.kz (сайт еще на тестировании, кто хочет помочь с дизайном, напишите пожалуйста в личку).
Как это прикрутить?
Напишу маленькую инструкцию:
1. Во-первых скачайте архив со всеми нужными файлами: Скачать
2. Нужные скрипты расположены в папке “JS”. Данную папку можно закинуть в любое место, главное прописать его адрес. Так как у меня шаблон modern, буду показывать прикрутку примера на основе этого шаблона.
Папку js закидываем в templates/modern/
3. Таблицу стилей tooltip.css нужно положить в templates/moedrn/css. С помощью это таблицы стилей, можно будет изменять цвета, размеры нашей подсказки.
4. Файл userimg.php нужно записать в core/ajax/.
5.А измененный файл cms.php закидываем в папку core
Все прелюдия для установки “tooltip” уже сделаны. Теперь будем его подключать в файле template.php нашего шаблона.
1. Подключаем нужные компоненты jquery (вместо modern надо написать ваше название шаблона)
<script type=”text/javascript” src=”/templates/modern/js/jquery.dimensions.js”></script>
<script type=”text/javascript” src=”/templates/modern/js/jquery.tooltip.js”></script>
2. Подключаем вызов скрипта:
<script type=”text/javascript”>
$(document).ready(function(){
$(”a.user_gender_link”).tooltip({
track: true,
delay: 100,
showBody: “::”,
showURL: false,
opacity: 0.85
});
});
</script>
Вот и всё! Должно все заработать. Если хотите, чтобы выводились маленькие фотографии,то измените в core/userimg.php
$small = cmsRequest(’size’, ’str’, ’big’);
на
$small = cmsRequest(’size’, ’str’, ’small’);
Если у вас не получится установить тултип, напишите мне, обязательно помогу!