Portföyü taklit eden Windows

Question

Şu anda projelerimi görüntülemek ve tanıdık bir kullanıcı etkileşimine sahip olmak için windows iş akışını taklit etmeyi planladığım bir portföy yapıyorum. Şimdi karşı karşıya olduğum sorun, birden çok explorer penceresi oluşturmaktır. O anda birden çok tane oluşturabilirim, ancak her pencerede belirtilen içeriğe çalıştığımda, bunlar doğru içeriğin atanmış olduğunu varsaymaz. Bu projede düzenli JS ve jQuery kullanıyorum.

Aşağıdaki kod ile Explorer pencerelerini elde ediyorum:

$(window).ready(function(){ 

var desktop = document.querySelector('.workarea'); 

$('.general_icon').click(function(e){ 
    console.log(e); 

    var explorerWindow = document.createElement('div'); 
    explorerWindow.className += 'explorer_window ui-widget-content '; 

     var topToolBar = document.createElement('div'); 
     topToolBar.className += 'top_toolbar'; 

      var windowTitle = document.createElement('div'); 
      windowTitle.className += 'window_title'; 
      windowTitle.innerHTML = e.currentTarget.innerText; 

      var windowOperations = document.createElement('div') 
      windowOperations.className += 'window_operations'; 

       var minimize = document.createElement('div') 
       minimize.className += 'minimize'; 
       minimize.innerHTML += '_'; 

       var maximize = document.createElement('div') 
       maximize.className += 'maximize'; 
       maximize.innerHTML += '□'; 

       var close = document.createElement('div') 
       close.className += 'close'; 
       close.innerHTML += '×'; 

      var topToolBar2 = document.createElement('div'); 
      topToolBar2.className += 'top_toolbar_2'; 

       var secondToolbBarOpt1 = document.createElement('span') 
       secondToolbBarOpt1.className += 'noselect'; 
       secondToolbBarOpt1.innerHTML = 'File'; 

       var secondToolbBarOpt2 = document.createElement('span') 
       secondToolbBarOpt2.className += 'noselect'; 
       secondToolbBarOpt2.innerHTML = 'Base'; 

       var secondToolbBarOpt3 = document.createElement('span') 
       secondToolbBarOpt3.className += 'noselect'; 
       secondToolbBarOpt3.innerHTML = 'Share'; 

       var secondToolbBarOpt4 = document.createElement('span') 
       secondToolbBarOpt4.className += 'noselect'; 
       secondToolbBarOpt4.innerHTML = 'View'; 

      var contentHolder = document.createElement('div'); 
      contentHolder.className += 'content_holder'; 

       //determines current clicked icon 
       //var ter = e.currentTarget.attributes[1].value; 

     desktop.appendChild(explorerWindow); 
      explorerWindow.appendChild(topToolBar); 
       topToolBar.appendChild(windowTitle); 
       topToolBar.appendChild(windowOperations); 
        windowOperations.appendChild(minimize); 
        windowOperations.appendChild(maximize); 
        windowOperations.appendChild(close); 
      explorerWindow.appendChild(topToolBar2); 
       topToolBar2.appendChild(secondToolbBarOpt1); 
       topToolBar2.appendChild(secondToolbBarOpt2); 
       topToolBar2.appendChild(secondToolbBarOpt3); 
       topToolBar2.appendChild(secondToolbBarOpt4); 
      explorerWindow.appendChild(contentHolder); 

     var ter = e.currentTarget.attributes[1].value; 
     console.log(ter) 
     console.log(projectsData[ter].paths.length) 

     for (var i = 0; i < projectsData[ter].paths.length; i++) { 
      var actCont = document.createElement('div'); 
      actCont.className += 'act_cont'; 
      contentHolder.appendChild(actCont); 
     } 

     var innerActCont = document.getElementsByClassName('act_cont'); 
     for (var k = 0; k < projectsData[ter].paths.length; k++) { 
      innerActCont[k].style.backgroundImage = 'url(' + projectsData[ter].paths[k] + ')'; 
      event.stopPropagation(); 
     } 

    //make windows draggable 
    //sets the target for the drag event 
    $(".explorer_window").draggable({ handle: ".top_toolbar", containment: '.place' }); 

}); 

}); 

i döngüde kullanmak projectsData geçerli:

var projectsData = [ 
    { 
     title:'Random Lines of Color', 
     icon: 'images/random_bars_colors.png', 
     paths : [ 
      'images/port/tipos/1.png', 
      'images/port/tipos/2.png', 
      'images/port/tipos/3.png' 
     ] 
    }, 
    { 
     title:'Numbers to Letters Converter', 
     icon: 'images/nums_to_letters.png', 
     paths : [ 
      'images/port/tipos/1.png', 
      'images/port/tipos/2.png', 
      'images/port/tipos/3.png' 
     ] 
    }, 
    { 
     title: 'Tipos', 
     icon: 'images/port/tipos/tipo.png', 
     paths : [ 
      'images/port/tipos/1.png', 
      'images/port/tipos/2.png', 
      'images/port/tipos/3.png' 
     ] 
    }, 
    { 
     title: 'Cópia Maplethorpe', 
     icon: 'images/port/thorpe/thorpe.png', 
     paths : [ 
      'images/port/thorpe/1.jpg', 
      'images/port/thorpe/2.png', 
     ] 
    }, 
    { 
     title: 'Packaging Cubo', 
     icon: 'images/port/moo/moo.png', 
     paths : [ 
      'images/port/moo/1.png', 
      'images/port/moo/2.png', 
      'images/port/moo/3.png' 
     ] 
    }, 
    { 
     title: 'Gama Especial', 
     icon: 'images/port/magn/magnum.png', 
     paths : [ 
      'images/port/magn/1.png', 
      'images/port/magn/2.png', 
      'images/port/magn/3.png', 
      'images/port/magn/4.png', 
      'images/port/magn/5.png', 
      'images/port/magn/6.png' 
     ] 
    }, 
    { 
     title: 'Hearts And Bones', 
     icon: 'images/port/hb/hb.png', 
     paths : [ 
      'images/port/hb/1.png', 
      'images/port/hb/2.png', 
      'images/port/hb/3.png', 
      'images/port/hb/4.png', 
      'images/port/hb/5.png' 
     ] 
    }, 
    { 
     title: 'Alzheimer', 
     icon: 'images/port/alz/alz.png', 
     paths : [ 
      'images/port/alz/1.jpg' 
     ] 
    } 
] 

web sitesinin güncel sürümü http://mingus.pt

canlı olduğunu

Masaüstü pencereleri tek tıklattığınızda Explorer pencereleri açılır. Ben de söz konusu explorer pencerelerde kaydırma bir araç çubuğu sabit konum ile kalmasını yapamam, bir küçük bir şey ama aynı zamanda bakmak için biraz boş zamanınız varsa ben de çok çok appretiated.

Yardım edebileceğimiz herhangi bir yardım için şimdiden teşekkür ederiz!

Answer 1

sorun Kodunuzdaki

var innerActCont = document.getElementsByClassName('act_cont'); 
for (var k = 0; k < projectsData[ter].paths.length; k++) { 
    innerActCont[k].style.backgroundImage = 'url(' + projectsData[ter].paths[k] + ')'; 
} 

var innerActCont = document.getElementsByClassName('act_cont'); tüm belgedeki act_cont unsurları bulur Özellikle hat aşağıdaki kısmı ile, bu yüzden zaten açık pencerelerin elemanlarını verir ve böylece üzerine yazıyorsunuz açık pencerelerde olanlar.

Döngüyü yalnızca yeni pencerede .act_cont öğelerine sınırlamanız gerekir. Yani jquery kullanmak Dahası size kod kompakt/biraz kolaylaştırabilirsiniz

---

(yerine document değişken contentHolder kullanmak )

var innerActCont = contentHolder.getElementsByClassName('act_cont'); 

kodunu değiştirin.