WebSquare5에 jquerySupport 기능을 추가하여 jQuery를 사용할 수 있고, jQuery가 제공하는 API를 이용하여 WebSquare5 객체에 접근할 수 있습니다.

jQuerySupport 추가

특정 버전의 jQuerySupport를 사용할 경우, 아래와 같이 추가하십시오.

스튜디오에서에서 WebSquare Configure 폴더에 있는 client.config.xml 파일을 클릭합니다.

<jQuerySupport> 부분에 사용하려는 jQuery 버전을 명시합니다. (명시하지 않을 경우 기본값은 jquery-1.10.2입니다.)

$r_title(jQuerySupport 추가 예시)
<jQuerySupport src="externalJS/jquery/jquery-1.10.2.min.js"/>

Selector

Selector란?

HTML 문서의 DOM 요소를 선택하는 기능으로 복잡한 HTML 문서에서도 DOM 요소를 쉽게 찾도록 고안되었습니다

$( “#input1:wq” )에서, $()는 jQuery 메소드이며 #input1:wq는 selector입니다. ":wq"는 WebSquare5로 그려진 DOM 객체만 선택하기 위한 필터입니다.

ID로 선택할 때

"#" + ID + ":wq"

(예) $(“#input1:wq”);

Class로 선택할 때

"." + Class + ":wq"

(예) $(".w2trigger:wq")

WebSquare5 컴포넌트 이름으로 선택할 때

.wq(컴포넌트 이름)

(예) $(".wq(trigger)")

API

wq()

기능

DOM 객체를 WebSquare5 객체로 변환 후 배열 형태로 반환합니다.

$(“:wq(textbox)”).wq();

컴포넌트명이 textbox이고 WebSquare5로 그려진 DOM객체를 WebSquare 객체로 변환하여 배열 형태로 반환합니다.

$("#input1:wq").wq()

ID가 input1이고 WebSquare5로 그려진 DOM 객체를 WebSquare 객체로 변환하여 배열 형태로 반환합니다.

$(“#input1:wq”).wq(“setStyle”, “background-color”, “orange”);

ID가 input1이고 WebSquare5로 그려진 DOM 객체에 대해 setStyle API를 실행합니다.

$("#textbox2:wq").wq("setValue", "AAA").wq("setStyle", "background-color", "orange");

ID가 textbox2이고 WebSquare5로 그려진 DOM 객체에 대해 setValue 와 setStyle API를 연속 실행합니다.

$r_title(WebSquare5 객체 반환)
[WebSquare.uiplugin.textbox]

jq()

기능

WebSquare5 객체 배열을 jQuery 배열로 변환하여 반환합니다.

$(“:wq(textbox)”).wq().jq();

컴포넌트명이 textbox인 WebSquare5 객체만 선택하여,

WebSquare5 객체 배열을 반환한 후,

.jq() API 를 통해 WebSquare5 객체 배열을 DOM 객체를 담은 jQuery 배열로 변환합니다.

$("#textbox5:wq").wq().jq().css( "background", "yellow" );

ID가 textbox5인 WebSquare5 객체만 선택하여,

WebSquare5 객체 배열을 반환한 후,

jq() API를 통해 WebSquare5 객체 배열을 DOM 객체를 담은 jQuery 배열로 변환한 후,

"background" CSS를 적용합니다.

$r_title(jQuery 배열 반환)
[
<div id="textbox8" style="position: absolute ;left:0px;top:0px;width:55px;height:31px;font-size: 30px;" class="w2textbox ">12</div>
]

get(wqAPI, value)

기능

연속해서 API를 사용하는 chaining을 종료하고, 선택된 WebSquare5 객체 중 0번째 객체에 wqAPI에 해당하는 함수를 실행한 후 그 결과를 리턴합니다.

$(":wq(textbox)").wq().get("getValue")

WebSquare5 컴포넌트명이 textbox인 DOM객체만 선택하여,

WebSquare5 객체의 배열로 반환하고,

반환된 WebSquare5 객체 중 0번째 객체에만 getValue 함수를 수행하여,

그 결과를 반환합니다.

$(":wq(group)").wq().get("addClass", "webSquare")

WebSquare5 컴포넌트명이 group인 DOM객체만 선택하여,

WebSquare5 객체의 배열로 반환하고,

반환된 WebSquare5 객체 중 0번째 객체에만 addClass 함수를 수행하여,

그 결과를 반환합니다.

each()

기능

인자로 받은 사용자 정의 함수를 선택된 모든 WebSquare5 객체에 대해 실행합니다. 사용자 정의 함수는 최대 두 개의 인자를 가질 수 있습니다.

$(":wq(input)").wq().each(function(index){ alert(index) })

$(":wq(input)").wq() 를 통해 WebSquare5 객체를 선택한 후,

선택된 n개의 객체에 대해 0부터 n-1까지의 index를 차례로 사용자 정의 함수 인자로 사용하여,

function(index){ alert(index) } 를 실행합니다.

$(":wq(textbox)").wq().each(function(i){this.setValue(i);})

$(":wq(textbox)").wq() 를 통해 WebSquare5 객체를 선택한 후,

선택된 n개의 객체에 대해 0부터 n-1까지의 index를 차례로 사용자 정의 함수 인자로 사용하여,

function(i){this.setValue(i);} 를 실행합니다.

$(":wq(input)").wq().each(function(index, _this){ alert(index + "번째" + _this.getValue());})

$(":wq(input)").wq() 를 통해 WebSquare5 객체를 선택한 후,

선택된 n개의 객체에 대해 0부터 n-1까지의 index를 첫번 째 인자로,

$(":wq(input)").wq().[index], 즉 해당 index의 WebSquare5 객체를 두번 째 인자로 사용하여,

function(index, _this){ alert(index + "번째" + _this.getValue())} 을 실행합니다.

map()

예제 1

기능

첫 번째 인자로 배열 또는 객체를 받아, 두 번째 인자로 받은 사용자 정의 함수를 실행합니다.

결과 값을 저장한 새로운 배열 요소를 반환합니다.

get API 와 마찬가지로 chaining을 종료합니다.

$("#input1").wq().map([1, 2, 3], function(value){return value*2});

첫 번째 인자가 배열이고, 두 번째 인자인 사용자 정의 함수의 인자가 하나인 경우입니다.

첫 번째 인자로 받은 배열 각각의 요소에 사용자 정의 함수를 실행하여 같은 크기의 새로운 배열을 리턴합니다.

두번째 인자인 사용자 정의 함수의 인자는 첫 번째 인자로 받은 배열의 각 index에 해당하는 값입니다.

$("#trigger3").wq().map([5, 4, 3, 2], function(value){return value-value});

위의 예제와 동일합니다.

$r_title(실행 결과)
function(value){return 1*2} 2
function(value){return 2*2} 4 // 결과를 배열로 리턴합니다.
function(value){return 3*2} 6

$r_title(실행 결과)
function(value){return 5-5} 0
function(value){return 4-4} 0 // 결과를 배열로 리턴합니다.
function(value){return 3-3} 0
function(value){return 2-2} 0

예제 2

$("#input1").wq().map([1, 2, 3], function(value, i){return value*3 + "은" + i + "번째"});

첫 번째 인자가 배열이고, 두 번째 인자인 사용자 정의 함수의 인자가 두 개인 경우입니다.

첫 번째 인자로 받은 배열 각각의 요소에 사용자 정의 함수를 실행하여 같은 크기의 새로운 배열을 리턴합니다.

두 번째 인자인 사용자 정의 함수의 인자들은 차례대로 첫 번째 인자로 받은 배열의 각 index에 해당하는 값과 해당 index입니다.

$r_title(실행 결과)
function(value , i ){return 3 + "은" + 0 + "번째"}} // "3은0번째",
function(value , i ){return 6 + "은" + 1 + "번째"}} // "6은1번째", 결과를 배열로 리턴합니다.
function(value , i ){return 9 + "은" + 2 + "번째"}} // "9은2번째"

$("#group3").wq().map([10 , 9], function(value , i){return value * i})

위의 예제에 대한 설명과 동일합니다.

$r_title(실행 결과)
function(value , i){return 10 * 0} // 0 결과를 배열로 리턴합니다.
function(value , i){return 9 * 1} // 9

예제 3

$("#input1").wq().map({a:1, b:2, c:3}, function(value){return value*2})

첫 번째 인자가 객체이고, 두 번째 인자인 사용자 정의 함수의 인자가 하나인 경우입니다.

첫 번째 인자로 받은 객체 각각의 요소에 두 번째 인자인 사용자 정의 함수를 실행하여 같은 크기의 새로운 배열을 리턴합니다.

사용자 정의 함수의 인자는 첫 번째 인자로 받은 객체의 각 index에 해당하는 값입니다.

$r_title(실행 결과)
function(value){return 1*2}) 2
function(value){return 2*2}) 4 // 결과를 배열로 리턴합니다.
function(value){return 3*2}) 6

예제 4

$("#input1").wq().map({a:1, b:2, c:3}, function(value, i){return value*2 + "은" + i + "번째"});

첫 번째 인자가 객체이고, 두 번째 인자인 사용자 정의 함수의 인자가 두 개인 경우입니다.

첫 번째 인자로 받은 객체 각각의 요소에 두 번째 인자인 사용자 정의 함수를 실행하여 같은 크기의 새로운 배열을 리턴합니다.

사용자 정의 함수의 인자는 차례로 첫 번째 인자로 받은 객체의 각 index에 해당하는 값과 해당 index입니다.

$r_title(실행 결과)
function(value, i){return 1*2 + "은" + a + "번째"} // "2은a번째" ,
function(value, i){return 2*2 + "은" + b + "번째"} // "4은b번째" , 결과를 배열로 리턴합니다.
function(value, i){return 3*2 + "은" + c + "번째"} // "6은c번째"

0. N/A

   번째 인자인 사용자 정의 함수의 인자는 첫 번째 인자로 받은 배열의 각 index에 해당하는 값입니다.