저는 해부학적인 사람을 만들었습니다. 사용자가 근육을 롤오버 할 수 있고 근육이 강조 표시되며 클릭하면 근육의 이름이 표시됩니다. 별도의 JQuery를 통해 클릭 한 근육 그룹에 따라 표시하고 숨기는 그룹 <dl>
이 있습니다. 이것은 IE9와 다른 최신 브라우저에서 잘 작동하지만 IE8에서는 문제가 있습니다. IE8은 생성 된 raphael.js 내에서만 코드를 사용하려고합니다. 그래서 나는 jquery를 lraphael로 옮길 필요가있다 ... 나는 이것을 확실하게하는 더 우아한 방법이 될 것이라고 확신한다. 그러나, 나는 이것을 어떻게 진행할지 확신하지 못한다. 근육의 팝업을 생성하는 click(function()
이raphael.js IE8 및 Jquery
var paths = {
neck: {
name: 'neck',
path: 'd="M412.294,73.035c0,0,7.661,28.869,9.406,31.78c1.746,2.911,4.657,2.911,9.896,2.911 s9.313-1.746,9.896-5.239c0.582-3.493,6.985-28.523,6.985-28.523s-2.963,2.599-6.232,5.984c-2.543,2.632-7.2,5.904-11.088,5.904 c-3.889,0-6.705-2.431-10.367-5.04C418.063,78.868,418.08,79.22,412.294,73.035z"',
},
pecks: {
name: 'Pecks',
path: 'd="M379.581,117.994c0,0,0.396-1.586,6.936-4.558c6.539-2.972,13.475-5.351,16.844-6.737 c3.369-1.387,4.559-1.784,4.559-1.784s13.674,2.973,15.061,3.17c1.387,0.198,4.36,1.982,8.72,1.982s9.511-1.387,11.097-2.18 s10.307-2.973,11.693-3.171s1.387-0.198,1.387-0.198s12.286,3.369,16.845,4.36c4.558,0.991,8.917,2.378,9.116,3.765 c0.197,1.387,1.584,4.954,1.584,6.341s-0.197,5.945-0.396,6.738c-0.198,0.792-3.171,15.457-4.757,21.997 c-1.585,6.54-1.188,8.918-7.331,11.494s-10.899,7.53-22.79,2.378s-13.277-5.549-17.241-5.152s-11.098,3.963-14.862,5.351 c-3.766,1.387-16.251,2.179-20.412-0.198c-4.162-2.378-10.9-9.314-12.881-16.844c-1.981-7.531-3.963-16.052-4.359-17.638 C377.995,125.525,377.798,121.165,379.581,117.994z"',
},
}
init.js로 코드에서
$(function(){
var r = Raphael('man', 500, 573),
attributes = {
fill: '#204ad3',
opacity: '0.0',
'stroke-linejoin': 'round'
},
arr = new Array();
var id = 0;
for (var muscles in paths) {
var obj = r.path(paths[muscles].path);
obj.attr(attributes);
obj.node.id = "muscle" + id;
id++
arr[obj.id] = muscles;
obj
.hover(function(){
this.animate({
fill: '#204ad3',
opacity: '0.3'
}, 300);
}, function(){
this.animate({
fill: attributes.fill,
opacity: attributes.opacity
}, 300);
})
.click(function(){
document.location.hash = arr[this.id];
var point = this.getBBox(0);
$('#man').next('.point').remove();
$('#man').after($('<div />').addClass('point'));
$('.point')
.html(paths[arr[this.id]].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
.css({
left: point.x+(point.width/2)-80,
top: point.y+(point.height/2)-20
})
.fadeIn();
});
$('.point').find('.close').live('click', function(){
var t = $(this),
parent = t.parent('.point');
parent.fadeOut(function(){
parent.remove();
});
return false;
});
}
});
init.js로
paths.js : 여기
내 코드입니다 그룹. 사용자가 클릭하는 경로에 따라 다른 jquery를 허용하는 코드를 어떻게 추가 할 수 있습니까? 예 :$("dl").hide().delay(100);$('.tag-pathnamehere').show();
여기서 'pathnamehere'부분은 클릭 한 경로에 따라 달라집니다.
나는이 줄 팝업의 경로 이름을 추가 생각 :
(paths[arr[this.id]].name)
어떻게 든 경로로 클래스의 'pathnamehere'부분을 클릭을 변경하고 싶습니다.
이 내용이 명확하고 도움이 되었기를 바랍니다.
이해가 안가 '$ ('. tag-pathnamehere')'로 선택된 요소는 무엇입니까? 이것은 경로 자체 또는 다른 html 요소를 참조합니까? 다음은 코드의 [jsfiddle] (http://jsfiddle.net/mihaifm/ZZp25/4/)입니다. – mihai
'$ ('tag-pathnamehere')'는 다른 요소를 나타냅니다. 클릭 된 경로에 따라 표시하거나 숨기고 싶은 .tag-neck 또는 .tag-chest의 클래스를 가진 여러 개의'dl'이있을 것입니다. 'pathnamehere'부분 만 변경하면 'tag-'부분을 그대로두고 경로 이름 속성을 사용할 수 있습니다. – whildkatz
왜 'classname'을 남용하는 대신 HTML5의'data-'사용자 정의 속성을 사용하지 않습니까? –