[IT] jqgrid polling

2012. 8. 6. 19:12 IT


var timeoutHnd;


...

$(GRID_ID).jqGrid({

...

loadComplete: function(){

if(timeoutHnd){ // 기존 핸들은 clear

clearTimeout(timeoutHnd);

}

if( $(GRID_ID).jqGrid("getGridParam", "records")>0){ // 한건이라도 있으면.. 

timeoutHnd = setTimeout(function () { $(GRID_ID).trigger('reloadGrid'); },10000);

}

},

               ...


// has any issue?

저작자표시 비영리 변경금지
posted by smplnote

[IT] javascript > jQuery > jqgrid 에서 XMLGregorianCalendar 클래스 처리하기

2012. 4. 5. 07:48 IT

jqgrid의 이렇게 다양한 기능이 있다는걸 새롭게 알게됨.


formatter:'date',formatoptions: {newformat:'Y-m-d'} 을 추가


{name:'started',   index:'started',   sortable:false, align:'left', width:90, formatter:'date',formatoptions: {newformat:'Y-m-d'}},


referece) http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

저작자표시 비영리 변경금지
posted by smplnote

[도서] 쉽고 빠르게 익히는 CSS3 / 제이슨 크랜포드 티그

2011. 7. 15. 17:19 1300K
쉽고 빠르게 익히는 CSS3
국내도서>컴퓨터/인터넷
저자 : 제이슨 크랜포드 티그(Jason Cranford Teague) / 유윤선역
출판 : 위키북스 2011.04.15
상세보기



// if 전용 css 추가시. (특정버전 비교, 명시도 가능.. ) p.328 
<!--[if IE]>
  <link href="ie.css" rel="stylesheet">
<![endif]-->

css library / framework
blueprint : www.blueprintcss.org 

emastic : using em
code.google.com/p/emastic

typhgridphy
csswizardry.com/typogridphy

YUI grid : yahoo's css grid framework
developer.yahoo.com/yui/grids


css compression 
Minify CSS
Sww.minifycss.com/css-compressor 
* 동작방식이 달라질 수 있으므로 테스트 필요. 


모범개발방식
- 구조를 먼저잡고 표현을 나중에.
- 독타입 지정 
- 모든 스타일은 외부스타일로 관리
- 외부 스타일시트 수를 최소화
- 스타일 링크는 반드시 head안에 
- 개발은 FF, Chrome 등에서 테스트하고 IE에 맞게 수정한다. (웹표준 먼저)
- 배포전 CSS 최소화 
저작자표시 비영리 변경금지
posted by smplnote

[HTML] cross browsing을 위한 script

2011. 6. 23. 10:36 IT
1. XML Node 의text property
ex) <test>value<test>
ie : .text
etc : .textContent

2. selectbox 관련 
reInitializeSelectBox : 정확한 이유를 밝히진 못했지만 ie에서만 먹는듯 

3. selectNodes, selectSingleNode 메소드 ( ie only)
대체기능
selectNodes -> getElementsByTagName
selectSingleNode -> 미지원 기능으로 다음 함수로 대체
function selectSingleNode(xmlDoc, elementPath){   
if(document.implementation && document.implementation.createDocument){
var nodes = document.evaluate(elementPath, xmlDoc, null, XPathResult.ANY_TYPE, null);
var results=nodes.iterateNext();
     return results;
    }
}

4. select element의 method reInitializeSelectBox ( ie only )
제거..

5. window.createPopup() ( ie only)

6. style='cursor:hand' (ie only)
-> style='cursor:pointer'

7. form.elements[N].maxLength == null , form.elements[N].minLength == null (ie)
but other browser : form.elements[N].maxLength = -1

8. document.all  (IE only)
document.getElementById(XXX) (ALL)
ex) document.all.xxx -> document.getElementById('xxx');


9. elem.innerText ( IE only)
-> elem.textContent (other IE)
아래처럼 호환되는 함수를 이용 
function getText(elem){
return elem.textContent || elem.innerText;
}

10. elem.style.display='block';
-> elem.style.display='';

11. xml 을 client로 전송할때 <xml 앞에 공백이나 캐리지리턴값 등이 들어 있으면 정상적인 xml로 인식하지 못함( Firefox 등에서)
-> jsp인 경우 out.clear(); 를 호출하여 앞에 쌓인 공백, 빈라인피드 등을 제거한다음 출력처리... 
만약 OutputStream을 사용하는 경우에는 다음과 같이 작성 
out.clear();
out = pageContentx.pushBody(); 
out.flush();

http://www.w3schools.com/dom/dom_nodes_access.asp
reference : http://semin.tistory.com/entry/XML-Dom-Object-IE-Firefox-Supported  
저작자표시 비영리 변경금지
posted by smplnote

[html] menu frame 페이지 folding(resize) 처리

2011. 6. 16. 12:29 IT

Frame으로 구성되어 있는 기존 시스템에
메뉴를 숨기는 기능을 추가하기로 했다.

어떻게 할까? 

1. frame size 를 조절할 수 있어야 하고,
2. 숨기기 버튼이 지정된 위치에 고정되어 표시되어야 하고,
3. 숨기기/보이기 버튼이 상황에 따라 활성화 되어야 한다. 

solution)
1. frameset 의 attribute에는 cols, rows 가 있다.
이 값들을 자바스크립트에서 설정할 경우 변경이 가능하다.
[Frame page]
// for menu frame size restore
function res() {
 var fs = document.getElementById('fset2');
 if (fs) {
   fs.rows = '1*';
   fs.cols = '205,*,1';
 }
}
// for menu frame size minimize
function min() {
 var fs = document.getElementById('fset2');
 if (fs) {
     fs.cols = '5%,95%';
 }
}
frameset 은 다음과 같다.
[Frame page]
<frameset id='fset2' cols='205,*,1' rows='1*'>
2. 숨기기 버튼의 위치 고정
컨텐츠 영역과 버튼 영역을 구별하고
[Menu page]
<div class="left_lnb_wrap" id="target">
... menu contents here
</div>
<div class="fold_button_area">
<div id="foldButton" class="fold_button">
<button type="button" class="button" onclick="foldSideBar('up');" title="왼쪽영역 닫기"><img src="/images/btn_left_close.jpg" width="25" height="28" alt="왼쪽영역 닫기" /></button>
</div>
<div id="unFoldButton" class="unfold_button">
<button type="button" class="button" onclick="foldSideBar('down');" title="왼쪽영역 열기"><img src="/images/btn_left_open.jpg" width="25" height="28" alt="왼쪽영역 열기" /></button>
</div>
</div>
스타일을 적용한다.  
[Menu page] 
/* 레이아웃 - 영역 열기버튼, 닫기버튼 */
#container #content_wrap.width_full {margin-left:0; margin-right:0;}
.fold_button {position:absolute; top:150px; left:150px;}
.unfold_button {display:none; position:absolute; top:150px; left:0;}
.fold_button_up {position:absolute; top:90px; right:0;}
.unfold_button_down {display:none; position:absolute; top:0; right:0;}
.fold_button_right {position:absolute; top:150px; right:150px;}
.unfold_button_right {display:none; position:absolute; top:150px; right:0;}
.fold_button_right2 {position:absolute; top:150px; right:139px;}
.unfold_button_right2 {display:none; position:absolute; top:150px; right:0;}
3. 버튼 액션 구현
선택값에 따라 메뉴 컨텐츠를 숨기거나 보이고, 버튼 이미지를 교체할 수 있게 구현한다.
물론 frameset 이 있는 페이지에서 정의한 메소드를 호출하는 것을 잊으면 안된다.
frameset page 가 최상단일 경우, window.parent 대신 window.top 을 사용할 수 있다. 
[Menu page]
function foldSideBar(togle){
var targetArea = document.getElementById("target");
if(togle == "up"){
targetArea.style.display = "none";
document.getElementById("foldButton").style.display = "none";
document.getElementById("unFoldButton").style.display = "block";
window.parent.min();
}else{
targetArea.style.display = "block";
document.getElementById("foldButton").style.display = "block";
document.getElementById("unFoldButton").style.display = "none";
window.parent.res();
}
} 

뭐 요즘을 조금 둘러보면 나오는 기술이지만, 적용가이드 쓰는 겸해서 정리해본다. 
 
reference : http://www.cross-browser.com/toys/frame_resize.html
저작자표시 비영리 변경금지
posted by smplnote

티스토리툴바