Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » jQuery » Свой стиль для подсказки с помощью jQuery

Свой стиль для подсказки с помощью jQuery

Свой стиль для подсказки с помощью jQuery

Всем снова здравствуйте!
Как не трудно догадаться из названия, сегодня хочу рассказать об очередном способе оформления и вывода подсказок на страницы сайта. Способов много и все они разные, как по качеству исполнения, так и по функциональным возможностям. В этом плане выбор существует огромный, на любой вкус и цвет, от самых простеньких и невзрачных, до навороченных, с подключением в работу различных специализированных плагинов. Как-то я расписывал один из таких способов в статье : «Подсказка к ссылке с фоном.», интересный и довольно простой метод. Но прогресс не стоит на месте и современные технологии позволяют упростить весь процесс.

Давайте посмотрим, как с помощью небольшого плагина и магии , можно реализовать и видоизменить выводимые браузером. Для начала, чтобы не нарушать традиции, можете посмотреть пример работы скрипта:

Небольшой по размеру (3 КБ) скрипт для вывода подсказок, работает так же, как стандартные подсказки браузера, но имеет несколько вариантов вывода и стилей оформления с помощью CSS. По умолчанию, скрипт обрабатывает любой элемент с title="" атрибутом, такие как ссылки, изображения, параграфы текста и т.д...
 

HTML

Для того чтобы все это дело заработало, необходимо плагин jquery.style-my-tooltips.js и файл стилей style-my-tooltips.css подключить к документу(странице html), прописав полный путь в голове страницы, в разделе..., javascript всё же предпочтительнее, по многим причинам, разместить внизу, непосредственно перед закрывающим тегом </body>.

<link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.style-my-tooltips.js" type="text/javascript"></script>
<script>
$().ready(function() {
    $("[title]").style_my_tooltips({
        tip_follows_cursor: "on", //on/off
        tip_delay_time: 1000 //milliseconds
    });
});
</script>

Библиотеку jQuery, в примере, подключаем напрямую с серверов Google, у вас может быть библиотека уже подключена, так что не забывайте проверить полный путь до исполняющих файлов.

Раздербанивать «фарш» нашей подсказки мы начнем с формирования стилей в CSS.
 

CSS

Готовый набор правил для формирования подсказок, расположен в отдельном файле стилей style-my-tooltips.css. В примере использованы свойство из обоймы CSS3, плавное скругление углов тела подсказки, градиенты и чуточку тени, при этом тормознутый IE (старых версий), тупо будет выдавать прямоугольную подсказку, напрочь игнорировать градиенты и тень, ну да и х... с ним.

#s-m-t-tooltip {
   position:fixed; 
   max-width:300px;  
   padding:8px; 
   background-color:#161616;
   /* градиентная заливка */
   background: -moz-linear-gradient(top, rgba(22, 22, 22, 0.8) 0%, rgba(51, 51, 51, 0.8) 100%);
   background: -webkit-linear-gradient(top, rgba(22, 22, 22, 0.8) 0%,rgba(51, 51, 51, 0.8) 100%);
   background: linear-gradient(top, rgba(22, 22, 22, 0.8) 0%,rgba(51, 51, 51, 0.8) 100%); 
   z-index:10; 
   display:inline-block; /*important*/
   /* шрифт */
   font-family:Verdana, Geneva, sans-serif; 
   font-size:12px; /* размер шрифта */
   line-height:16px; /* высота строки */
   color:#fff; 
   /*css3 закругленные углы*/
   -moz-border-radius:5px; 
   -khtml-border-radius:5px; 
   -webkit-border-radius:5px; 
   border-radius:5px;
   /* внешняя тень */
   -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

Думаю, что с оформлением вопросов не возникнет, так как все до безобразия просто, а для «ну очень уж одаренных», написал некоторые пояснения к параметрам.

jQuery

Непосредственно в самом плагине jQuery jquery.style-my-tooltips.js, не думаю, что есть какая-то острая необходимость проводить настройки, все работает быстро и стабильно, но для очень любознательных и дабы продемонстрировать начинку скрипта, приведу код плагина:

(function($){
 $.fn.style_my_tooltips = function(options) {
    var defaults = {
        tip_follows_cursor: "on",
        tip_delay_time: 1000
    };
    var options = $.extend(defaults, options);
    $("body").append("
<div id="s-m-t-tooltip"></div>
 
"); //create the tooltip container
    smtTip=$("#s-m-t-tooltip");
    smtTip.hide(); //скрыть
    return this.each(function() {
        function smtMouseMove(e){
            smtMouseCoordsX=e.pageX;
            smtMouseCoordsY=e.pageY;
            smtTipPosition();
        }
        function smtTipPosition(){
            var cursor_tip_margin_x=0; //горизонтальное пространство между курсором и подсказкой
            var cursor_tip_margin_y=24; //вертикали между курсором и подсказкой
            var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth();
            var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight();
            if(leftOffset< =$(window).width()){
                smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x);
            } else {
                var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();
                smtTip.css("left",thePosX);
            }
            if(topOffset<=$(window).height()){
                smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y);
            } else {
                var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();
                smtTip.css("top",thePosY);
            }
        }
        $(this).hover(function(e) {
            // mouseover
            var $this=$(this);
            $this.data("smtTitle",$this.attr("title")); //store title
            var theTitle=$this.data("smtTitle");
            $this.attr("title",""); //remove title to prevent native tooltip showing
            smtTip.empty().append(theTitle).hide(); //set tooltip text and hide it
            smtTip_delay = setInterval(smtTip_fadeIn, options.tip_delay_time); //set tooltip delay
            if(options.tip_follows_cursor=="off"){
                smtMouseMove(e);
            } else {
                $(document).bind("mousemove", function(event){
                    smtMouseMove(event);
                });
            }
        }, function() {
            // mouseout
            var $this=$(this);
            if(options.tip_follows_cursor!="off"){
                $(document).unbind("mousemove");
            }
            clearInterval(smtTip_delay);
            if(smtTip.is(":animated")){
                smtTip.hide();
            } else {
                smtTip.fadeTo("fast",0);
            }
            $this.attr("title",$this.data("smtTitle")); //add back title
        });
        function smtTip_fadeIn(){
            smtTip.fadeTo("fast",1,function(){clearInterval(smtTip_delay);});
        }
    });
 };
})(jQuery);

Вот пожалуй и все на этом, теперь когда вы присвоите какому-либо элементу страницы атрибут title="" и заполните его осмысленно, при наведении на этот элемент, будет выводиться замечательная подсказка, без каких либо задержек и визуальной ломки.

Надеюсь, что этот не большой урок пригодится вам в работе над своими проектами. Знаете какие-нибудь интересные решения, пишите в комментариях, новое это всегда интересно.

Материал подготовлен на основе публикаций: manos.malihu.gr

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. evgeniy:

    Всё класно,но долго думает,я два раза успею пройти по ссылке.

    Ответить
    • driver:

      evgeniy, рад видеть.

      Думает и правда медленно, но ни кто не мешает выставить задержку " 0 " в .js, хотя прибавка в скорости не большая.

      Всегда приходится чем то жертвовать, в этом случае привлекает широкий круг использования и простота оформления, ну а скорость работы....... 🙂

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru