ID элемента, связные события.
Здравствуйте, уважаемые, вопрос собственно такой.
Делаю интерактивную карту, на примере http://htmlbook.ru/example/raphael/ <- демо карты http://htmlbook.ru/blog/postroenie-i...arty-s-raphael <- статья с кодом и тп. С боку от карты хочу разместить таблицу со списком стран. структура те такая: <tr id="2"> <td><input type="checkbox"></td> <td>Нога</td> </tr> Так как же подвязать эту строку и события мышеклика мышенавединия чтобы они были аналогичны тем же событиям на карте. Те на карте например рука человека навожу на нее подсвечивается в таблице, подсвечивается на карте. как сроднить table id с map id?) |
Ну во время инициализации создавать таблицу с совпадающими id и там где на hover и click навешиваются обработчики прописать выделение соответствующих строк в таблице.
|
те я могу создать вторую канву текст взять Имена таблицы из paths[country].name, и засунуть эту вторую канву перед событием ховер, правильно?
var r = Raphael('map', 220, 220), attributes = { fill: '#3a75c4', stroke: '#3b5998', 'stroke-width': 2, 'stroke-linejoin': 'round' }, arr = new Array(); for (var country in paths) { var obj = r.path(paths[country].path); obj.attr(attributes); obj.attr('title', paths[country].name); arr[obj.id] = country; obj .hover(function(){ document.location.hash = arr[this.id]; var activhash = window.location.hash.split('#')[0]; this.animate({ fill: '#003399' }, 300); }, function(){ this.animate({ fill: attributes.fill, }, 300); }) |
Ну вот же:
arr[obj.id] = country; obj.id - это и есть id страны. Тут можно и создавать вашу таблицу построчно и писать этот id куда надо. А на ховере и клике висят обработчики, которые и работают с этими id через this.id. Ничто не мешает прямо в эти обработчики вписать код для работы с вашей таблицей. |
Получилось создать массив обьектов с тем же id, теми же атрибутами, но событие ховер подвесить не получается( пробовали this.id и...в общем не вышло. Помогите обьединить их obj и hover чтобы менялись вместе.(
$(function(){ var r = Raphael('map', 820, 420), attributes = { fill: '#3a75c4', stroke: '#3b5998', 'stroke-width': 2, 'stroke-linejoin': 'round' }, attribut = { fill: '#000', }, arr = new Array(); for (var country in paths) { var obj = r.path(paths[country].path); var t = r.text(paths[country].x, paths[country].y, paths[country].name); obj.attr(attributes); t.attr(attribut); obj.attr('title', paths[country].name); arr[obj.id] = country; arr[t.id] = country; obj .hover(function(){ this.animate({ fill: '#003399', }, 300); }, function(){ this.animate({ fill: attributes.fill, }, 300); }) .click(function(){ document.location.hash = arr[this.id]; var point = this.getBBox(0); $('#map').next('.point').remove(); $('#map').after($('<div />').addClass('point')); $('.point') .html(paths[arr[this.id]].name2) .prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть')) .css({ left: point.x+(point.width/2)-80, top: point.y+(point.height/2)-20 }) .fadeIn(); }); t .hover(function(){ this.animate({ fill: '#003399', }, 300); }, function(){ this.animate({ fill: attribut.fill, }, 300); }) $('.point').find('.close').live('click', function(){ var t = $(this), parent = t.parent('.point'); parent.fadeOut(function(){ parent.remove(); }); return false; }); |
Вот модифицированный пример с htmlbook с таблицей стран и выделением их по ховеру: http://learn.javascript.ru/play/JHG4C
|
jsnb,
Большое спасибо! Я так понимаю эти строчки var newRow = '<tr id="'+ obj.id +'"><td>' + paths[country].name + '</td></tr>'; table.append(newRow); придают элементам таблицы такой же id как и у элементов dom? Таким образом мы и ищем в ховере их по ид... вопрос этот ли вариант лучше или все же лучше генерировать дом элементы? Нужно же еще и обратное взаимодействие. Я правда хочу научиться, так что буду рад даже ссылкой в текст учебника где про это пишут... |
Там идет цикл. На каждой итерации цикла будет свой id. Соответственно эта строка:
var newRow = '<tr id="'+ obj.id +'"><td>' + paths[country].name + '</td></tr>'; создает строковую переменную newRow и присваивает ей строку вида: '<tr id="0"><td>Iceland</td></tr>' На каждой итерации цикла в этой строке будет новый id и название страны. Дальше идет: table.append(newRow); table - это объект jQuery, который связан с tbody таблицы. Он был создан выше (var table = $('#country-table > tbody')). append - это метод jQuery объекта, который при передаче ему строки newRow создает новый DOM элемент и вставляет его в конец tbody таблицы. Таким образом на каждой итерации цикла формируется новая строка таблицы. А если реально хочешь научиться и понимать, что происходит, то вот учебник: http://learn.javascript.ru/ Там во второй части есть целые большой раздел посвещенный DOM. А дальше еще один большой раздел посвещенный событиям. Если реально хочешь научиться - то читай. Там есть практические задачи, в том числе и на таблицы, их сортировку, с описанием того как и что делать лучше. Нельзя в двух словах рассказать о том, о чем пишут целые книги. |
Часовой пояс GMT +3, время: 16:02. |