Главная » Уроки » Свой стиль для подсказки с помощью jQuery

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

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

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

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

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

HTML

Для того чтобы все это дело заработало, необходимо jquery.style-my-tooltips.js и файл стилей style-my-tooltips.css подключить к документу, прописав полный путь в голове старницы между тегами head.

<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 расположен в папке с исходниками, у вас же это может быть совершенно другая папка, так что не забывайте правильно указывать путь до исполняющих файлов.
Раздербанивать внутренности нашей подсказки мы начнем с рассмотрения стиля оформления через CSS.

CSS

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

#s-m-t-tooltip{
position:fixed; 
max-width:300px; /*максимальная ширина*/ 
padding:6px 8px 8px 8px; 
background:#222; /*фон подсказки*/
z-index:10; 
display:inline-block; /*important*/
/*шрифт*/
font-family:Verdana, Geneva, sans-serif; 
font-size:11px; /*размер шрифта*/
line-height:16px;/*высота строки*/
color:#fff; /*цвет шрифта*/
/*css3 закругленные углы*/
-moz-border-radius:5px; 
-khtml-border-radius:5px; 
-webkit-border-radius:5px; 
border-radius:5px;
}

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

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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по 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