Техническая поддержка сервиса Quadro.Boards

Объявление

Идет поиск Хранителя форума

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Всплывающие подсказки в постах


Всплывающие подсказки в постах

Сообщений 1 страница 10 из 10

1

Всплывающие подсказки в постах, бета-версия

Авторы: Romych, rps

для работы с подсказками нам потребуется плагин Lytebox, а так же мы будем использовать тот что установлен на нашем сервисе поумолчанию - jquery.tipsy
оба плагина, как выяснилось, поддерживают работу с html контентом внутри всплывающих подсказок, что позволяет делать невероятные вещи, которые не даёт возможности делать тот же спойлер.
пример, подсказка может всплывать при наведении на установленную вами картинку, и автоматически начнёт проигрываться музыка или воспроизводиться видео внутри подсказки, можно вставлять так же любые таблицы, наполненные любым контентом.

Всплывающие подсказки 5 видов, для удобства работы с ними создана вот такая форма:

http://s7.uploads.ru/t/otuDG.jpg

в html-верх:

Код:
<script type="text/javascript" language="javascript" src="http://lytebox.com/lib/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="http://lytebox.com/lib/lytebox/lytebox.css" type="text/css" media="screen" />
.my {
	background-color: #FFFFFF;
	color: #488baa;
	font-size: 12px;
	font-family: Tahoma;
	line-height: 125%;
	border-radius: 15px;
	-moz-box-shadow: inset 0 0 1em #8cb9d6;
	-webkit-box-shadow: inset 0 0 1em #8cb9d6;
	box-shadow: inset 0 0 1em #8cb9d6;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#8cb9d6', Direction=145, Strength=3);
}
.post-content {
	overflow: visible !important;
}
.tipsy-inner {
	font-size:16px!important;
	max-width:450px !important; 
	text-align: left !important;
}
.lytetip {
	position: static !important;
}
.lytetip span {
	position: absolute !important;
	top: inherit !important; 
	left: inherit !important;
	display: inline-block !important;
	visibility: hidden;
	width: auto !important;
	margin-top: 0.9em;
}
.lytetip:hover span {
	display: inline-block !important;
	visibility: visible;
}
#fon {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #000;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
	opacity: 0.5;
}
</style>


в html-низ:

Код:
<!--Подсказки-->
<script language="javascript">
$('td#button-hide').before('<td id="tooltips" style=\'background-image:url("http://www.iconsearch.ru/uploads/icons/splashyicons/16x16/comments_reply.png")\' onclick="return changeVisibility(\'tipsybox\', this);"><img src="/i/blank.gif" title="Всплывающие подсказки"></td>');
$('#tooltips').click(function(){$('#tipsybox').before('<div id="fon"></div>'); });
if ((document.URL.indexOf("viewtopic.php")!=-1) || (document.URL.indexOf("post.php")!=-1)){
elm= document.getElementsByTagName("div");
for (y in elm) {if (elm[y].className == "post-content") {
p = elm[y].getElementsByTagName("p");
for (z in p) {if(!p[z] || !p[z].innerHTML) continue;
var post = p[z].innerHTML;
if(post.indexOf("[/mytool]")!= -1) {
tool = /\[mytool=(.*?)\](.*?)\|(.*?)\[\/mytool\]/gi
post = post.replace(tool, "<a href='javascript:void(0)' data-lyte-options='$1' class='lytetip' data-tip='$3'>$2</a>") 
};
p[z].innerHTML = post;}}}}
function getRadioGroupValue(radioGroupObj){for (var i=0;i<radioGroupObj.length;i++)if (radioGroupObj[i].checked) return radioGroupObj[i].value;return null;}
function act2() {var tips=getRadioGroupValue(document.rf.tip);var op=document.getElementById('opis').value;var ur=document.getElementById('adr').value;insert('[mytool='+tips+']'+ur+'|'+op+'[/mytool]');changeVisibility('tipsybox');var d=document.getElementById('fon');d.parentNode.removeChild(d);}
</script>
<div class="my" align="center" id="tipsybox" style="display:none;width:375px;padding:8px;position:fixed;top:25%;right:35%;z-index:900;" class="container">
<strong>Варианты всплывающих подсказок</strong><br><br>
<form name="rf" style="text-align:center;padding:5px;word-spacing:4px;">
<input type="radio" name="tip" value="tipStyle:info changeTipCursor:false" onclick="this.form.act.onclick=act2"><a href="#" class="lytetip" data-lyte-options="tipStyle:info" data-tip="информационная" onclick="this.form.act.onclick=act2"> info</a>
<input type="radio" name="tip" value="tipStyle:help changeTipCursor:false" onclick="this.form.act.onclick=act2"><a href="#" class="lytetip" data-lyte-options="tipStyle:help" data-tip="вопрос"> help</a>
<input type="radio" name="tip" value="tipStyle:warning changeTipCursor:false" onclick="this.form.act.onclick=act2"><a href="#" class="lytetip" data-lyte-options="tipStyle:warning" data-tip="предупреждение"> warning</a>
<input type="radio" name="tip" value="tipStyle:error changeTipCursor:false" onclick="this.form.act.onclick=act2"><a href="#" class="lytetip" data-lyte-options="tipStyle:error" data-tip="ошибкa"> error</a>
<br><br>
<textarea id="adr"  cols="45" rows="3" style="background:#f0f8ff; width: 100%;" placeholder="Введите слово или bb-code с изображением, при наведении на которое будет появляться всплывающая подсказка"></textarea><textarea id="opis" cols="45" rows="3" style="background:#f0f8ff; width: 100%;" placeholder="Введите текст с применением любых  bb-cod'ов, этот текст будет виден в подсказке при наведении курсора"></textarea>
<button type=button name=act>Создать подсказку</button>  <button type="reset" onclick="changeVisibility('tipsybox');var d=document.getElementById('fon');d.parentNode.removeChild(d);">Отмена</button></form></div>

Пример:
http://s7.uploads.ru/t/ndF3V.jpg

0

2

Здорово! :) но не понятно :(
Не дадите ссылку на форум с установленным дополнением?

0

3

http://sadhaka.rusff.ru/viewtopic.php?id=37#p146

0

4

sadhaka
Так подсказка это всплывающее окно с текстом и все?

0

5

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

0

6

sadhaka
Тогда важный вопрос: Размер окна устанавливается автоматически в зависимости от вложения?

0

7

HerrOberEgerMaster
Да, именно так.

+1

8

sadhaka
Спасибо за скрипт и за инструктаж. :)

0

9

HerrOberEgerMaster
за скрипт спасибо Ромычу ))

0

10

И ему тоже спасибо :)

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Всплывающие подсказки в постах


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC