Head First jQuery 요약

Transcription

1 JavaScript 의발전과 jquery 예제 - jquery UI 기능확장, jqgrid 서버연동예제 - 1. 웹개발과 JavaScript 2. jquery 와 jqueryui 3. jquery UI Tab 기능확장 4. jqgrid - Spring jsonview 연동 5. 기타 이완근

2 1. 웹개발과 Javascript 1 / 94

3 1.1 웹표준 1. 웹개발과 Javascript 웹페이지개발은 W3C 에서규정한웹표준을따라웹문서의구조와표현그리고동작을구분해서사용해야한다.( 관심사의분리 ) 어떻게보이는가? 어떤동작을하는가? CSS 표현 Javascript 동작 Web App ( 현재, Web 이 C/S 기반시스템처럼 Application 성격으로발전한것 ) Web ( 과거, 정보의공유 ) HTML, XHtml 구조 기본적인웹표준문서의상호관계 동작이나표현이없더라도사용할수있어야한다. (HTML 은필수, CSS 와 Javascript 는옵션 ) 표현은.css 파일로, 동작은.js 파일로분리한다. 마우스가없어도, 키보드만으로도사용되어져야한다. 무슨의미인가? 2 / 94 웹표준이란? 사용자가어떠한브라우저를이용하더라도같은결과를볼수있도록 W3C 에서권고한표준안을이용하여웹페이지를만드는것

4 1.2 Javascript 개요 1. 웹개발과 Javascript 웹브라우저에서동작하는객체기반의스크립트프로그래밍언어 [1] 다 ( 인터프리터어, 컴파일 (compile) 을하지않고, 작성해서바로실행시킬수있는언어 ) 역사 Brendan Eich, 넷스케이프사 ( 現 Firefox) Mocha > LiveScript > JavaScript 넷스케이프 2.0B 3 채택 ( 넷스케이프네비게이터브라우저에자바기술지원을포함하면서이름변경. 썬마이크로시스템사가공동개발 ) 특징 Compile을하지않고소스를읽어서바로실행하는인터프리터언어 ( 코드재배치나최적화불가, 브라우저에서소스노출 ) C 언어의기본구문을바탕으로만들어자바와구문 (Syntax) 이유사함 ( 자바언어와직접적인관련없음 ) 스펙 최신버전 ( 기준 ), Firefox 3 지원 자바스크립트는브라우저마다지원되는버전이다름 ( 현재범용적표준 ECMA-262[2] 3 판에대응하는자바스크립트버전은 1.5) ECMA 스크립트 : 자바스크립트의표준화된버전 3 / 94

5 1.3 Javascript 의기술발전 1. 웹개발과 Javascript HTML5 와함께 Multi Device 지원의해결책으로 Javascript 는급속한발전을하고있다. 최근브라우저업체들이고성능의 Javascript 엔진을선보이고있다 크롬에탑재된 V8 엔진의 JIT(Just-In-Time) - runtime 직전직접적인기계어컴파일 ( 인터프리터 X) - Inline caching 같은최적화기법적용 V8(Crome) 니트로 (Safari) 트레이스몽키 (Firefox) Google V8 JavaScript Engine 개발자프로그래밍언어운영체제플랫폼종류라이선스웹사이트 구글 C++, 자바스크립트 마이크로소프트윈도, 맥 OS X, 리눅스, FreeBSD, 안드로이드, 웹 OS x86, x64, ARM 자바스크립트엔진 BSD 라이센스 과거 JavaScript 는 PC 의성능, 컴파일 Engine 의성능이느렸고, Device 제어가불가능한한계를지녔음. 4 / 94

6 1.4 JavaScript 의확산 1. 웹개발과 Javascript 모바일크롬웹스토어에 오픈후 2 만여 Web App 이등록, 빠르게성장하고있다 Native 언어와유사한결과물 5 / 94

7 1.5 jquery Mobile vs Sencha Touch 1. 웹개발과 Javascript Mobile WebApp 을만들때, 사용하는대표적인 Javascript 프레임워크 구분 jquery Mobile Sencha Touch 정의 jquery 진영에서개발한모바일웹앱프레임워크 ExtJs 진영에서개발한모바일웹앱프레임워크 개발방식 마크업기반의개발스타일 (HTML 개발과비슷 ) JavaScript 개발스타일 -> 방대하고체계적인 API 체계를갖추고있음 (ExtJs 라이브러리중심 ), 객체지향적기법이 API 에녹아있음 개발난이도낮음높음 기능의다양함 보통 (jqgrid 기능부족 ( 불합리한구조 ), jqchart( 유료 )) 높음 테마특징 CSS, 테마롤러도구지원 SaaS 기반 -> 테마를변경하거나관리에이점 기반스크립트 jquery ( 확장어려움 ) ExtJs ( 확장자유로움 ) 지원플랫폼 장점 단점 ios, 안드로이드, 블랙베리, 팜, 심비안, 바다, 윈도우모바일 ( 가장안정적이고많은기기지원 ) 친숙, Js 몰라도사용가능, 기존사이트를쉽게모바일로변경가능, 가벼움. 드림위버에서지원. 버그다수 Sencha Touch 에비해터치이벤트부분이약함 ios, 안드로이드, 블랙베리 6.0 이상 터치이벤트에특화, 거의모든 UI 내장. 디자이너제공.(WYSWYG 개발가능 ) 새로운문법을익혀야함무거움 -> 로딩, 실행느림 ( 웹사이트전체를하나로관리함 ) 안드로이드 1.0 에서 HTML5+CSS 가속안됨 6 / 94

8 2. jquery 와 jqueryui 7 / 94

9 2.1 jquery 역사와특징 2. jquery 와 jqueryui jquery 는 2006 년 John Resig 이개발한단순화된클라이언트사이드스크립트언어이다 브라우저이벤트처리, 애니메이션등을손쉽게구현할수있어서최근크로스플랫폼, HTML5, 크로스브라우저등의이슈로관심이급증 개발자 개발년도 라이선스 설계 Concept 표준적용 특징 CSS 셀렉터 플러그인아키텍처 메서드체인 크로스브라우저 John Resig 년 자유오픈소프트웨어 (MIT, GNU) 소스가독성향상쉬운객체모델찾기쉬운애니메이션개발쉬운이벤트제어쉬운 Ajax 개발 Microsoft ASP.NET Ajax/MVC 노키아런타임웹위젯개발플랫폼적용미디어위키 1.16 이후사용 - 출처 : 위키피디아 - 설명 html 내의엘리먼트들을손쉽게표현및사용이가능 이미개발된많은플러그인을쉽고빠르게사용 여러개의기능을한줄에나열하여불필요한코드반복을줄임 브라우져별발생이벤트를각각지정해줄필요가없다. 배포일자 버전 부가정보 2011년 6월 30일 년 5월 12일 년 5월 3일 1.6 attr() 와 val() 함수의큰성능향상 2011년 3월 31일 년 2월 24일 년 1월 31일 년 11월 11일 년 10월 16일 년 2월 19일 성능향상에초점을둔버전업 2010년 1월 25일 첫번째버그픽스 2010년 1월 14일 1.4 메이저업데이트입니다. 2009년 2월 20일 년 1월 21일 년 1월 14일 1.3 Sizzle Selector엔진을핵심부에도입 2008년 5월 24일 년 5월 21일 오류빌드수정 2008년 5월 19일 년 2월 8일 년 1월 15일 년 9월 16일 년 9월 10일 년 8월 24일 년 7월 5일 년 7월 1일 년 5월 20일 1.1.3a Alpha 배포 2007년 2월 27일 년 1월 22일 년 1월 14일 년 1월 8일 1.1a Alpha 배포 2006년 12월 12일 Last 1.0 bug fix 2006년 10월 27일 년 10월 9일 년 8월 31일 년 8월 26일 1.0 첫번째안정화배포 2006년 6월 30일 1.0a Alpha 배포 8 / 94

10 2.2 jquery 개요 2. jquery 와 jqueryui JavaScript 로구현이어려운기능들을손쉽게개발할수있도록, 단몇줄의코딩만으로해결할수있게해주는 JavaScript 라이브러리모음이다 < 장점 > 브라우저호환성보장 액션에특화 뛰어난가독성과간결성 ( 주로웹표준과연동 ) HTML5 표준준수 < 제공기능 > 공통의 DOM 이벤트 특수효과 Ajax 함수 9 / 94 Javascript Library 오프소스단체 jquery Foundation(

11 2.3 jquery 표현방식 2. jquery 와 jqueryui jquery 는 JavaScirpt 에비해훨씬간략한표현을사용한다 원래 JavaScript 방식 jquery 방식 for (i = 0; i <= 4; i++) { document.getelementsbytagname( p )[i].innerhtml = Change the page. ; } 문서에게얘기하고있다. (DOM 의 D 말이에요 ) 태그이름이 P 인요소를전부선택 태그이름이 p 인요소중 i 번째요소를선택 그요소의 HTML 을 괄호안의내용으로수정 $( p ).html( Change the page. ); 문단요소를선택 jquery 는 선택자엔진 이란걸사용하기때문 에 CSS 에서사용하던선택자를사용할수있다. 그요소의 HTML 을괄호안에있는내용으로수정 jquery( ) jquery 단축표기 : 괄호안에넣은요소를선택하는역할 jquery 변수선언일반적인자바스크립트는 var my 이런식으로변수를선언한다면, jquery 는 $my 이런표현으로선언할수있다. var my = 안녕하세요 ; $my = 안녕하세요 ; $( ) : jquery 단축표기 ($ 지시자 ) 10 / 94

12 2.4 jquery Download 2. jquery 와 jqueryui 사이트에서 Download 받을수있다 jquery 실행파일은 Compressed/Uncompressed 버전을 Download 받을수있다. 운영환경배포용에는 Compressed 버전을사용하고, 개발에는 Uncompressed 버전을사용한다. 미너파이 (minify) 버젼 주석없음 띄어쓰기없음 줄바꿈없음 변수는약어사용 if(count == 0){ alert( 방문자없음 ); } else if(count == 1){ alert( 최초방문자 ); } else if(count > 1){ alert( 환영합니다. ); } 주석및불필요한공백과줄바꿈을모두제거 파일크기최소화 if(a==0){alert( 방문자없음 );}else if(a==1){alert( 최초방문자 );}else if(a>1){alert( 환영합니다. );} 11 / 94

13 2.5 jquery 작동스타일 2. jquery 와 jqueryui $ 함수 : jquery 오브젝트의팩토리메소드. - 이함수들은 "chainable" 하다. (Method Chain : 메소드를여러개이어서소스를간소화한다.) - 각각은 jquery 오브젝트를반환한다. - $ 함수로시작된다. - CSS 셀렉터스트링을가지고호출된다. $("div.test").add("p.quote").addclass("blue").slidedown("slow"); Chainning : 1. div 태그가달린모든엘리먼트를찾되, 클래스애트리뷰트가 test 인것을찾는다. 2. p 태그를찾되, 클래스애트리뷰트가 quote 인것을찾는다. 3. 찾아낸각각의엘리먼트에대해클래스애트리뷰트 blue 를추가한다. 4. 그뒤애니메이션효과를주어아래쪽으로슬라이드 ( 미끄러지게 ) 시킨다. $. - 가앞에붙은함수 - jquery 오브젝트그자체와연동되지는않는다.( 유틸리티메소드 ) $.each([1,2,3], function() { document.write(this + 1); }); // 234 를도큐먼트에출력한다 12 / 94 $.ajax({ type: "POST", url: "some.php", data: "name=john&location=boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); // 파라미터 name=john, location=boston을주면서 some.php에요청을보낸다. 성공하면그응답이 alert() 된다.

14 2.6 jquery 문장해석 2. jquery 와 jqueryui jquery 는선택자 (Selector) 와함수의 Chainnig 관계로이루어져있다 $(document). ready (function() { 선택자에의해서선택된 DOM Element 가 준비가되면 다음에오는괄호안의코드를즉시실행해라. $( #clickme ). click (function() { 점 (.) 은선택자와메서드를구분한다. ID 가 clickme 인버튼에 click 이벤트를연결하여버튼을클릭할수있게한다. 코드블록 중괄호안에있는내용을 코드블록 ' 이라고한다. 버튼을눌렀을때일어나는일은중괄호 ({}) 안에쓴다. }); 세미콜론 (;) 은 jquery 문장을끝맺는종결자 (click 문장을닫는다.) }); ready 함수를닫는다. 13 / 94

15 2.7 jquery UI 2. jquery 와 jqueryui JavaScript 와 CSS 를이용하여 UI 를손쉽게구현할수있도록제작된라이브러리 14 / 94

16 2.8 jquery UI 제공플러그인 2. jquery 와 jqueryui jquery UI 라이브러리는 jquery 코어를보완하는세가지플러그인을제공한다 애니메이션 jquery UI 는 jquery 에여러가지애니메이션을추가합니다. 요소들이통통튀고, 폭발하고, 맥동하고, 진동하는효과를낼수있습니다. jquery UI 는복잡한수학계산을통해애니메이션을더욱사실적으로보이게하는이징함수도제공합니다. 상호작용 상호작용을통해웹애플리케이션에복잡한행동방식을추가할수있습니다. 예를들면요소를드래그앤드롭하거나요소의내용을정렬하는등의플러그인이이범주에들어갑니다. 위젯 위젯이란웹앱에기능을추가하는인터페이스구성요소입니다. 사용하기쉬운반응형인터페이스를만드는것은무척복잡하고시간도아주많이필요한데위젯을사용하면이런작업에필요한시간을대폭줄일수있다. jquery 와마찬가지로사용할함수와 Argument( 인자, Parameter) 값만알고있다면, 복잡한코딩없 이각종이펙트와위젯, 피커등을만들수있다. 물론조금더복잡한기능을원한다면자바스크립트와혼용을해야한다. 사이트에서 jquery UI 가제공하는각종컴포넌트에대한예제와 API 를확인할수 있다. jquery 는웹개발자들이코어라이브러리를확장하거나기능을추가할수있는플러그인구조를가지고있다. jqeury UI 가제공하는각종컴포넌트와 API 는 jqueryui.com 사이트에서제공하며, 실제샘플을보고 소스를복사해서사용할수있도록편리하게제공하고있다. 15 / 94

17 2.9 HTML 화면구조 Templete <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jquery UI Draggable - Default functionality</title> <link rel="stylesheet" href=" /> <script src=" <script src=" <link rel="stylesheet" href="/resources/demos/style.css" /> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script> $(function() { $( "#draggable" ).draggable(); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> <p>drag me around</p> </div> 2. jquery 와 jqueryui HTML 선언부 필수스크립트 Import : 소스를순차적으로읽어서실행하기때문에대상 Element 가메모리상에올라오기전에대상 Element 를사용하는이벤트가발생할경우오류가발생한다. 개별화면 CSS 정의 개별화면기능정의 UI 화면구현 </body> </html> 페이지내에서만사용되는스크립트 Script 의위치 개별화면 JavaScript 정의 보통페이지에서는페이지로딩을통하여여러이미지와파일들을순차적으로한번에로딩할필요없이로딩되는순으로페이지에표시하곤한다. 이미지파일은여러파일을동시에받을수있기때문이다. 그러나 <script> 파일이있으면다른이미지나 script 파일을받아오지못한다 16 / 94. 그러므로 script 부분은페이지의가장하단에위치하는것이좋다.

18 2.10 jquery 함수의선택자 2. jquery 와 jqueryui jquery 는선택자엔진을사용하여 CSS, HTML, JavaScript Object 를선택할수있다 선택대상 문법해석 CSS Selector HTML Element img HTML Element $ ( ) 선택자는모두문자열형태이므로따옴표를사용한다. CSS 선택자 img{ float: left; height: 350px; text-align: center; border: solid #000 5px; } JavaScript Object $ ( ) $ ( img ) 선택자를 jquery 단축기호로묶는다. 페이지에있는이미지요소를모두반환한다. CSS Selector : CSS 선택자를넣으면 jquery 함수는그선택자에맞는요소를반환 HTML Element : HTML 문자열을넣으면브라우저상의페이지에바로요소를추가가능 JavaScript Object : 자바스크립트객체도추가가능 jquery 라이브러리는 CSS 와마찬가지로요소를선택하도록만들어졌다. $( button ).click(function(){} $( p).hide(); $( #mytop ).css({ color : blue }); 17 / 94

19 2.11 jquery 함수의선택자 2. jquery 와 jqueryui 웹페이지의 DOM 트리구조 div class= nav html body div div class= nav p id= my_blurb CSS 코드 -> 디자인.nav{ display: block; border: solid #00f 1px; width: 100%; } jquery 코드 -> 이벤트 클래스선택자는그클래스에속하는요소를모두선택한다. $(.nav ).click( function() { alert( 나를눌렀군요! ); }); 자손선택자 왼쪽에있는선택자가부모 $ ( div p ) 오른쪽에있는선택자가자식 $ ( div div p ) 자식의자식을선택 jquery 선택자에서 DOM Element 상의자손 Element 를선택할때는빈칸을이용한다 18 / 94

20 2.12 jquery vs CSS 선택자비교 2. jquery 와 jqueryui CSS 선택자는요소를선택해서스타일을입히고, jquery 선택자는동작을추가한다 요소선택자 CSS 선택자 h1 { text-align: left; } h1 : 요소선택자 or 태그선택자 (HTML 문서에있는 h1 요소를모두선택 ) text-align : CSS 속성, left : CSS 속성의값 클래스선택자.my_class { position: absolute; }.my_class : CSS 클래스는항상마침표로시작함 ( 클래스선택자를사용해서요소그룹을선택 ) ID 선택자 #my_id { color: #3300FF; } #my_id : CSS ID 는항상해시 (#) 기호로시작함 ( 요소를딱하나만선택할때는 ID 선택자를사용 ) 요소선택자 jquery 선택자 $( h1 ).hide(); Hide() : 메서드 페이지에있는 h1 요소를모두숨깁니다. 클래스선택자 slideup() : 메서드 CSS 클래스 my_class 가있는요소는모두슬라이드로올립니다. ID 선택자 $(.my_class ).slideup(); $( #my_id ).fadeout(); fadeout() : 메서드 CSS ID 가 my_id 인요소를페이드아웃시켜보이지않게합니다. 표현식 border-style border-width 표현식 borderstyle borderwidth CSS 는 CSS 표기법을, jquery 는 DOM 표기법을사용 : 19 / 94

21 2.13 DOM 배열 vs jquery 객체구조 2. jquery 와 jqueryui jquery 는 DOM element 를가져올때, jquery 객체로 Wrapping 하여사용한다 DOM 배열 jquery 객체 window html head title DOM 뼈대 body div ul p li DOM element.add().addclass().blur().click().closest().delay().each().find().text() DOM element 기본함수 DOM element 를직접관리 document.getelementsbytagname( p ) DOM element 를포함한 jquery 객체를관리 브라우저마다 DOM 메서드가일관성없이구현되어있기때문에 jquery 를이용하여호환성확보. 20 / 94

22 2.14 jquery 구성요소와 Plugin 2. jquery 와 jqueryui jquery는 Selector, Filter, API Method, Event, Plugin을제공한다 jquery 구성요소구성요소문법예제설명 Selector $( 대상 ) $("div p") 필요한요소나클래스, 태그를찾아옮 Filter $( 대상 : 필터명 ) $("td:last") 더강력한셀렉터역할을수행하게도와줌 API Method jquery객체.api명 $(this).each() jquery 객체를다루기위한기본기능을제공 Event $(). 이벤트함수명 $( #button ).click() 이벤트발생을인지하여원하는 Function을실행 jquery Plugin 의종류 구성요소예제설명 Interactions $('#box').draggable(); UI 객체간에연동하면서처리되는이벤트 jqueryui Widgets $( "#calendar" ).datepicker(); 단위모듈로구현되는 UI 기능컴포넌트 Effects $( "#combo" ).effect( selectedef fect, options, 500, callback ); CSS 를통해표현할수있는화면효과 Utilities $( ".positionable" ).position( ) UI에서사용되는도구모음 jqgrid $('#jqgrid').jqgrid({ }); jquery 기반의 Grid 플러그인 jqtree $('#jstree').jstree({ }); Data를 Tree 형태로표현해주는 Plugin jqchart $('#jqchart').jqchart({ }); Data를 Chart 형태로표현해주는 Plugin 21 / 94

23 2.15 이벤트묶기 2. jquery 와 jqueryui 요소에이벤트를등록하는일을묶는다 (bind) 고한다 단축메소드.bind() 함수 단축메소드를사용하여직접함수를연결 $ ( #myelement ).click( function() { alert($(this).text()); }); DOM 요소가이미존재할때만쓸수있음 $ ( #myelement ).bind( click, function() { alert($(this).text()); }); 두방법모두 ID 가 myelement 인요소에클릭 (click) 이벤트리스너를등록한다..bind() 와.unbind().bind() 는이벤트를직접처리하지않고, 엘리먼트집합에함수를연결 ( 전달 ) 한다. unbind 를하게되면연결된이벤트를끊어내어이벤트연결이전의상태로돌려놓는효과가발생된다. 사용방법.bind(eventType,[,eventData,],handler(eventObject)).bind(eventType,[,eventData,],false).unbind(eventType,handler(eventObject)).unbind(eventType,false) 설명 eventtype 클릭서브밋같은하나이상의자바스크립트이벤트타입이름 eventdata 이벤트핸들러로전달할데이터를담은데이터맵 handler(eventobject) 이벤트가발생했을때실행되는이벤트핸들러함수 22 / 94

24 3. jquery UI Tab 기능확장 1. jquery Function 재정의 2. Options 확장 3. Button 추가 4. 기능확장부분모듈화 5. CSS 적용 23 / 94

25 3.1 확장기능정의 3. jquery UI Tab 기능확장 jquery UI 에서제공하는기본 Tab Widget 에 Tab 닫기버튼 을추가하는기능구현 24 / 94

26 3.2 jquery UI Tab 예제원본소스 3. jquery UI Tab 기능확장 1) <!doctype html> 2) 3) <html lang= ko"> 4) <head> 5) <meta charset="euc-kr" /> 6) <title>jquery UI Tabs - Default functionality</title> 7) <link rel="stylesheet" href=" /> 8) <script src=" 9) <script src=" 10) <link rel="stylesheet" href="/resources/demos/style.css" /> 11) <script> 12) $(function() { 13) $( "#tabs" ).tabs(); 14) }); 15) </script> 16) </head> 17) <body> 18) 19) <div id="tabs"> 20) <ul> 21) <li><a href="#tabs-1"> 첫번째탭 </a></li> 22) <li><a href="#tabs-2"> 두번째탭 </a></li> 23) <li><a href="#tabs-3"> 세번째탭 </a></li> 24) </ul> 25) <div id="tabs-1"> 26) <p> 가나다라 </p> 27) </div> 28) <div id="tabs-2"> 29) <p> 마바사아 </p> 30) </div> 31) <div id="tabs-3"> 32) <p> 자차카 </p> 33) <p> 타파하 </p> 34) </div> 35) </div> 36) 37) </body> 38) </html> 25 / 94 jquery UI 샘플참조 브라우저에서한글깨짐 (utf-8 에서 euc-kr 로수정 ) jquery 를사용하기위한필수입력사항 전체 Library or 사용하려는컴포넌트 ( 기능그룹 ) 입력디자인정의파일 (css) 입력 본문에서사용할스크립트함수정의 본문 HTML 화면구현영역 ( 표준 : in-line 함수를사용하지않음 ) </body> 태그를닫기전에이화면에서만사용할이벤트를정의함 ( 화면로딩지연으로인한오류방지 )

27 3.3 Project 생성 Eclipse Project 3. jquery UI Tab 기능확장 1. Eclipse 에신규 Project 를생성한다 1 General > Project 선택후 Next 버튼클릭 2 Project Name 에 NEST-UI 입력후 Finish 버튼클릭 Dynamic Web Project 로생성하면 Eclipse 가제공하는 Tomcat 활용가능 26 / 94

28 3.3 Project 생성 - Package 구조정의 3. jquery UI Tab 기능확장 2. Eclipse 에서아래그림과같이 Package 구조를만든다 소스파일설명 파일명 style css jquery js Jquery-ui custom.css jquery-ui custom.js widget-tab.html 용도 대상화면에서만사용하는 CSS 정의 jquery 를사용하기위한 Core Library jquery UI 에서사용하는 CSS 정의 jquery UI 를사용하기위한 JavaScript (jquery UI Core Library 내포 ) 대상화면을구현한 HTML 정의 Tab 위젯만대상으로할경우 jquery-ui custom.js 대신에 jqueryui.com > download 에서 tab widget 만내려받은 js 파일로대체할수있다. (jquery.ui.tabs.js) 27 / 94

29 3.4 Tabs 원본 HTML 소스수정 3. jquery UI Tab 기능확장 1) <!doctype html> /widget-tab.html 파일내용 2) 3) <html lang= ko"> 4) <head> 5) <meta charset="euc-kr" /> 6) <title>jquery UI Tabs - Default functionality</title> 7) <link rel="stylesheet" href= js/lib/jquery.ui/css/jquery.ui custom.css" /> 8) <link rel="stylesheet" href= js/lib/nest.ui/css/nest.ui.tabs css"" /> 9) <script src= js/lib/jquery/jquery js"></script> 10) <script src= js/lib/jquery.ui/jquery-ui custom.js"></script> 11) <script src= js/lib/nest.ui/nest.ui.tabs js"></script> 12) <link rel="stylesheet" href="css/style css" /> 13) <script> 14) $(function() { 15) $( "#tabs" ).tabs(); 16) }); 17) </script> 18) </head> 19) <body> 20) 21) <div id="tabs"> 22) <ul> 23) <li><a href="#tabs-1"> 첫번째탭 </a></li> 24) <li><a href="#tabs-2"> 두번째탭 </a></li> 25) <li><a href="#tabs-3"> 세번째탭 </a></li> 26) </ul> 27) <div id="tabs-1"> 28) <p> 가나다라마바사아자차카타파하 </p> 29) </div> 30) <div id="tabs-2"> 31) <p>abcdefghijklmnopqrstuvwxyz</p> 32) </div> 33) <div id="tabs-3"> 34) <p> 가나다라마바사아자차카타파하 </p> 35) <p>abcdefghijklmnopqrstuvwxyz</p> 36) </div> 37) </div> 38) 39) </body> 40) </html> 28 / 94 Tab 구현소스 3. jquery UI 의 Tab Widget 의원본소스는그대로두고기능을확장하기위하여 HTML 소스에확장하려는 JavaScript, CSS 파일명을추가한다. nest.ui.tabs js nest.ui.tabs css CSS 파일을먼저정의하는이유는 JavaScript 파일에서 CSS 에정의된 CSS Tag 를사용할경우오류발생위험이있기때문이다. - 웹표준에의해 in-line Style, in-line Event 를사용하지않는다. - id 명 / class 명을적절히구사하여 Widget 컴포넌트를구현한다.

30 3.5 기능확장 js, css 파일생성 3. jquery UI Tab 기능확장 4. 확장폴더 (nest.ui) 아래에확장 js 파일 (nest.ui.tabs js) 을만들고, alert(0); 을찍어서파일이정상적으로 import 되었는지확인한다 소스파일설명 파일명 용도 nest.ui.tabs js 확장하려는내용 (JavaScript 소스 ) nest.ui.tabs css 확장된 Widget 에서사용할 CSS Style 소스내용 // 확장스크립트 import 확인 alert(0); /js/lib/nest.ui/nest.ui.tabs js /js/lib/nest.ui/css/nest.ui.tabs css // 내용없음 29 / 94

31 3.6 jquery Function 재정의 3. jquery UI Tab 기능확장 5. 확장 js 파일 (nest.ui.tabs js) 에소스전체를익명함수로감싸고 jquery($) 을인자로넘긴다. jquery UI Tab 라이브러리가있는지체크한다. 소스내용 // 1 소스전체를익명함수로처리 (function($) { /js/lib/nest.ui/nest.ui.tabs js // 라이브러리확인 if (!$.ui!$.ui.tabs) { // 2 jquery UI Tab 관련 library 가대상화면상에존재하고있는지체크 return false; } // 확장로직구현위치 })(jquery); 변수의전역등록방지를고려하여로직을익명함수로감싸고, jquery 를인자로넘겨익명함수안에서 $ 가 jquery 임을보장시킨다. 함수이름정하기 함수선언 function myfunc1() { $( div ).hide(); } 함수이름 함수이름정하기 함수표현식 함수를변수에할당 var myfunc2 = function() { $( div ).show(); } 익명함수는코드를실행하다가익명함수가정의된위치에서바로실행됩니다. 익명함수안에서선언한변수는해당함수안에서만사용할수있습니다. 30 / 94

32 3.6 jquery Function 재정의 3. jquery UI Tab 기능확장 jquery UI 의 Widget 을확장할경우공통적으로아래와같은패턴의소스를만들게된다. 1) /** 2) * Supported Browser : MSIE, Chrome, FireFox 3) * Object : nest.ui.tabs.js 4) * Description : jquery UI Tabs 확장 5) */ 6) (function($) { 7) 8) // 라이브러리존재여부확인 9) if (!$.ui!$.ui.tabs) { 10) return false; 11) } 12) 13) // 닫기버튼 14) // ADD_OPTION closebutton 15) // EXT_METHOD _processtabs 16) // EXT_METHOD _setoption 17) // ADD_METHOD _setclosebutton 18) $.widget('ui.tabs', $.ui.tabs, { 19) options: { 20) /** 21) * <p> 닫기버튼추가여부또는템플릿.</p> 22) * 23) jquery.ui.tabs.prototype.closebutton 24) 25) Boolean String 26) false 27) */ 28) closebutton: false 29) }, 30) 31) /** 32) * <p>_processtabs 메서드확장.</p> 33) * <p>closebutton 옵션처리.</p> 34) * 35) jquery.ui.tabs.prototype._processtabs 36) */ 37) _processtabs: function() { 38) // 원본메서드호출 39) this._super.apply(this, arguments); 40) 41) // 기능구현 42) }, 43) 44) /** 45) * <p>_setoption 메서드확장.</p> 46) * <p>closebutton 옵션처리.</p> 47) * 48) jquery.ui.tabs.prototype._setoption 49) */ 50) _setoption: function(key, value) { 51) // 원본메서드호출 52) this._super.apply(this, arguments); 53) 54) // 기능구현 55) }, 56) 57) /** 58) * <p> 닫기버튼추가.</p> 59) * 60) jquery.ui.tabs.prototype._setclosebutton 61) 62) 63) {String Boolean} [closebutton] 닫기버튼추가여 부또는템플릿 64) */ 65) _setclosebutton: function(closebutton) { 66) // 기능구현 67) } 68) }); 69) 70) })(jquery); 31 / 94

33 3.7 Tab Widget 의 Option 확장 3. jquery UI Tab 기능확장 6. 확장하려는기능이 Tab 이므로 $.widget 으로등록한다. ( 확장 js 파일에서 ) jquery 용어규칙에따라 Widget 에는 Options, Methods, Event 가 API 그룹명으로올수있다. 소스내용 $.widget('ui.tabs', $.ui.tabs, { options: { }); } /** * <p> 닫기버튼추가여부또는템플릿.</p> * jquery.ui.tabs.prototype.closebutton Boolean String false */ closebutton: false /js/lib/nest.ui/nest.ui.tabs js 의일부 // 1 $.widget() 을사용하여 jquery의 ui.tabs을상속 // 2 닫기버튼은 Tab Widget이생성될때만들어져야하므로, Options를확장 jqueryui 사이트 API 를보면 Options( 생성시적용됨 ), Methods( 실행중적용됨 ), Event( 실행중적용됨 ) 그룹명을확인할수있다. 32 / 94

34 3.8 Tab Widget 원본소스로직분석 3. jquery UI Tab 기능확장 7. Tab Widget 원본소스의로직을분석하여어떻게확장할지알아본다. 1 jquery-ui custom.js 파일을열어서 Tab Widget이호출되었을때, 실행되는로직을분석한다. 2 맨처음 _CreateWidget 부터실행된다. 3 _CreateWidget function의 _create(); 메소드를확장하여 customizing 하기로결정 (return값유무확인이필요하다. method chain 1) 에영향이있음 ) 소스분석 - Tab Widget 로직에관한내용추가 (function( $, undefined ) { $.Widget.prototype = { _createwidget: function( options, element ) { // },. $.widget( "ui.tabs", { _create: function() { #. jquery UI 확장분석 Tips - Interaction }, Interaction은마우스이벤트가중요 } })( jquery ); jquery-ui custom.js Jquery.ui.mouse.js 파일에서이벤트정의됨 Hover 이벤트는위젯에서만존재함 Droppable 이벤트는 ddmanager 함수에서객체간처리를담당함 33 / 94

35 3.8 Tab Widget 원본소스로직분석 Tips 3. jquery UI Tab 기능확장 jquery 컴포넌트플러그인과 jqueryui 위젯컴포넌트는대부분하나의실행메서드만노출하고, 그메서드에서인스턴스생성및메서드실행을처리한다 실행메서드를여러개등록할경우다른 jquery 플러그인의메서드와중복될가능성이높아진다. (JavaScript 는기본적으로 overloading 을지원하지않는다.) 실행메서드의첫번째인자가객체일경우인스턴스생성으로간주한다. ex) $(selector).dialog({ width: 500 }); 실행메서드의첫번째인자가문자열일경우메서드실행으로간주한다. 두번째인자부터는파미터로사용된다. ex) $(selector).dialog('close'); $(selector).dialog('option'[, param1, param2,...]); $(selector).dialog('option', 'height'); 예외적으로메서드를여러개노출해놓는경우도있다. ex) $(selector).jqgrid(); $(selector).jqgrid('setcaption', param1); $(selector).setcaption(param1); ex) $.fn.tooltip = function( method ) { if ( methods[method] ) { // 메서드실행 return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object'! method ) { // 인스턴스생성 return methods.init.apply( this, arguments ); } else { // 아니면오류 $.error( 'Method ' + method + ' does not exist on jquery.tooltip' ); } }; 34 / 94

36 3.8 Tab Widget 원본소스로직분석 Tips 3. jquery UI Tab 기능확장 jquery 원본소스분석시여러가지제약조건을잘고려한다 button 의 type([button reset submit]) 은기본값이 submit 이다. input text 가하나만있을때 text 안에서엔터를누르면 submit 이일어난다. 객체의 property 참조시 object.propertyname 또는 object['propertname'] 으로참조할수있다. 객체에 length(number), splice(function) 프로퍼티가있을경우 console 은이객체를마치 array 처럼출력한다. 즉시실행함수작성시인자를전달하면함수내부에서전달된인자의값을보장할수있고, 지역변 수로사용되므로좀더빠르다. ex) // 이익명함수내에서사용되는 $ 는 jquery 임이보장된다. ( 단, 지역변수로 $ 를재정의하지않은경우 ) $ = 'test'; (function($) { console.log($); })(jquery); // 이익명함수내에서사용되는 $ 는 window 임이보장된다. ( 단, 지역변수로 $ 를재정의하지않은경우 ) $ = 'test'; (function($) { console.log($); })(window); 35 / 94

37 3.8 Tab Widget 원본소스로직분석 Tips 3. jquery UI Tab 기능확장 jquery 원본소스분석시메소드의특징을잘알고사용해야한다 $.fn.extend 메서드는객체복사기능을한다. 첫번째인자에두번째인자의내용이복사 (replace) 된다. ex) var a = { v: 10 }, b = { v: 11 }, c { v: 12 }; var d = $.extend({}, a, b, c); // d === { v: 12 }; $.extend(a, b, c); // a === { v: 12 }; Function 은내부에 arguments 라는시스템변수를갖고있다. arguments 는인자의개수, 인자의값등의정보를갖고있다. 인자는배열과같이인덱스로꺼내올수있지만 arguments 가배열인것은아니다. ex) console.log(arguments.constructor); console.log([].constructor); arguments 를배열로변환할때는 Array 의 slice 함수를이용하도록한다. - [oarray=]array.slice(start[, end]) - Array.prototype.slice 는두개의인덱스를인자로받으며인덱스부분의요소를 Array 로복사하여반환한다. - 인자가없을경우복사된 Array 를반환한다. - 두번째인자인 end 를생략할경우 length - 1 까지의요소를반환한다. ex) var args = Array.prototype.splice.call(arguments); 36 / 94

38 3.8 Tab Widget 원본소스로직분석 Tips 3. jquery UI Tab 기능확장 jquery 원본소스분석시 Function vs Function 의 Instance 차이를잘알고사용해야한다 Function 과 Function 의인스턴스의차이 Fuction Java, C++ 등의 OOP 언어에서의 Class 와유사한역할을한다. new 키워드를사용하여실행하면인스턴스가반환된다. ex) var obj = new Object(); Function 은 prototype 이라는특별한객체공간을갖고있다. prototype 에등록된프로퍼티와메서드는이 Function 의모든인스턴스가참조, 공유한다. 브라우저내장 console 객체에서 prototype 의내용을확인할수있다. ex) console.dir($); console.log($.prototype); Function 인스턴스 new 키워드와함께실행된 Function 의결과이다. Function 의 prototype 을참조, 사용할수있다. prototype 에등록된메서드실행시자동으로자신을컨텍스트로전달하여 this 에바인딩된다. 브라우저내장 console 객체에서인스턴스가사용할수있는메서드 ( 프로퍼티 ) 를 proto 에서확인할수있다. <!> proto 는 prototype chain 을보여주는브라우저고유의변수이며, 각브라우저마다구현체가다를수있으니로직에서사용은하지않도록한다. ex) console.log($('body')); $.extend, $.trim, $.each 와같이 jquery 인스턴스 $(selector) 에서사용할수있는모든메서드는 jquery.fn(=== jquery.prototype) 에등록되어있다. jquery 를실행하면 jquery.fn.init 함수의인스턴스를생성하여반환하는데, jquery.fn.init.prototype 은 jquery.fn 을참조하고있다 / 94

39 3.9 스크립트확장 3. jquery UI Tab 기능확장 8. _CreateWidget function 의 _create(); 메소드를확장하여 customizing 한다 소스내용 (function($) { // 라이브러리확인 /js/lib/nest.ui/nest.ui.tabs js 의일부 // 닫기버튼구현 $.widget('ui.tabs', $.ui.tabs, { options: // 1 _create(); 를추가 _create: function() { // 컨텍스트 (this === 위젯객체 ) 를지역변수로참조할수있게선언 var self = this; // 2 alert() 으로함수호출여부확인 alert(0); // 3 원본 _create 함수호출 ( 로직확장후원본 method를호출해주기위함 ) this._super(); } }); })(jquery); 38 / 94

40 3. jquery UI Tab 기능확장 3.10 _createclosebutton 메서드호출위치결정 9. 추가할 _createclosebutton 메서드호출위치를결정한다 1 this._super() 전 / 후어디에확장로직을넣을지결정하기위하여원본 Tab Widget 로직을분석한다. 2 this._super() 후에로직을넣기로결정 소스내용 (function($) { // 라이브러리확인 /js/lib/nest.ui/nest.ui.tabs js 의일부 // 닫기버튼구현 $.widget('ui.tabs', $.ui.tabs, { options: _create: function() { // 컨텍스트 (this === 위젯객체 ) 를지역변수로참조할수있게선언 var self = this; // 원본 _create 함수호출 this._super(); // 추가할닫기버튼로직구현위치 } }); })(jquery); 39 / 94

41 3.11 Tab 에 Close Button 엘리먼트추가 3. jquery UI Tab 기능확장 10. 개발자도구로 Close Button 을넣을대상 Element 를판단하여기능확장 ( 메소드추가 ) 1 id, class 명으로판단하여 ui-tabs-nav 클래스를채택 40 / 94

42 3.12 _processtabs 수정 3. jquery UI Tab 기능확장 11. 소스를분석하여 _processtabs 를수정하기로결정한다. 소스분석 (function( $, undefined ) { $.Widget.prototype = { $.widget( "ui.tabs", { _create: function() { this._processtabs(); //11510 line }, // 1 jquery-ui custom.js 파일내원본소스를분석하여 _processtabs 을확장하기로결정 _processtabs: function() { //11809 line // 2 li 엘리먼트에확장하기로결정 (this.tabs) this.tabs = this.tablist.find( "> li:has(a[href])" ) //11816 line.addclass( "ui-state-default ui-corner-top" ).attr({ role: "tab", tabindex: -1 }); }, } })( jquery ); 41 / 94 jquery-ui custom.js

43 3.12 _processtabs 수정 3. jquery UI Tab 기능확장 11. 소스를분석하여 _processtabs 를수정하기로결정한다. 3 개발자도구로 li 엘리먼트의구조를확인한다. 42 / 94

44 3.13 닫기버튼소스로직구현 3. jquery UI Tab 기능확장 12. 대상엘리먼트 (tab) 가여러개이므로 each 함수로닫기버튼소스를구현한다. 1 this.tabs.each(function ) 형태로 each 함수를사용하여소스로직을구현한다. 2 브라우저에서 Element 가정상적으로추가되었는지확인한다. 3 버튼이벤트구현로직을등록하기전에함수안에서 alert(0) 을찍어이벤트정상작동확인 : $b.click(function() ) 4 jqueryui 사이트 Tab Widget API 를찾아서구현하려고하는함수 (method) 의존재유무확인 ( 비슷한거있으면복사해서활용 ) 소스내용 // 각각의탭에닫기버튼추가로직구현위치 this.tabs.each(function() { // 버튼생성 var $b = $('<button class="custom-tabs-close ui-icon ui-icon-closethick">close</button>'); // 탭에버튼추가 $(this).append($b); // 소스추가는 append 메소드로처리한다. /js/lib/nest.ui/nest.ui.tabs js 의일부 // 버튼에클릭이벤트등록 $b.click(function() { // 버튼클릭여부확인 alert(0); }); }); / 94

45 3.13 닫기버튼소스로직구현 3. jquery UI Tab 기능확장 12. 대상엘리먼트 (tab) 가여러개이므로 each 함수로닫기버튼소스를구현한다. 1 버튼이벤트구현로직을등록하기전에함수안에서 alert(0) 을찍어이벤트정상작동확인 44 / 94

46 3.14 닫기버튼이벤트로직분석 3. jquery UI Tab 기능확장 13. 닫기버튼구현을위해원본소스를분석하여유사한기능처리패턴을참조한다. 1 remove 메소드를사용하기로결정 소스분석 (function( $, undefined ) { $.Widget.prototype = { $.widget( "ui.tabs", { _create: function() { this._processtabs(); //11510 line }, _processtabs: function() { //11809 line this.tabs = this.tablist.find( "> li:has(a[href])" ) //11816 line.addclass( "ui-state-default ui-corner-top" ).attr({ role: "tab", tabindex: -1 }); }, } })( jquery ); 45 / 94 jquery-ui custom.js

47 3.15 닫기버튼이벤트로직구현 3. jquery UI Tab 기능확장 14. 닫기버튼이벤트로직을구현한다. (Coding & Debugging) 1 컨텍스트 (this === tab 위젯 ) 를지역변수로미리선언 : self 변수 ( 이벤트를등록하기위한 this 가 tab 위젯이아니었음 ) 2 remove() 를 self 에구현 3 each() 에서던져주는 index 를인자로사용. => index 값이오류 => index 값을받아오기로함 4 부모의 (tab) 몇번째인덱스인지알아봄 5 로직삽입후 test : remove 에 index 값적용 소스내용 this.tabs.each(function() { // 버튼에클릭이벤트등록 $b.click(function() { // 부모 tabs 을찾아서몇번째인덱스에위치하는지확인 var index = $(this).parent().index(); console.log(index); // 개발자도구 console 화면에서확인 /js/lib/nest.ui/nest.ui.tabs js 의일부 }); }); // 탭삭제 var panelid = $( this ).closest( "li" ).remove().attr( "aria-controls" ); console.log(panelid); $( "#" + panelid ).remove(); // 탭삭제 //self.remove(index); // self Object 의 remove 를못찾고있음 46 / 94

48 3.16 닫기버튼소스정리 3. jquery UI Tab 기능확장 15. 닫기버튼확장소스영역을묶어서함수로처리한다. 1 확장소스영역을함수로처리 : this._createclosebutton(); 소스내용 (function($) { $.widget('ui.tabs', $.ui.tabs, { _create: function() { var self = this; // 컨텍스트 (this === 위젯객체 ) 를지역변수로참조할수있게선언 this._super(); // 원본 _create 함수호출 this._createclosebutton(); // 추가한 _createclosebutton 메서드호출 }, 47 / 94 // 함수명에 _ 는 private 함수를의미함 /js/lib/nest.ui/nest.ui.tabs js 의일부 _createclosebutton: function() { this.tabs.each(function() { var $b = $('<button class="custom-tabs-close ui-icon ui-icon-closethick">close</button>'); $(this).append($b); $b.click(function() { var index = $(this).parent().index(); // 부모 tabs을찾아서몇번째인덱스에위치하는지확인 console.log(index); // 개발자도구 console 화면에서확인 // 탭삭제 var panelid = $( this ).closest( "li" ).remove().attr( "aria-controls" ); console.log(panelid); $( "#" + panelid ).remove(); }); }); } }); })(jquery);

49 3.16 닫기버튼소스정리 3. jquery UI Tab 기능확장 최종적인 nest.ui.tabs js 파일의소스내용은아래와같다. 1) // 확장스크립트임포트확인 2) // alert(0); 3) (function($) { 4) 5) // 라이브러리확인 6) if (!$.ui!$.ui.tabs) { 7) return false; 8) } 9) 10) // 닫기버튼구현 11) // ADD_OPTION closebutton 12) // EXT_METHOD _create 13) // ADD_METHOD _createclosebutton 14) $.widget('ui.tabs', $.ui.tabs, { 15) options: { 16) closebutton: false 17) }, 18) 19) _create: function() { 20) // 컨텍스트 (this === 위젯객체 ) 를지역변수로참조할수 있게선언 21) var self = this; 22) 23) // 함수호출여부확인 24) // alert(0); 25) 26) // 원본 _create 함수호출 27) this._super(); 28) 29) // 추가한 _createclosebutton 메서드호출 30) this._createclosebutton(); 31) }, 32) 33) // 추가한 _createclosebutton 메서드 34) // 이메서드에서닫기버튼을추가한다. 35) _createclosebutton: function() { 36) // 각각의탭에닫기버튼추가 37) this.tabs.each(function() { 38) // 버튼생성 39) var $b = $('<button class="custom-tabs-close uiicon ui-icon-closethick">close</button>'); 40) 41) // 탭에버튼추가 42) $(this).append($b); 43) 44) // 버튼에클릭이벤트등록 45) $b.click(function() { 46) // 버튼클릭여부확인 47) // alert(0); 48) 49) // 부모 tabs을찾아서몇번째인덱스에위치하는지 확인 50) var index = $(this).parent().index(); 51) console.log(index); 52) 53) // 탭삭제 54) var panelid = $( this ).closest( "li" ).remove().attr( "aria-controls" ); 55) console.log(panelid); 56) $( "#" + panelid ).remove(); 57) 58) // 탭삭제 59) //self.remove(index); }); 60) }); 61) } 62) }); 63) 64) })(jquery); 48 / 94

50 3.17 닫기버튼기능 Test 3. jquery UI Tab 기능확장 16. 브라우저에서구현기능 Test 1 Tab 버튼누르기 2 Tab의닫기버튼누르기 3 이미지확인 ( 모양 / 위치 / 색상 ) 49 / 94

51 3.18 디자인적용 3. jquery UI Tab 기능확장 17. 닫기버튼의디자인을원하는모양으로바꿔준다. 1 jqueryui 사이트 (jqueryui.com) 의 Themes 메뉴에서 Framework icon을선택한다. :.ui-icon-closethick 클래스를선택 2 Class 명을복사하려면, 대상아이콘위에서오른쪽버튼클릭 > 요소검사 > class 명복사 50 / 94

52 3.18 디자인적용 3. jquery UI Tab 기능확장 17. 닫기버튼의디자인을원하는모양으로바꿔준다. 3 소스에 class 명을 inline 으로삽입한다. 소스내용 /js/lib/nest.ui/nest.ui.tabs js 의일부 _createclosebutton: function() { this.tabs.each(function() { // 버튼생성 var $b = $('<button class="custom-tabs-close ui-icon ui-icon-closethick">close</button>'); }); } 4 CSS 파일을별도의파일 (nest.ui.tabs css) 로생성한다. (6.5 기능확장 js, css 파일생성참고 ) 51 / 94

53 3.18 디자인적용 3. jquery UI Tab 기능확장 17. 닫기버튼의디자인을원하는모양으로바꿔준다. 5 신규 CSS 파일에 body { background: gold; } 를입력하여파일이정상등록되었는지확인한다. 소스내용 /* CSS import 확인 */ body { background: gold; } /js/lib/nest.ui/css/nest.ui.tabs css 의일부 6 브라우저에아래와같이표현되면, 정상적으로 CSS 파일이 import 된것이다. 52 / 94

54 3.18 디자인적용 3. jquery UI Tab 기능확장 17. 닫기버튼의디자인을원하는모양으로바꿔준다. 7 대상객체에 CSS 적용되는지확인한다. 소스내용 /* 대상객체 CSS 적용확인 */.ui-icon-closethick { background: gold; } /js/lib/nest.ui/css/nest.ui.tabs css 의일부 8 브라우저에아래와같이표현되면, 정상적으로대상객체에적용된것이다. 53 / 94

55 3.18 디자인적용 3. jquery UI Tab 기능확장 17. 닫기버튼의디자인을원하는모양으로바꿔준다. 9 닫기버튼의위치 / 테두리등을조절한다. : 개발자도구에서 CSS값을직접변경해서확인후소스에등록해준다.(margin 값으로위치수정 ) element.style { } 소스내용 /js/lib/nest.ui/css/nest.ui.tabs css 의일부 /* jquery UI 에서사용하는흔한클래스명을확장할경우그영향력이너무커진다. */.ui-icon-closethick { margin-top: 5px; margin-right: 5px; border: 0; } 54 / 94

56 3.18 디자인적용 3. jquery UI Tab 기능확장 17. 닫기버튼의디자인을원하는모양으로바꿔준다. 10 기존의클래스명 (.ui-icon-closethick) 은 jquery가확장되었을경우변경위험이있으므로 Class명을변경해준다. : CSS 클래스명충돌을피하기위해수정부분만을별도클래스로정의한다. ( 공백으로클래스명을여러개나열시여러개클래스가중복으로적용된다.) 소스내용 /js/lib/nest.ui/css/nest.ui.tabs css 의일부.custom-tabs-close { margin-top: 5px; margin-right: 5px; border: 0; } 55 / 94

57 3.18 디자인적용 3. jquery UI Tab 기능확장 최종적인 nest.ui.tabs css 파일의소스내용은아래와같다. 1) /* CSS import 확인 2) body { background: gold; } 3) */ 4) /* 대상객체 CSS 적용확인 5).ui-icon-closethick { background: gold; } 6) */ 7) /* jquery UI 에서사용하는흔한클래스를확장할경우그영향력이너무커진다. 8).ui-icon-closethick { margin-top: 5px; margin-right: 5px; border: 0; } 9) */ 10).custom-tabs-close { margin-top: 5px; margin-right: 5px; border: 0; } 56 / 94

58 3.19 Cross Brousing Test - Firefox 3. jquery UI Tab 기능확장 Firefox 에서는 Element 배열에대한상세한정의를추가해주어야한다. css 에 float: right; 옵션을추가한다..custom-tabs-close { float: right; margin-top: 5px; margin-right: 5px; border: 0; } 57 / 94

59 3.19 Cross Brousing Test Internet Explorer 3. jquery UI Tab 기능확장 IE 에서는 Debug 모드가실행되어야 console 객체가생성된다 js 소스의 console.log 를주석처리한다. ( 캐시파일이남아있을때는오류창이보이지않는다.) 주석처리 //console.log(self); //console.log(index); //console.log(self); //console.log(panelid); 58 / 94

60 4. jqgrid - Spring jsonview 연동 1. 서버단 jsonview 설정 2. 서버단리턴값셋팅 3. jqgrid 설정 4. jqgrid 구현 59 / 94

61 4.1 jsonview 적용예제 4. jsonview 연동 easycompany 프로젝트의 List 예제를 jqgrid 를적용하여변환 (with jsonview) 60 / 94

62 4.2 jqgrid 적용작업순서 4. jsonview 연동 1. jsonview 설정 : json data 통신설정 2. 서버단업무구현 : URL 요청처리 3. jqgrid 설정 : jqgrid 사용환경설정 4. 그리드업무구현 : 업무화면개발 2. EgovSampleController.java 3. jqgrid 의 CSS 파일 3. jqgrid 의 Library 파일 1. jsonview 설정 4. 업무화면개발 1. jsonview 설정 61 / 94

63 4.3 jsonview 설정 pom.xml 2. jquery 와 jqueryui C:\eGovFrameDev FullVer\workspace\Nest-Grid\pom.xml <?xml version="1.0" encoding="utf-8"?> <project > <modelversion>4.0.0</modelversion> <groupid>nest-grid</groupid> <artifactid>nest-grid</artifactid> <packaging>war</packaging> <version>1.0.0</version> <name>nest-grid</name> <url> <properties> </properties> <repositories> </repositories> <dependencies> jsonview Library 추가 <!-- jsonview 설정 --> <dependency> <groupid>net.sf.json-lib</groupid> <artifactid>json-lib-ext-spring</artifactid> <version>1.0.2</version> </dependency> </dependencies> <build> </build> <reporting> </reporting> </project> 62 / 94

64 4.3 jsonview 설정 dispatcher-servlet.xml 4. jsonview 연동 WEB-INF>config>egovframework>springmvc>dispatcher-servlet.xml WEB-INF>config>egovframework>springmvc>dispatcher-servlet.xml <?xml version="1.0" encoding="utf-8"?> <!-- DispatcherServlet application context for Application's web tier. --> <beans... > BeanNameViewResolver 에리턴값이 jsonview 인값들을 Mapping <!-- jsonview 설정 --> <bean id="jsonview" class="net.sf.json.spring.web.servlet.view.jsonview"> <property name="contenttype" value="application/json;charset=utf-8" /> <!-- 한글 --> </bean> <bean id="beannameresolver" class="org.springframework.web.servlet.view.beannameviewresolver"> <property name="order" value="0"/> </bean> </beans> 63 / 94

65 4.4 서버단로직구현 4. jsonview 연동 그리드화면에서호출하는 URL 에대한응답로직구현 package public class EgovSampleController public String selectsamplelist( ) throws Exception { 글목록조회 return "/sample/egovsamplelist"; } // // 그리드화면호출 public String selectsamplegridlist(@modelattribute("searchvo") SampleDefaultVO searchvo, ModelMap model) throws Exception { return "/sample/nestsamplegrid"; } // 그리드데이터조회 public String selectsamplegrid(@modelattribute("searchvo") SampleDefaultVO searchvo, ModelMap = "page", required = false, defaultvalue = "1") int = "rows", required = false, defaultvalue = "5") int = "sidx", required = false, defaultvalue = "5") String = "sord", required = false, defaultvalue = "5") String sord) throws Exception { return "jsonview"; } 64 / 94

66 4.4 서버단로직구현 Grid 화면호출 4. jsonview 연동 그리드로구현될화면을호출하는 URL 구현 /** * Grid Data 화면을호출한다. "/sample/nestsamplegridlist" Exception public String selectsamplegridlist(@modelattribute("searchvo") SampleDefaultVO searchvo, ModelMap model) throws Exception { } return "/sample/nestsamplegrid"; 65 / 94

67 4.4 서버단로직구현 Grid Data 회신 1/2 4. jsonview 연동 그리드에뿌려줄데이터를읽어오는 URL 구현 /** * jqgrid Grid Data를조회한다. searchvo - 조회할정보가담긴 SampleDefaultVO model jsonview" Exception // 데이터조회 public String selectsamplegrid(@modelattribute("searchvo") SampleDefaultVO searchvo, ModelMap = "page", required = false, defaultvalue = "1") int page, // = "rows", required = false, defaultvalue = "5") int rows, // = "sidx", required = false, defaultvalue = "5") String sidx, // Sort = "sord", required = false, defaultvalue = "5") String sord) // desc/asc throws Exception { // Query문 Paging 처리 searchvo.setpageunit(rows); searchvo.setfirstindex((page - 1) * rows); searchvo.setrecordcountperpage(page * rows); // easycompany 소스의 Paging 변수 // easycompany 소스의 Paging 변수 // easycompany 소스의 Paging 변수 // 데이터조회 : selectsamplelist() 메소드와동일 final List<SampleVO> samplelist = sampleservice.selectsamplelist(searchvo); 66 / 94

68 4.4 서버단로직구현 Grid Data 회신 2/2 4. jsonview 연동 그리드에뿌려줄데이터를읽어오는 URL 구현 // 총건수 int totalsize = sampleservice.selectsamplelisttotcnt(searchvo); // Paging 관련연산 int pagesize = 0; if (totalsize!= 0) { if ((totalsize % rows) == 0) { pagesize = (totalsize / rows); } else { pagesize = (totalsize / rows + 1); } } // 그리드에뿌려줄데이터셋팅 model.addattribute("page", page); // 몇번째페이지 model.addattribute("total", pagesize); // 전체페이지수 model.addattribute("records", totalsize); // 전체행수 model.addattribute("rows", samplelist); // 그리드데이터 } return "jsonview"; 67 / 94

69 4.5 json data 처리 개별파라미터 4. jsonview 연동 서버에서만들어주는 json data 의형태에따라단말단에서읽는방법이다름 서버단리턴 model.addattribute("page", page); model.addattribute("total", pagesize); model.addattribute("records", totalsize); model.addattribute("rows", samplelist); json data { } total : 4, page : 1, records : 20, rows : [ { id : SAMPLE-00028, name : testdata28, }. { id : SAMPLE-00027, name : testdata27, }. ], searchvo :.. Grid 소스 jsonreader: { repeatitems: false, root:'rows', page:'page', total:'total', records:'records', id:'id' }, Debugging Data 분석 68 / 94

70 4.5 json data 처리 단일클래스 4. jsonview 연동 서버에서만들어주는 json data 의형태에따라단말단에서읽는방법이다름 서버단리턴 model.addattribute("resultlist", new GridPageVO<SampleVO>(sampleList, page, pagesize, totalsize)); json data { } resultlist : { total : 4, page : 1, records : 20, rows : [ { id : SAMPLE-00028, name : testdata28, }. { id : SAMPLE-00027, name : testdata27, }. ] }, searchvo :.. Grid 소스 jsonreader: { repeatitems: false, // 서버에서받은 data 와 Grid 상의 column 순서를맞출것인지? root: function (obj) { return obj.resultlist.rows; }, //root 는 default 로 rows 를찾아서읽는다. page: function (obj) { return obj.resultlist.page; }, total: function (obj) { return obj.resultlist.total; }, records: function (obj) { return obj.resultlist.records; }, id:'id' // 키값, 꼭화면전체에서겹치는값이없는 column 을설정할것, 안그러면에러발생 }, // 페이징처리에관련된파라미터등 69 / 94

71 4.5 json data 처리 page VO 4. jsonview 연동 Grid 의리턴클래스를하나로만들어서보낼때예시 package egovframework.rte.sample.service; import java.util.list; public class GridPageVO<T> { private List<T> rows; private int page; private int total; private int records; public GridPageVO() { } public GridPageVO(List<T> rows, int page, int total, int records) { this.rows = rows; this.page = page; this.total = total; this.records = records; } public List<T> getrows() { return rows; } public void setrows(list<t> rows) { this.rows = rows; } // 일반적인 Value Object 와동일함 } 70 / 94

72 4.6 jqgrid 셋팅 4. jsonview 연동 화면에서 jqgrid 를사용할수있도록 Library 와 CSS 파일을 import 한다. 다운로드받은 jqgrid Library(jquery.jqGrid zip) 를압축을풀어 js 폴더의파일들은 js 폴 더에, css 폴더의파일들은 css 폴더에집어넣는다. js/i18n 폴더에는다국어를지원하기위한파일 들이들어간다. (jquery UI 도동일함. Datepicker 참조 ) 3. jqgrid 제공 CSS 2. jqueryui 제공 CSS i18n : jqgrid 제공다국어문자 Set 1. jquery Library 2. jqueryui Library 3. jqgrid Library jqgrid 를적용할 JSP 파일 71 / 94

73 4.7 jqgrid 실행 Library 다운로드 4. jsonview 연동 jqgrid 압축파일을다운로드받는다. (jquery.jqgrid zip) 사이트에서다운로드받는다. 72 / 94

74 4.7 jqgrid 실행 Library 다운로드 4. jsonview 연동 jqgrid 적용시참고할사이트 Download, Wiki, Demo 제공 업무적용샘플제공 (IAM) 73 / 94

75 4.8 jqgrid 테마다운로드 4. jsonview 연동 jqgrid 테마파일을다운로드받는다. 사이트에서테마파일을다운로드받는다. (jquery UI 동일 ) 테마가즉석에서눈에보이므로원하는테마를셋팅하여다운받는다. (jquery-ui custom.zip) 74 / 94

76 4.9 jqgrid 구현 jsp 파일준비 1/2 4. jsonview 연동 egovsamplelist.jsp 파일을복사하여 nestsamplegrid.jsp 파일을만들고아래와같이수정 page contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> taglib prefix="c" uri=" %> taglib prefix="form" uri=" %> taglib prefix="ui" uri=" taglib prefix="spring" uri=" <%. %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>basic Board List</title> <link type="text/css" rel="stylesheet" href="<c:url value='/css/egovframework/sample.css'/>"/> <script type="text/javascript" language="javascript" defer="defer"> <!-- function fn_egov_select(id) { } // 글수정화면 function function fn_egov_addview() { } // 글등록화면 function function fn_egov_selectlist() { } // 글목록화면 function function fn_egov_link_page(pageno){ } // pagination 페이지링크 function --> </script> 모두삭제 </head> 75 / 94

77 4.9 jqgrid 구현 jsp 파일준비 2/2 4. jsonview 연동 egovsamplelist.jsp 파일을복사하여 nestsamplegrid.jsp 파일을만들고아래와같이수정 <body style="text-align:center; margin:0 auto; display:inline; padding-top:100px;"> <form:form commandname="searchvo" name="listform" method="post"> <input type="hidden" name="selectedid" /> <div id="content_pop"> <!-- 타이틀 --> <div id="title"> <ul> <li><img src="<c:url value='/images/egovframework/rte/title_dot.gif'/>"> List Sample </li> </ul> </div> <!-- // 타이틀 --> <div id="search"> <ul> <li> <form:select path="searchcondition" cssclass="use"> <form:option value="1" label="name" /> <form:option value="0" label="id" /> </form:select> </li> <li><form:input path="searchkeyword" cssclass="txt"/></li> <li><span class="btn_blue_l"><a href="javascript:fn_egov_selectlist();"><spring:message code="button.search" /></ </div> <!-- List --> <div id="table"> Grid로대체 </div> 아래부분삭제 </div> </form:form> </body> </html> 76 / 94

78 4.10 jqgrid 구현 그리드화면소스 1/6 4. jsonview 연동 nestsamplegrid.jsp 파일 Head 부분 (import 순서중요 ) <%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> <%@ taglib prefix="c" uri=" %> <%@ taglib prefix="form" uri=" %> <%@ taglib prefix="ui" uri=" <%@ taglib prefix="spring" uri=" <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>data Grid 실습 (jqgrid)</title> <link type="text/css" rel="stylesheet" href="<c:url value='/css/egovframework/sample.css'/>"/> <link type="text/css" rel="stylesheet" href="<c:url value='/css/jqgrid/ui.jqgrid.css'/>"/> <link type="text/css" rel="stylesheet" href="<c:url value='/css/ui-lightness/jquery-ui custom.css'/>" /> <script src="<c:url value='/js/jquery js'/>" type="text/javascript"></script> <script src="<c:url value='/js/jquery-ui custom.js'/>" type="text/javascript"></script> <script src="<c:url value='/js/i18n/grid.locale-en.js'/>" type="text/javascript"></script> <script src="<c:url value='/js/jquery.jqgrid.src.js'/>"></script> </head> jquery 파일은 Site Link 보다는 Local 저장을권장 (Site 다운이잦음 ) <script type="text/javascript" src=" Google Ajax API CDN (Also supports SSL via HTTPS) Microsoft CDN (Also supports SSL via HTTPS) jquery CDN (via Media Temple) / 94

79 4.10 jqgrid 구현 그리드화면소스 2/6 4. jsonview 연동 nestsamplegrid.jsp 파일 HTML 태그부분 <body> <form:form commandname="searchvo" name="listform" method="post"> <input type="hidden" name="selectedid" /> <div id="content_pop"> <!-- 타이틀 --> <div id="title"> <ul> <li><img src="<c:url value='/images/egovframework/rte/title_dot.gif'/>"> Data Grid Sample </li> </ul> </div> <!-- // 타이틀 --> <div id="search"> <ul> <li> <form:select id="searchcondition" path="searchcondition" cssclass="use"> <form:option value="1" label="name" /> <form:option value="0" label="id" /> </form:select> </li> <li><form:input id="searchkeyword" path="searchkeyword" cssclass="txt"/></li> <li><span class="btn_blue_l"><a href="javascript:fn_egov_selectgrid();"><spring:message code="button.search" /></a> </div> <!-- List --> <div id="table"> <table id="list"></table> <div id="pager"></div> </div> <!-- /List --> </div> </form:form> Grid 구현부 (Grid 와 Paging 이들어갈위치 ) 78 / 94

80 4.10 jqgrid 구현 그리드화면소스 3/6 4. jsonview 연동 nestsamplegrid.jsp 파일 JavaScript 부분 ( 해당화면에서만사용하는 JavaScript 는 HTML 태그아래에위치 ) <script> $(function() { var lastsel; $('#list').jqgrid({ url: "<c:url value='/sample/nestsamplegrid.do'/>", // 서버주소 postdata : { searchcondition:$("#searchcondition").val(), searchkeyword:$("#searchkeyword").val() }, // URL에서검색조건으로가져갈파라미터 mtype:'post', // 전송타입 datatype : "json", // 받는데이터형태 colnames:[ 'No', ' 카테고리ID', ' 카테고리명 ', ' 사용여부 ', 'Description', ' 등록자 ' ], // 테이블의제목 colmodel:[ { name: 'rownum', index: 'rownum', width: 40 }, { name: 'id', index: 'id', width: 100 }, { name: 'name', index: 'name', width: 150, editable:true, edittype:'text' }, { name: 'useyn', index: 'useyn', width: 80, align:'center' }, { name: 'description', index: 'description', width: 200, editable:true, edittype:'text' }, { name: 'reguser', index: 'reguser', width: 60, align:'center' } ], // 서버에서받은데이터설정 jsonreader: { repeatitems: false, // 서버에서받은 data와 Grid 상의 column 순서를맞출것인지? root:'rows', // 서버의결과내용에서데이터를읽어오는기준점 page:'page', // 현재페이지 currentpage total:'total', // 총페이지수 totalpage records:'records', // 보여지는데이터갯수 ( 레코드 ) totalrecord id:'id' // 키값, 꼭화면전체에서겹치는값이없는 column을설정할것, 안그러면에러발생 }, // 페이징처리에관련된파라미터등 컬럼명 컬럼양식 79 / 94

81 4.10 jqgrid 구현 그리드화면소스 4/6 4. jsonview 연동 nestsamplegrid.jsp 파일 JavaScript 부분 ( 해당화면에서만사용하는 JavaScript 는 HTML 태그아래에위치 ) pager: '#pager', //navigation bar가들어갈위치.. //toppager: true, // 상단에페이저추가, 밑에랑 2개가된다. pagerpos: 'center', // 페이징위치 pgbuttons: true, // 페이징버튼유무 pginput: true, // 페이징인풋입력유무 rownumbers:true, // 행번호표시 true/false, 전체 row의줄번호 ( 서버데이터는아니다..) 를보여줄까?? rownumwidth:40, // 줄번호 column의사이즈.. height:180, // 테이블의세로크기, Grid의높이 loadtext:'loading...',// 서버연동시보여주는문자열.. emptyrecords: "Nothing to display", rownum: 5, // 표시되는행의갯수, 초기화면에찍을 row 갯수.. rowlist: [5, 10, 15, 20], // 유저에의해서 row 갯수지정하는콤보박스문자열.. sortname: 'id', sortorder: "desc", viewrecords: true, // 페이징처리시전체행의개수표시, 총몇건중에서몇건을보고있다 등의문자열출력여부 gridview : true, // 선표시 true/false //loadonce: true, //DB 조회를하지않고현재불러온데이터로처리 ( 기본값 false) loadcomplete: function(data){ var couponusestats = data.datalist; alert( Grid Data 출력완료 couponusestats = " + data.records); }, loaderror:function(xhr,status,error){ alert(" 서버통신실패 >> " + error + ", 통신응답 = " + xhr.responsetext); }, onpaging:function(){ alert(" 페이징시작시함수작동 "); }, 만약 loadcomplete 를타고들어갔다면, 서버에요청은제대로됐지만, json 이잘못됐을것이고, loaderror 는서버를못탄것이다. 80 / 94

82 4.10 jqgrid 구현 그리드화면소스 5/6 4. jsonview 연동 nestsamplegrid.jsp 파일 JavaScript 부분 ( 해당화면에서만사용하는 JavaScript 는 HTML 태그아래에위치 ) }); onselectrow:function(id){ if(id && id!= lastsel){ $('#list').jqgrid('restorerow',lastsel); $('#list').jqgrid('editrow',id,true); lastsel=id; } }, editurl:"<c:url value='/sample/nestsamplegridupdate.do'/>", //edit 버튼을눌렀을때적용되는 URL( 미구현 ) caption: "Nest Grid Caption" // 테이블제목, title 문자열.. }).navgrid('#pager',{edit:true,add:true,del:false,search:true,refresh:true,position:'left'}, // pager area에버튼추가 {}, // edit 버튼옵션 {}, // add 버튼옵션 {}, // del 버튼옵션 { caption:'mysearch',//dialog title Find:'Search', Reset:'Reset', groupops:[{op:"and",text:"all"},{op:"or",text:"any"}], multiplesearch:true, // 여러컬럼검색가능 multiplegroup:true // 여러조건을조합가능하게.. }, {}); //jqgrid의하단의추가, 수정, 삭제, 검색, 조회버튼들의활성화여부 81 / 94

83 4.10 jqgrid 구현 그리드화면소스 6/6 4. jsonview 연동 nestsamplegrid.jsp 파일 JavaScript 부분 ( 해당화면에서만사용하는 JavaScript 는 HTML 태그아래에위치 ) function fn_egov_selectgrid() { // 검색버튼을눌렀을때처리방법 $("#list").cleargriddata(); // 이전데이터삭제 jquery('#list').jqgrid('setgridparam', { postdata: { searchcondition:$("#searchcondition").val(), searchkeyword:$("#searchkeyword").val() }, datatype:"json" }).trigger("reloadgrid"); } </script> </body> </html> 82 / 94

84 4.11 Grid 안에서검색 4. jsonview 연동 Paging Navigation 에서제공하는 Search 버튼은 Grid Data 에서검색기능을제공 Search 버튼과검색팝업 83 / 94

85 4.12 재검색 4. jsonview 연동 jqgrid 로데이터를한번뿌려준후다시호출하면반응이없다. jqgrid 는 Library 소스안에기존그리드가존재하면멈추는로직이있기때문에, 동일그리드에데이터 를다시뿌려주기위해서는먼저이전데이터를삭제해주어야한다. 소스내용 /js/jquery.jqgrid.src.js $.fn.jqgrid = function( pin ) { if (typeof pin == 'string') { var fn = $.jgrid.getaccessor($.fn.jqgrid,pin); if (!fn) { throw ("jqgrid - No such method: " + pin); } var args = $.makearray(arguments).slice(1); return fn.apply(this,args); } return this.each( function() { if(this.grid) {return;} << 기존에그리드가존재하면팅김 } var p = $.extend(true,{ url:,. $("#list").cleargriddata(); // 이전데이터삭제 84 / 94

86 5. 기타 85 / 94

87 5.1 브라우저별특징 5. 기타 웹브라우저의대표제품은 Crome, Opera, Firefox, Safari, IE 가있다 주요브라우저들이모두 HTML5 를앞다투어지원하면서 Active-X 구현기능들을 JavaScript 로대체 과거 JavaScript 는디버깅의어려움으로개발자들이꺼려하는언어.( 막강한기능의개발자도구제공 ) 2012 년 4 월 2013 년 1 월 86 / 94

88 5.2 개발자도구사용법 5. 기타 Crome 브라우저에서디버깅방법및개발자도구활용 jquery 로애플리케이션을개발할때에디버깅하는방법들이야파이어폭스를사용하기는하는데, 여기에보면각종플러그인들이업데이트되고있다. 개발자도구 > source 에서 break point 사용가능 : step 넘어가는아이콘은점에오른쪽회전화 살표 Consolelog 에러표시옆파일명을클릭하면해당소스로자동이동한다. 개발자도구 Network 창에서 XHR 을보면 Ajax 통신에대한결과를확인할수있다. (Headers 와 Response 영역을확인한다.) File 을못불러와서에러가날경우개발자도구의 consolelog 와 Network 에서확인할수있다. UI 소스변경이브라우저에반영이안될때는 Cache 를의심해봐라. ( 브라우저의 Cache 파일을지 운후다시테스트해본다.) 파일 import 구문의변경사항이브라우저에반영이안될때는파일명을바꿔봐라. (jquery-ui custom -> js/lib/jquery.ui/css/jquery.ui custom.css) 브라우저별개발자도구실행단축키 크롬 F12 Firefox Shift+F2 IE F12 Opera Ctrl+Shift+O 87 / 94

89 5.3 DOM 계층구조를이용한요소접근하기 5. 기타 Firefox 브라우저의 3D 영상으로본 DOM 계층구조 (Tilt 기능 ) DOM 계층은 html 문서내에서부모 - 자식관계, 형제관계, 조상 - 후손관계를정의한것 88 / 94

90 5.4 jqgrid 5. 기타 Grid 활성 / 비활성화 Column 숨기기, 활성 / 비활성화 틀고정 Row 이동 Paging Multi Row Select 컬럼 & Object 연동 멀티헤더 /Row 소계 / 합계 Validation Mask Size, 행추가삭제 Record Data CRUD Excel 연동 89 / 94

91 5.5 jqchart 5. 기타 상용 Software 90 / 94

92 5.6 jstree 5. 기타 Currently supported browsers are: Internet Explorer 6+ * Mozilla Firefox 2+ Safari 3+ Opera 9+ Google Chrome 91 / 94

93 5.7 jqplot 5. 기타 jqplot has been tested on IE 7, IE 8, Firefox, Safari, and Opera. You can see jqplot in action on the tests & examples page. 92 / 94