विंडोज़ नकल पोर्टफोलियो

Question

मैं वर्तमान में एक पोर्टफोलियो का निर्माण कर रहा हूं जिसमें मैं अपनी परियोजनाओं को प्रदर्शित करने और परिचित उपयोगकर्ता बातचीत करने के लिए विंडोज वर्कफ़्लो की नकल करने का इरादा रखता हूं। अब जिस समस्या का सामना कर रहा हूं वह कई एक्सप्लोरर विंडो बनाने के साथ है। मैं उस समय कई लोगों को बना सकता हूं, लेकिन जब मैं प्रत्येक विंडो में निर्दिष्ट सामग्री को आज़माता हूं, तो ये सही सामग्री को असाइन नहीं करते हैं। मैं इस परियोजना में नियमित जेएस और jQuery का उपयोग कर रहा हूं।

मैं निम्नलिखित कोड के साथ Explorer विंडो पैदा कर रहा हूँ:

$(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' }); 

}); 

}); 

projectsData मैं पाश में उपयोग करते हैं:

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' 
     ] 
    } 
] 

वेबसाइट के वर्तमान संस्करण http://mingus.pt

पर लाइव है

जब आप एकल डेस्कटॉप आइकन पर क्लिक करते हैं तो एक्सप्लोरर विंडो खुलती हैं। एक मुद्दा भी है जब मैं एक्सप्लोरर विंडोज़ पर स्क्रॉल करता हूं, मैं इसे टूलबार को निश्चित स्थिति के साथ नहीं बना सकता, यह मामूली बात है लेकिन अगर आपके पास देखने के लिए कुछ अतिरिक्त समय है तो मैं भी बहुत ज्यादा उत्साहित हूं।

आप जो भी मदद दे सकते हैं उसके लिए अग्रिम धन्यवाद!

Answer 1

समस्या

अपने कोड

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'); पूरे दस्तावेज में act_cont तत्वों पाता लाइन के निम्न भाग के साथ है, तो यह पहले से ही खुला खिड़कियों के तत्वों देता है, और इस तरह आप अधिलेखित कर रहे हैं खुली खिड़कियों में से एक।

आपको केवल नई विंडो में .act_cont तत्वों को लूप को सीमित करने की आवश्यकता है। तो

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

लिए कोड बदलने

---

(document के बजाय चर contentHolder का उपयोग करें) इसके अलावा आप काफ़ी जब से तुम jQuery का उपयोग को आसान बना सकता/कॉम्पैक्ट अपने कोड।