2015-06-19 109 views
2

我的問題是,我已經加載到js中的應用程序框架通過我創建的稱爲createFrame()的功能。全屏功能無法正常工作,因爲它完全滿屏,但如果我將應用程序框架移動到桌面上,即使將其移回原始位置,它也無法正常工作。該代碼更改應用程序框架的大小,並臨時刪除頂部的任務欄和用戶/時間信息窗格。它似乎也不希望允許用戶觸摸最小化/退出/全屏按鈕所在的框。它只是隱藏所有內容並留下空白屏幕。該代碼的工作原理如下:var app;創建新的應用程序框架(退出/全屏/最小化按鈕+內容)。寬度和高度由函數第一行中的w和h定義,通過調用createFrame(500,300)在我的js文件中調用front-end.js; 。儘管參數尚未使用,但content_src應該能夠自行解釋退出。全屏按鈕應該能夠如上所述工作,但由於某種原因,如果我在屏幕上拖動它,int將無法正常工作。現在沒關係,因爲我還沒有制定出將代碼重新定位到屏幕上0,0的代碼。但是如果我將它重新定位到0,0自己在桌面上,它不會在屏幕的0,0處結束。我認爲這與我之間的關係讓我感到不安,即應用程序在我移動之前不能處於可拖動狀態。有任何想法嗎?我的js/jQuery代碼的應用程序框架的問題

var isFullScreen; 

function createFrame(w,h,content_src) { 
    var app = $('<div class = "application-frame ui-resizable-se" style="width:'+w+'px; height:'+h+'px;">\ 
        <div class = "buttons-box">\ 
         <div class = "exit-button">\ 
         </div>\ 
         <div class = "fullscreen-button">\ 
         </div>\ 
         <div class = "minimise-button">\ 
         </div>\ 
        </div>\ 
        <div class = "content">\ 
        </div>\ 
       </div>'); 
    var apps = []; 
    $(".desktop-box").append(app); 
    apps.push(app); 
    $(app).draggable({containment:"parent"}).resizable({containment:"parent",maxHeight: 678,maxWidth: 1361}); 

    $(".exit-button").click(function() { 
     for(var i = 0; i <apps.length;i++) { 
      apps[i].pop($(app).fadeOut('very slow')); 
      for(var f = 0; f < fullscreenArray.length;f++) { 
       if(fullscreenArray[f]) { 
        $(".infoPane").show(); 
        $(".info-dropdown").show(); 
        $(".taskbar").show(); 
        fullscreenArray[f] = false; 
       } 
      } 
     } 
    }); 

    var fullscreenArray = []; 
    fullscreenArray.push(isFullScreen); 

    $(".minimisse-button").click(function() { 
     for(var i = 0; i <apps.length;i++) { 
      for(var f = 0; f < fullscreenArray.length;f++) { 
       if(fullscreenArray[f]) { 
        $(".infoPane").show(); 
        $(".info-dropdown").show(); 
        $(".taskbar").show(); 
        fullscreenArray[f] = false; 
        apps[i].pop($(app).slideToggle('very slow')); 
       } 
      } 
     } 
    }); 
    var fullScreenWidth = $(".desktop-box").width(); 
    var fullScreenHeight = $("body").height()+5; 

    $(".fullscreen-button").click(function() { 
     for(var f = 0; f < fullscreenArray.length;f++) { 
      if(!fullscreenArray[f]) { 
       $(app).css({width:fullScreenWidth}); 
       $(app).css({height:fullScreenHeight}); 
       fullscreenArray[f] = true; 
       $(".infoPane").hide(); 
       $(".info-dropdown").hide(); 
       $(".taskbar").hide(); 
      }else if(fullscreenArray[f]) { 
       $(app).css({width:w}); 
       $(app).css({height:h}); 
       fullscreenArray[f] = false; 
       $(".application-frame").draggable(); 
       $(".infoPane").show(); 
       $(".info-dropdown").show(); 
       $(".taskbar").show(); 
      } 
     } 
    }); 
} 

回答

0

我只是找到了一個解決問題的辦法,如果任何人試圖嘗試類似的東西。所有添加是$(app).offset({top:0,left:0);在使isFullScreen爲true的if語句中。這將工作!