VPF::Всплывающие подсказки на jQuery(jquery.tips.js)

rok9

Дата 12.5.2013, 18:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 12.5.2013

Репутация: нет
Всего: нет

Есть код(он оформляет подсказку):

Код

    
    <!--JQUERY-->
    <script src="js/jquery v1.7.2.js" type="text/javascript"></script>
    <script src="js/jquery.rok_9tips.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function(){
            $("p dfn").viewAnswer({
                width:200
            });
        });
    </script>
    
    <style>
        h1{padding:5px;text-align:center;font:17px "Tahoma"}
        p{padding:5px 10px;font:15px "Tahoma"}
        p img{cursor:pointer;}
    </style>

Этот выводит:

Код


   <p>Всплывающие подсказки <dfn id="1"><img src="1.png" /></dfn></p>

файл jquery.rok_9tips.js:

Код


(function($){
    $.fn.viewAnswer=function(options){
        var $settings=$.extend({
            width:300,
            data:"Описание отсутствует"
            
        },options);
        
        this.attr("title","Посмотреть описание");
        
        return this.click(function(){
        
            $this=$(this);
            
            $settings.data=$this.attr("help");
            if ($settings.data=="")    
               $settings.data="Описание отсутствует";            
            //Верхний отступ
            $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;
            
            //Подгрузка содержимого
                    data=$settings.data;
                    //Создание, оформление, заполнение и отображения подсказки
                    $("<div></div>")
                    .css({
                        "position":"absolute",
                        "z-index":"999",
                        "top":$settings.top,
                        "left":$settings.left,
                        "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);

[b]Вообщем проблема: при каждом нажатии на изображения появляются новые подсказки(через несколько нажатий их чёрт знает сколько), а старые не исчезают. Хотелось бы чтобы активная подсказка была только одна.

Это сообщение отредактировал(а) rok9 - 12.5.2013, 18:49

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »