2012-08-16 2 views
0

dojox.mobile.View를 높이 100 %로 설정할 수 있습니까?dojox.mobile.View를 높이 100 %로 설정하는 방법

예 : http://jsfiddle.net/sLP4S/6/

dojox.mobile.ScrollableView 대신 작동 사용. 하지만 내 의도는보기에 터치 이벤트를 추가하는 것이므로보기를 스크롤 할 필요가 없습니다.

미리 감사드립니다.

+0

높이를 프로그래밍 방식으로 설정하려면 아무 문제가 없지만 CSS 솔루션을 선호합니다. http://jsfiddle.net/sLP4S/8/ – mbecker

답변

0

나는 웹 디자인에별로 재능이 없지만 100 % 높이가 항상 문제가되는 시간에 배웠다. 대신, 나는 문서 높이를 픽셀로 가져오고 머리글, 메뉴 등을 빼는 것이 좋습니다. 절대 높이를 픽셀 단위로 지정하십시오.

0

나는 이것이 오래되었다는 것을 알고있다. 그러나 이것이 내가 그랬던 방식이다. 내가 언급 한 것을 mbecker을 사용하고 일반보기 ::

define([ 
    "dojo/_base/declare", 
    "dojo/dom", 
    "dojo/dom-geometry", 
    "dojo/dom-style", 
    "dojo/window", 
    "dojox/mobile/View", 
], function(declare,dom,domGeometry, domStyle, win,View){ 

    // module: 
    //  custom/widget/View2 
    console.log("Loading View2"); 

    return declare("custom.widget.View2", [View], { 
     tabName:"outertabbar", 

     resize: function(){ 
     //this is for a fixed tabbar 
      //if you dont have one remove this and the tabbox 
      var tabBar = dom.byId(this.tabName); 
      var tabBox = domGeometry.getMarginBox(tabBar); 

       var winBox = win.getBox(); 
      var height=winBox.h - tabBox.h + "px"; 
      domStyle.set(this.domNode, "height",height); 
      // summary: 
      //  Calls resize() of each child widget. 
      this.inherited(arguments); // scrollable#resize() will be called 

     } 
    }); 
}); 
0

나는 ContentPaneResizeMixin와 함께 놀았을 확장 새로운 뷰를 생성하지만,이에 정착. 직선 복사 및 붙여 넣기를 기대하지 마십시오. 그러나이 패턴이 효과적입니다. 여기, 내 헤더의 dojoConfig에있는 서버에서 has 변수를 설정했습니다. phpMobileDetect를 통해 데스크톱을 감지합니다.

<script src="/dojo/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: false, async: 1, isDebug: 1, mblAlwaysHideAddressBar: false, has: { 'isDesktop': <?= json_encode($isDesktop) ?> }"></script> 

그런 다음 나는 다른 BaseClass로를로드하는 조건 플러그인 로더를 사용하고, 작은 크기의 논리는 헤더 돌봐. 팔. 데스크탑은 기본적으로 scrollBars를 가져오고, iPad는 잘 작동하는 ScrollablePane을 얻습니다.

define([ 
    "dojo/_base/declare", 
    "dojo/_base/lang", 
    "dojo/has", 
    "dojo/has!isDesktop?dojox/mobile/Pane:dojox/mobile/ScrollablePane" 
], function(declare, lang, has, Pane) { 

    return declare("tt.app.ScrollableAwarePane", [ Pane ], { 


     resize: function(){ 
      this.inherited(arguments); 
      if(has('isDesktop')){ 
       this.containerNode.style.overflowY = "scroll"; 
       var height = rightPane.offsetHeight - this.getPreviousSibling().domNode.offsetHeight; 
       this.containerNode.style.height = height + "px"; 
      } 
     } 



    }); 

});