Статьи Веб-программирование Создаем простой tooltips с помощью CSS и jQuery
| Создаем простой tooltips с помощью CSS и jQuery |
| 22.10.2008 15:46 |
|
CSS tooltips очень популярны в современном веб дизайне, и вопреки широко распространенному мнению их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов. Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS. Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так: <a href="#" title="Это обыкновенный Tooltips">Ссылка</a>
Позже мы будем использовать javascript, чтобы извлечь title и вставить его в контейнер: <div class="tooltip">
<p>Это обыкновенный Tooltips</p> </div> CSS для нашего tooltips будет выглядеть примерно так: .tooltip{
position:absolute; z-index:999; left:-9999px; background-color:#dedede; padding:5px; border:1px solid #fff; width:250px; } .tooltip p{ margin:0; padding:0; color:#fff; background-color:#222; padding:2px 7px; } Position должен быть absolute, для того чтобы Javascript мог установить top и left свойство для div, который будет размещаться рядом с нашим курсором мыши. Пока мы устанавливаем свойство left = -9999px. Остальная часть CSS только для визуального оформления. Создаем jQuery Tooltips: jQuery-код - краткий и простой: Взгляните на весь скрипт, дальше я объясню попорядку что для чего. function simple_tooltip(target_items, name){
$(target_items).each(function(i){ $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>"); var my_tooltip = $("#"+name+i); $(this).removeAttr("title").mouseover(function(){ my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400); }).mousemove(function(kmouse){ my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15}); }).mouseout(function(){ my_tooltip.fadeOut(400); }); }); } $(document).ready(function(){ simple_tooltip("a","tooltip"); }); ? Это может выглядеть сложным, особенно если Вы плохо знакомы с jQuery, но на самом деле все довольно просто. Прежде всего мы создаем функцию: function simple_tooltip(target_items, name){
} ? target_items - переменная, которую мы определяем, вызывая скрипт. Например: чтобы добавить tooltips ко всем ссылкам в блоке #maincontent, необходимо ввести “#maincontent а”. Name определяет css класс, который мы применяем для нашего tooltip. Мы используем переменные здесь в целях придания гибкости скрипту, таким образом Вы можете добавить различные tooltips с различным стилями. function simple_tooltip(target_items, name){
$(target_items).each(function(i){ // generates code for each tooltip }); } ? Здесь мы генерируем код для каждого пункта, который будет найден нашим скриптом. Переменная i, которую мы передаем функции, будет автоматически увеличена jQuery после каждого повторения. Таким образом мы будем в состоянии дать каждому tooltips уникальный ID. function simple_tooltip(target_items, name){
$(target_items).each(function(i){ $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>"); }); } ? Этот фрагмент создает html-код для каждого tooltip. Они все получают один и тот же сlass, но различные ID. Title добавляется между тегами р. function simple_tooltip(target_items, name){
$(target_items).each(function(i){ $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>"); var my_tooltip = $("#"+name+i); }); } ? Эта строка выбирает tooltip и сохраняет его в переменной для дальнейшего использования. function simple_tooltip(target_items, name){
$(target_items).each(function(i){ $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>"); var my_tooltip = $("#"+name+i); $(this).removeAttr("title").mouseover(function(){ }).mousemove(function(kmouse){ }).mouseout(function(){ }); }); } ? Это - основная конструкция нашей функций. Прежде всего мы выбираем текущую ссылку $(this). Затем удаляем аттрибут title, так как мы не хотим что бы появлялся "нормальный" tooltip, который показывает каждый браузер, при наведении мыши на ссылку. Затем мы вызываем 3 функции: Как Вы можете видеть, мы передаем параметр в mousemove, этот параметр очень важен, так как он хранит положение курсора мыши. $(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400); }).mousemove(function(kmouse){ my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15}); }).mouseout(function(){ my_tooltip.fadeOut(400); }); Теперь мы определяем, что будет происходить, когда будут вызваны различные функции: $(document).ready(function(){
simple_tooltip("a","tooltip"); }); ? Последнее что мы делаем - это вызываем скрипт, как только документ будет загружен. Как было упомянуто ранее, первый параметр - это селектор, а второй параметр - classname нашего tooltip. Таким образом Вы можете создать различные дизайны для разных tooltips. |
| Обновлено 23.10.2008 09:18 |
