Всплывающие подсказки на jQuery 


Всплывающие подсказки на jQuery

Опубликовано

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

В статье представлен пример реализации всплывающих подсказок с помощью библиотеки 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>