2015-06-19 114 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语句中。这将工作!