Listeler arasında oku çiz

Question

Vurgulanan liste öğeleri arasında dinamik olarak bir ok çizmenin bir yolu var mı?

ben bunu yapmak istiyorum "Madde 2" üzerinde süpürdü Yani eğer (ama düz bir ok):

:

Item 1   Highlight 3 
Item 2-----\  Highlight 1 
Item 3  ----->Highlight 2 

Bu Birkaç dakika önce geldik cevabını kodudur Highlight item in two lists when mouseover

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    $("#qq" + n + ", #aa" + n).toggleClass("highlight"); 
}); 

jsfiddle: http://jsfiddle.net/e37Yg/1/

<ul class="list1"> 
    <li id="qq1">sdfsdv</li> 
    <li id="qq2">bnvnvb</li> 
    <li id="qq3">nmnutymnj7</li> 
    <li id="qq4">cvbc</li> 
    <li id="qq5">45tsgd</li> 
</ul> 

<ul class="list2"> 
    <li id="aa3">fgtbrtgb</li> 
    <li id="aa1">vbn xgbn</li> 
    <li id="aa5">vdgver</li> 
    <li id="aa4">asdasdv</li> 
    <li id="aa2">nvfbnfn</li> 
</ul> 

Answer 1

2B çizimi burada kullanmak zorunda değilsiniz. Şuna bir bakın: http://jsfiddle.net/vjYuW/ Sadece yukarıda kaydettiğiniz kemanı tıkayarak güncelledim.

HTML:

...left list... 
<div id="segment1" class="hline"></div> 
<div id="segment2" class="vline"></div> 
<div id="segment3" class="hline"></div> 
...right list... 

CSS:

... formatting for ULs here, both have to be float:left... 

.highlight { background-color: red; } 

.hline {  
    display:block; 
    position:relative; 
    float:left; 
    height: 1px; 
    width: 7em; 
} 

.vline { 
    display:block; 
    position:relative; 
    float:left; 
    height: 1px; 
    width: 1px;  
} 

İşte

esansiyel kod, bu çizgiler çizmek için geniş veya uzun 3 DIV'leri 1 piksel kolları olan JavaScript:

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    var leftY = $('#qq' + n).position().top; 
    var rightY = $('#aa' + n).position().top; 
    var H = Math.abs(rightY-leftY); 
    if (H == 0) H = 1; 
    $('#segment1').css('top',leftY+'px'); 
    $('#segment3').css('top',rightY+'px'); 
    $('#segment2').css('top',Math.min(leftY,rightY)+'px'); 
    $('#segment2').css('height',H+'px'); 
    $("#qq" + n + ", #aa" + n + ",#segment1,#segment2,#segment3").toggleClass("highlight"); 
}); 

Not: muhtemelen tüm tarayıcıları desteklemek için bunu biraz çimdik olacak - Ben IE6 & Co

Answer 2

Böyle bir şey için, Vector Draw Library gibi bir üçüncü taraf çizim kitaplığı kullanmak isteyebilirsiniz.

Kitaplığı bağlantıdan indirebilir ve uygulamanıza ekleyebilirsiniz. Ardından:

sayfanızda bunu dahil edilsin: vurgulu fonksiyonunda hattını kaldırmak için kod yazmak zorunda kalacak

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    $("#qq" + n + ", #aa" + n).toggleClass("highlight"); 

    //canvas is your drawing div 
    var jg = new jsGraphics("canvas"); 
    jg.drawLine($("#qq" + n).offset().left + 30, $("#qq" + n).offset().top , $("#aa" + n).offset().left, $("#aa" + n).offset().top); 
    jg.paint(); 

Not:

<script type="text/javascript" src="wz_jsgraphics.js"></script> 

Sonra vurgulu işlevine eklemek aksi halde çizildikten sonra kalır. Ayrıca, listedeki öğelerin konumunu hesaplamak için offset() kullanıyorum. Bu işe yarayacak ama doğru bakmak için biraz çimdik gerekebilir.

Yukarıdaki kod çalışır ancak tamamlanmadı. Belki de vurgunun ikinci işlevi tuvalde clear()'u arayabilir. Buradaki tuval, iki listeyi kapatan kapalı div.

Answer 3

Bunu başarmak için HTML5 canvas öğesini kullanabilirsiniz.

Bunu yapmanın en iyi yolu olup olmadığından emin değilim, ancak etrafta dolaşıp this aldım.

Yaptığım ilk önce listeleri bir div içinde ekledim. div, göreceli bir konuma sahip olmak için CSS ile tasarlanmıştır. Bu, jQuery ile konumu aldığınızda, buna göre bir konum verecektir. Ardından, listelerin önüne bir tuval koyup üzerine devre dışı bırakılmış işaretçi olayları ekledim. Ayrıca, tuvalin yüksekliğini listelerin yüksekliğine ayarlamak için bir şey ekledim. Sonra vurgulu için başka bir işleyici ekledim. Üzerine geldiğinizde, oku çizecek ve siz fareyle gezdiğinizde tuvali temizleyecektir.

Ok çizmek oldukça basittir. Öncelikle eşyaların pozisyonlarını alır. Sonra bir çizgi çizer ve oku yönlendirmek için biraz matematik kullanır. Pozisyonları almak oldukça kolaydır. Doğru liste için position yöntemini kullanabilirsiniz. Soldaki liste için geçici bir span oluşturdum ve onu liste öğesine ekledim, sonra bunun yerini aldım.

Answer 4

<script src='www.walterzorn.de/en/scripts/wz_jsgraphics.js'> </script> 

function drawLine(element1, element2) { 
    var jg = new jsGraphics("renderGraph"); 
    var ele1 = document.getElementById(element1); 
    var ele2 = document.getElementById(element2); 
    jg.setColor("#DDD"); 
    jg.setStroke(5); 
    jg.drawLine(ele1.offsetLeft + ele1.offsetWidth/2 , ele1.offsetTop + ele1.offsetHeight/2, ele2.offsetLeft + ele2.offsetWidth/2, ele2.offsetTop + ele2.offsetHeight/2); 
    jg.paint(); 
}