Всплывающие подсказки призваны предоставлять пользователю более детальную информацию, разъяснять особо сложные участки документа.
В статье представлен пример реализации всплывающих подсказок с помощью библиотеки jQuery.
HTML
В тексте, где необходимы пояснения в виде всплывающей подсказки разместим изображение. Обернем изображение специализированным тегом <dfn>, тег необходим исключительно для идентификации элемента подсказки и для хранения уникального идентификатора. Браузер никак не реагирует на тег <dfn>
Всплывающие подсказки <dfn id="1"><img src="1.png" /></dfn>
PHP
При клике на изображении функция $.ajax() запрашивает данные у серверного сценария, который обычно по полученному идентификатору запрашивает данные из Базы. В примере применяется простейший скрипт, который возвращает заранее помещенные в него данные исходя из значения идентификатора:
<?
header("Content-Type: text/html; charset=UTF-8");
if($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") {
$id=intval($_GET["id"]);
switch ($id){
case 1:print "Данные для подсказки для id=1";break;
case 2:print "Данные для подсказки для id=2";break;
case 3:print "Данные для подсказки для id=3";break;
}
}
?>
jQuery
Далее приведен сценарий плагина, задача которого подгружать из указанного серверного файла данные, затем сконструировать блок, оформить, заполнить его данными и отобразить на экране:
(function($){
$.fn.viewAnswer=function(options){
var $settings=$.extend({
url:"php/getTips.php",
width:300
},options);
this.attr("title","Кликните для справка");
return this.click(function(){
$this=$(this);
$settings.id=$this.attr("id");
//Верхний отступ
$settings.top=$this.offset().top+20;
//Отступ слева
if ($this.offset().left-$settings.width<0)
$settings.left=$this.offset().left;
else
$settings.left=$this.offset().left-$settings.width;
//Подгрузка содержимого
$.ajax({
url:$settings.url,
type:"GET",
data:{"id":$settings.id},
dataType:"html",
success:function(data){
//Создание, оформление, заполнение и отображения подсказки
$("<div></div>")
.css({
"position":"absolute",
"z-index":"999",
"top":$settings.top+"px",
"left":$settings.left+"px",
"width":$settings.width+"px",
"padding":"10px",
"text-align":"left",
"-moz-border-radius":"5px",
"-webkit-border-radius":"5px",
"border-radius":"5px",
"border":"1px solid #DADBE2",
"background-color":"white",
"-webkit-box-shadow":"0 0 10px 1px #EAEAEA",
"-moz-box-shadow":"0 0 10px 1px #EAEAEA",
"box-shadow":"0 0 10px 1px #EAEAEA"
})
.html("<img src="imgs/close.png" /><br />"+data)
.appendTo("body")
.show()
.children("img")
.attr("title","Закрыть окно")
.css({
"cursor":"pointer",
"float":"right"
})
.click(function(){$(this).parent().hide()});
}
});
});
}
})(jQuery);
Подключение и активация плагина
В заголовке документа подключите jQuery библиотеку, плагин всплывающих подсказок, и сценарий, активизирующий плагин:
<script src="js/jquery v1.7.2.js" type="text/javascript"></script>
<script src="js/jquery.tips.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("p dfn").viewAnswer({
url:"php/getTips.php",
width:200
});
});
</script>