jQuery tooltip проблема
Сразу предупреждаю что я самоучка, и с профессиональной точки зрения полный чайник, так что всю критику, и мои недочеты говорите сразу. Здравая критика залог того что в следующий раз я буду умней.
Нужен был tooltip для сайта, начал искать подходящий, не нашел, у всех которые попадались, находил всякие недочеты которые для моего случая были не допустими, и решил написать свой плагин. Так как плагин нужен был для одноразовой и вполне ясной цели, то я сильно не мудрил. Вот что получилось: (function($) { $.fn.tooltip = function(options){ $('body').append('<div class="tooltip"></div>'); var options = jQuery.extend({ title: '', top: 0, left: 0 },options); return this.each(function() { $(this).mouseover(function(){ options.top = $(this).offset().top - 25; options.left = $(this).offset().left - $(this).width()/2; options.title = $(this).attr('title'); $('.tooltip').text(options.title) .css('display', 'block') .css('top', options.top) .css('left', options.left); $(this).attr('title', ''); }); $(this).mouseout(function(){ $(this).attr('title', options.title); $('.tooltip').css('display', 'none'); }); }); }; })(jQuery) А вот и html: <div class="min_images"> <a href="#" class="active" title="idsfisdio"> <img src="images/min_img_1.jpg" alt="" /> </a> <a href="#" title="idsfisdio"> <img src="images/min_img_2.jpg" alt="" /> </a> ... <a href="#" title="idsfisdio"> <img src="images/min_img_7.jpg" alt="" /> </a> </div> В общем проблема вот в чем, есть еще один скриптик который присваивает класс active: <script type="text/javascript"> $(function(){ $(".min_images a").click(function(){ $(".min_images a").removeClass('active'); $(this).addClass('active') }) }) </script> Вот из за него вся и беда, плагин инициализируемый в самом начале после загрузки документа не воспринимает изменения класса у элементов, очень надеюсь на вашу помощь, ибо как я уже сказал я чайник, и не совсем понимаю как это обойти. Знаю что нужно коим то образом нужно перезагружать плагин, но как это реализовать... ЗЫ: очень надеюсь что не ошибся темой, если что извеняйте не нарошно. |
Возможно, туплю, но не вижу связи между тултипами и ссылками с классом active и без него.
По теме - такие вещи гораздо лучше делать при помощи css (получается быстрее во всех смыслах). К коду: функция offset достаточно затратная и уж как минимум её вызов следует сохранять в переменную, а затем к ней обращаться. |
SouthTracer,
в вашем коде я не увидел как напоминания о классе active, так и вообще активного взаимодействия с css. ели я ошибся, скажите линию, на которой упоминается этот класс Цитата:
|
Ещё +1 аргумент в пользу того, чтобы делать всё на css - в случае css содержание (текст всплывающих подсказок) находится в html, которое там, скорее всего, формирует серверный скрипт, а простейшая логика попадает в css.
В случае же с представленным плагином, описание подсказок, скорее всего, попадёт в код javascript, что является плохой практикой, так как этот скрипт не получится вынести в отдельный файл и произойдёт ухудшение читаемости кода (и, возможно, увеличение веса страницы). В javascript желательно помещать только логику. |
crayday,
помещайте текст подсказок в HTML, кто ж мешает. |
Kolyaj,
Да, верно. Это, пожалуй, имеет смысл тогда, когда для подсказок предполагается анимация. |
точно, блин, забыл сказать, запускается плагин следующим образом:
$('.min_images a:(".active")').tooltip(); Цитата:
ЗЫ: Текст подсказок и так в html, он достается из title ссылки. |
Каким способом можна выудить ID дива по его offset().top?
Подскажите ,пожайлуста или дайте идеи <div [B]id='N'[/B]> xxxx</div> <script type="text/javascript"> var r= $('div').offset().top var R= $('div') if(r<12){ alert(R.attr('id')) } </script> Мож ичем пройтись складывая в массив offset().top и ай ди каждого дива? |
Андрей38, начинай уже делать нормальные примеры, не ленись...
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- <link rel="stylesheet" type="text/css" href="tmp.css" /> --> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <div id='N'> xxxx</div> <div id='M'> yyyy</div> <div id='K'> zzzz</div> <script type="text/javascript"> $('div').each(function(){ var top=$(this).offset().top; if (top<40) { alert(this.id) }; }); </script> </body> </html> |
КСА ! ОГРОМНЕЙШЕЕ СПАСИБО!:thanks: :thanks: :thanks: :thanks: А я то думал, в эррей все запихать и тягать по индексу и смотреть ,что вытянулось :)
http://www.youtube.com/watch?feature...&v=NIea9mUUR8U Ну я не ленюсь ,как бы.. Я уже и растиражировал такой эффект по всей таблице.Но начало напрягаться и тормозить.В строке по 3 штуки одинаковых контентов с разными индексами по Зет. Поэтому тулпит по офсету- наиболее актуально. спасибо , еще раз ,маэстро :thanks: ...Классная связка- ич-зис .... |
Часовой пояс GMT +3, время: 00:39. |