'Developer/JavaScript' 카테고리의 글 목록 (2 Page)

자바스트립트 객체

ㆍ설명

▶ 객체(object)란?
자바스크립트에서 객체란 브라우저창,이미지,입력양식등...웹문서속의 각각의 모든
항목들을 말한다고 보면 되겠습니다

▶ 속성이란?
각 객체가 지닌 특성을 말합니다.
사용법 : 객체명.속성="속성값";
예) window.status="반가워여"; --> 브라우저 상태바에 반가워여라는 글자를 보입니다.

▶ 메서드란?
각 객체에게 어떤 동작을하도록하는 명령어라고보면 됩니다.
예를들어 window객체의 close라는 메서드는 브라우저창에게 창을닫도록 명령합니다.
사용법 : 객체명.메서드(인자값);
예) window.alert("경고한다.밥무라"); --> 경고한다.밥무라라는 메세지로경고창을띄웁니다

▶ 자바스크립트와 DHTML
객 체의 메서드나 속성중에서 근래에는 잘쓰여지지 않는 것들도 있습니다, style을 이용한 다이나믹html이 대체되어 쓰이는 경우가 많이 있습니다. 예로 문서의 배경 색깔을 동적으로 변경시키고자 할때 예전에는 document.bgColor = "#ff00ff"; 이렇게 썼으나 요즘은 document.body.style.background = "#ff00ff"; 로 쓰는경우도 많이 볼 수 있습니다.

window 객체의 속성과 메서드

속성
closed - 브라우저 창이 닫혔는지를 체크
opener - 현재창이 새창일경우 현재창을열개한 브라우저창
status - 브라우저의 상태표시줄의 정보
screenLeft - 윈도우화면 좌측상단모서리에서 브라우저 상단까지의 x축 거리
screenTop - 윈도우화면 좌측상단모서리에서 브라우저 상단까지의 y축 거리

메서드
alert - 경고창을 띄운다
blur - 현재창을 최소화한다.포커스를 잃게 한다
focus - 현재창에 포커스를 준다,활성화 시킨다.
moveTo(x,y) - x,y좌표로 브라우저를 이동시킨다
moveBy(dx,dy) - 현재위치에서 dx,dy만큼 창을 이동
resizeTo(w,h) - 브라우저창 크기를 w(폭),h(높이)로 변경한다
resizeBy(dx,dy) - 브라우저창 크기를 dx,dy만큼 변경한다
open - 새창을 연다
close - 브라우저를 닫는다
print - 문서를 인쇄한다
setTimeout - 특정시간후에 특정작업을 호출합니다
clearTimeout - setTimeout으로 설정한 Timer를 해제합니다

document 객체의 속성과 메서드

속성
title - 문서의 제목
lastModified - 마지막으로 수정된 날짜
bgColor - 문서의 배경색
fgColor - 문서의 글자색
linkColor - 링크의 색상
alinkColor - 링크 클릭시의 색상
vlinkColor - 방문했던 링크의 색상
forms - 문서에 여러개의 폼이 있을경우 각폼들은 폼이름대신 document.forms[index]으로 접근할수있습니다. index는 0부터시작합니다.
links - 문서에서의 a href태그들의 정보를 가진 콜렉션
images - 문서에서의 모든 img태그들의 정보를 가짐
applets - 문서에서 여러개의 자바애플릿을 사용했을경우 모든애플릿들의 콜렉션
embeds - 문서에서 embed태그의 콜렉션

메서드
write - 문서에 내용쓰기
writeln - 문서에 줄바꿈을 포함한 내용쓰기

screen 객체의 속성

속성
width - 시스템 스크린의 폭(픽셀)
height - 시스템 스크린의 높이(픽셀)
availWidth - 시스템 스크린중 브라우저의 문서영역 폭
availHeight - 시스템 스크린중 브라우저의 문서영역 높이

navigator 객체의 속성과 메서드

속성
userAgent - 브라우저 전체정보
ex) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
appCodeName - 브라우저 CodeName
ex) Mozilla
appVersion - 브라우저 Version
ex) 4.0 (compatible; MSIE 6.0; Windows NT 5.0)
appName - 브라우저 이름
ex)Microsoft Internet Explorer
cookieEnabled - 브라우저 쿠키이용 가능여부
반환값 : true/false

메서드
javaEnabled - 브라우저의 자바이용가능여부
반환값 : true/false

history 객체의 속성과 메서드

속성
length history - 목록(방문한사이트목록)의 개수

메서드
go(숫자) - 지정숫자만큼 사이트이동 ex) go(2) 앞으로 2번째로 이동
back - 현재사이트 기준에서 이전사이트로 이동
forward - 현재사이트 기준에서 다음사이트로 이동

Event 객체의 속성

속성
keyCode - 이벤트를 일으킨 키보드의 키코드값
altKey - altKey를 눌렀는지의 여부
ctrlKey - ctrlKey를 눌렀는지의 여부
shiftKey - shiftKey를 눌렀는지의 여부
button - 마우스 오른쪽버튼을 눌렀는지 왼쪽버튼을 눌렀는지의 여부
clientX - 마우스 클릭시 브라우저기준의 x축거리
clientY - 마우스 클릭시 브라우저기준의 y축거리
srcElement - 이벤트가 일어난 엘리먼트

Form 객체의 속성

input type="text" - 각값은 document.form이름.엘리먼트이름.value 로 접근할수 있다
input type="password"
input type="checkbox" - 어떤 값이 선택되었는지는 루프를 돌며 checked속성이 true인지 false인지로 체크할 수 있다
input type="radio"
input type="file" - 파일업로드를 위한 객체로서 파일값이 변할때 onChange이벤트 핸들러를 사용한다
input type="button" - submit이나 reset버튼의 제한된 기능에 다른여러기능을 추가적으로 스크립트로 제어할 때는 input type="button"을 쓰고 onClick이벤트 핸들러를 사용한다
input type="submit" - 폼을 전송한다
input type="reset" - 폼을 초기상태로 reset한다
select - 선택값은 document.forms이름.엘리먼트이름.value로접근할 수 있습니다

속성
disabled - 버튼이나 셀렉트박스등을 클릭 선택하지 못하게 합니다
readonly - 텍스트 박스의 내용을 읽기 전용으로 합니다

Date 객체의 메서드

▶ 특징
다 른 객체와 달리 new연산자와 생성자 함수 Date()를 사용해서 객체인스턴스를 생성한후 그메서드들을 이용할수있다. 사실 생성자함수에는 몇가지유형 인자를 가지는 유형이 있으나 인자없는 단순한 Date(); 함수만으로도 충분하다 ..다른 인자를 가지는 생성자들까지 공부할려면 이야기주제는 자바스크립트라기보다 자바에 가까와 질듯하다...

메서드
getTime - 1970년 1월1일 오전0시0분0초로 부터 현재까지의 시간을 m초로 반환한다
getYear - 현재의 년도를 반환한다
getMonth - 현재의 월을 반환한다 (1월:0 2월:1...)
getDate - 날짜(1~31)를 반환한다
getHours - 현재의 시간을 반환한다 (5시 --> 17)
getMinutes - 현재의 분을 반환한다
getSeconds - 현재의 초를 반환한다
getDay - 요일(0:일요일 1:월요일)에 대한 숫자를 반환한다

출처: http://kapi.egloos.com/274248

'Developer > JavaScript' 카테고리의 다른 글

페이지 직접생성 팝업 (0)	2007.05.03
문자열(value)이 한글인지 아닌지를 체크 (0)	2007.05.02
SELECT Element간 ITEM이동 (0)	2007.05.02

'Developer > JavaScript' 카테고리의 다른 글

자바스트립트 객체 (0)	2007.05.02
SELECT Element간 ITEM이동 (0)	2007.05.02
HTML에서의 progress bar Loading표현 (0)	2007.05.02

/*

* function Name:

* ListData_chk

*

* Description:

* 두 SELECT Element (dblist_all & dblist_dir)의 item을 교환할 수 있는 스크립트

* Parameter:

* mode: add와 del을 주어서 두 SELECT Element간의 이동 방향을 명시함.

* add: ←로 데이터 이동

* del: →로 데이터 이동

*

* Event:

* onClick = "ListData_chk('add')" & onClick = "ListData_chk('del')"

*

* Useful:

* 리스트박스(SELECT Element)는 2개이며 둘 다 다중선택(multiple)을 지원한다.

* 따라서 HTML소스는 다음의 형태를 취한다.

* <tr>

* <td><select name="dblist_all" size="10" multiple>...</select></td>

* <td><a href=# onClick = "ListData_chk('add')">←</a><br>

* <a href=# onClick = "ListData_chk('del')">→</a></td>

* <td><select name="dblist_dir" size="10" multiple>...</select></td>

* </tr>

*

* Bug report:

* 2005.08.30:

* 새로운 노드의 생성까지 만들어놓았으나 현재 병합하지 않음.

* (블로그 포스트 http://blog.naver.com/jujac/20015976816 참고)

*/

function ListData_chk(mode) {
var total = MM_findObj('lbl_totaldb_all');
var aryTempSourceOptions = new Array();
var aryTempRecOptions = new Array();
var x=0, y=0;

if(mode=="add") {
var odb = document.oform2['dblist_all'];
var viewdb = document.oform2['dblist_dir'];
} else {
var odb = document.oform2['dblist_dir'];
var viewdb = document.oform2['dblist_all'];
}

if(odb.selectedIndex == -1) {
alert("DB를 선택하지 않았습니다.");
return false;
}

for(var i = 0; i < odb.length; i++) {
var objTargetValues = new Object();
objTargetValues.text = odb.options[i].text;
objTargetValues.value = odb.options[i].value;

if(odb.options[i].selected) {
aryTempSourceOptions[x++] = objTargetValues;
} else {
aryTempRecOptions[y++] = objTargetValues;
}
}

if(x) {
if(viewdb.length) vsize = (viewdb.options[0].text)? viewdb.length : 0;
else vsize = viewdb.length;

asize = aryTempSourceOptions.length;
viewdb.length = vsize + aryTempSourceOptions.length;
for (var i=0; i<vsize; i++) {
viewdb.options[i].selected = false;
}
for (var i=vsize, j=0; i<viewdb.length; i++, j++) {
viewdb.options[i].text = aryTempSourceOptions[j].text;
viewdb.options[i].value = aryTempSourceOptions[j].value;
viewdb.options[i].selected = false;
}

odb.length = aryTempRecOptions.length;
for (var i = 0; i <odb.length; i++) {
odb.options[i].text = aryTempRecOptions[i].text;
odb.options[i].value = aryTempRecOptions[i].value;
odb.options[i].selected = false;
}

total.innerHTML = "Total: " + viewdb.length;
}
viewdb.options[viewdb.length-1].selected = true;
}

'Developer > JavaScript' 카테고리의 다른 글

문자열(value)이 한글인지 아닌지를 체크 (0)	2007.05.02
HTML에서의 progress bar Loading표현 (0)	2007.05.02
이메일 주소 검증 (0)	2007.05.02

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>::Libmeta - Searching...</title>

var maxLength = 400;

/*

* 문서내의 progressBar란 객체를 초기화하여 증가를 준비한다.

* 그리고 progressBar객체를 (parameter t의 값*10)만큼의 시간동안 주기적으로

* growUp()함수를 실행한다.

*/

function execute(t) {
totalTime = t*10;
barSize=0;
   document.all.progressBar.style.border = '1 solid black';
   document.all.progressBar.style.height = '8';
   moveNow = setInterval("growUp()",totalTime);
}

/*

* 문서내의 progressBar객체를 너비 +10씩 최종 maxLength에 지정한 길이까지 증가시킨다.

*/

function growUp() {
barSize += eval(10);
document.all.progressBar.style.width = barSize;
if(barSize >= maxLength) {
clearInterval(moveNow);
}
}

//-->
</script>
</head>

<table cellpadding=0 cellspacing=0 width=400>
<td><div align=center style="font:9pt dotum; color:dodgerblue;">검색중입니다...</div><br>

</body>
</html>

<!------------------------------------------------------------------

시간 t에 따른 로딩을 표시하기 위한 예제인데..

사실 실제 데이터와의 실시간적 매칭이 아닌 눈가림용이란걸 알수 있다.ㅋㅋ

다른응용도 가능할 것이며.. setInterval의 예제로 생각해도 좋을 듯..?

------------------------------------------------------------------->

'Developer > JavaScript' 카테고리의 다른 글

SELECT Element간 ITEM이동 (0)	2007.05.02
이메일 주소 검증 (0)	2007.05.02
How to use multiple window.onload events with external scripts (0)	2007.05.02

'Developer > JavaScript' 카테고리의 다른 글

HTML에서의 progress bar Loading표현 (0)	2007.05.02
How to use multiple window.onload events with external scripts (0)	2007.05.02
javascript cookie (0)	2007.05.02

How to use multiple window.onload events with external scripts

faq216-4862

Posted: 19 Feb 04 (Edited 20 Sep 05)

Scripts probably conflict most often when using the onLoad event. Have you ever used code like this?

window.onload=myInitFunction;

This is fine if you're sure myInitFunction() will be the only function that needs to be called when the page is loaded. But how can you know for sure? What if a page that calls your script has code in its <BODY onload="..."> ? What if there's another external script on the page that also assigns a function to the onload event? The code above will overwrite what was there with your code and that's not good.

Use the function below to add your function without replacing what is already in the onLoad.

CODE

Example:

CODE

addOnloadEvent(myFunctionName);

// Or to pass arguments

addOnloadEvent(function(){ myFunctionName('myArgument') });

'Developer > JavaScript' 카테고리의 다른 글

이메일 주소 검증 (0)	2007.05.02
javascript cookie (0)	2007.05.02
문자열이 ASCII 코드로만 이루어졌는지 체크하는 함수 (0)	2007.04.26

function set ()
{
var expdate = new Date();
expdate.setMonth(expdate.getMonth()+6);
alert("setting cookie \""+form1.txtName.value+"\" to \""+form1.txtValue.value+"\"");
setCookie(form1.txtName.value, form1.txtValue.value, expdate);
}

function get ()
{
alert("getting cookie \""+form1.txtName.value+"\"");
var c = getCookie(form1.txtName.value);
alert( "cookie = "+c );

form1.txtValue.value = c;
}

function getCookie (sCookieName)
{
var sName=sCookieName+"=", ichSt, ichEnd;
var sCookie=document.cookie;

if ( sCookie.length && ( -1 != (ichSt = sCookie.indexOf(sName)) ) )
{
if (-1 == ( ichEnd = sCookie.indexOf(";",ichSt+sName.length) ) )
ichEnd = sCookie.length;
return unescape(sCookie.substring(ichSt+sName.length,ichEnd));
}

return null;
}

function setCookie (sName, vValue)
{
var argv = setCookie.arguments, argc = setCookie.arguments.length;
var sExpDate = (argc > 2) ? "; expires="+argv[2].toGMTString() : "";
var sPath = (argc > 3) ? "; path="+argv[3] : "";
var sDomain = (argc > 4) ? "; domain="+argv[4] : "";
var sSecure = (argc > 5) && argv[5] ? "; secure" : "";
document.cookie = sName + "=" + escape(vValue,0) + sExpDate + sPath + sDomain + sSecure + ";";
}

function deleteCookie (sName)
{
document.cookie = sName + "=" + getCookie(sName) + "; expires=" + (new Date()).toGMTString() + ";";
}

'Developer > JavaScript' 카테고리의 다른 글

How to use multiple window.onload events with external scripts (0)	2007.05.02
문자열이 ASCII 코드로만 이루어졌는지 체크하는 함수 (0)	2007.04.26
자바스크립트 단축키 핸들러 - shortcuts.js (0)	2007.04.20

function isASCII($str)
{
if( preg_match('/^[\\x{00}-\\x{7F}]+$/u', $str) ){
return true;
}else{
return false;
}
}

표현식중 뒤에 나오는 패턴 변경자 u 는 패턴 문자열을 UTF-8으로 취급한다.
아래 보다 자세한 패턴 변경자를 참고!!

ASCII CODE TABLE 참고

바이너리 제로 문자(0x00)는 목표 문자열에서는 지원하지만, 패턴 문자열에서는 허용하지 않습니다. 패턴은 제로로 종료하는 보통의 C 문자열로 처리하기 때문입니다. 패턴에서 바이너리 제로를 표현하기 위해서는 이스케이프 시퀀스 "\\x00"로 사용할 수 있습니다.

패턴 변경자(Pattern Modifiers)

패턴 변경자 -- 정규표현식 패턴에 존재하는 변경자의 설명

Description

아래 목록은 현재 존재하는 PCRE 변경자입니다.
괄호 안의 이름은 각 변경자에 대한 PCRE 내부의 이름입니다.

i (PCRE_CASELESS)

이 변경자를 지정하면, 패턴의 문자는 대문자와 소문자를 구별하지 않습니다.

m (PCRE_MULTILINE)

기본적으로, PCRE는 주어진 문자열을 하나의 "줄"로 취급합니다. (실제로 몇개의 라인을 가지더라도) "줄 시작" 메타문자(^)는 문자열의 처음만을 인식하며, "줄 끝" 메타문자($)는 문자열의 끝이나 (D 변경자가 지정되지 않는 한) 마지막 뉴라인의 직전만을 인식합니다. 이는 펄과 같습니다.

이 변경자를 지정하면, "줄 시작"과 "줄 끝"은 주어진 문자열의 모든 뉴라인 직후와 직전을 인식합니다. respectively, as well as at the very start and end. 이는 펄의 /m 변경자와 동일합니다. 주어진 문자열에 "\n" 문자가 존재하지 않거나 ^나 $ 패턴이 일어나지 않으면 이 변경자는 아무런 효과가 없습니다.

s (PCRE_DOTALL)

이 변경자가 지정되면, 패턴의 점 메타문자는 뉴라인을 포함하는 모든 문자를 인식합니다. 지정하지 않으면, 뉴라인은 제외됩니다. 이 변경자는 펄의 /s 변경자와 동일합니다. [^a]와 같은 부정클래스는 이 변경자에 관계 없이 항상 뉴라인 문자를 포함합니다.

x (PCRE_EXTENDED)

이 변경자가 지정되면, 공백 문자는 이스케이프 되거나 문자 클래스 안에 있을 경우를 제외하고, 완전히 무시합니다. 문자 클래스 밖에서 이스케이프 되지 않은 # 사이와 뉴라인 문자 다음의 문자도 무시합니다. 이는 펄의 /x 변경자와 같고, 복잡한 패턴 안에 코멘트를 사용할 수 있게 합니다. 그러나 이는 데이터 문자에만 해당하는 점에 주의하십시오. 공백 문자는 패턴의 특별한 문자 시퀀스 안에는 존재할 수 없습니다. 예를 들면, 조건 서브 패턴을 나타내는 (?( 시퀀스에는 나와서는 안됩니다.

e

이 변경자를 지정하면, preg_replace()는 변경할 문자열을 PHP 코드로 처리하고, 그 결과를 검색된 문자열의 이용하여 일반적인 치환을 합니다.

preg_replace()만 이 변경자를 사용합니다; 다른 PCRE 함수는 무시합니다.

참고: 이 변경자는 PHP 3에서는 사용할 수 없습니다.

A (PCRE_ANCHORED)

이 변경자를 지정하면, 패턴을 강제적으로 "고정"합니다. 이는 ("주어진 문자열"에서) 검색된 문자열의 시작에만 매치도록 강제합니다. 패턴 자체에서 특정한 구조를 가지게 하는, 펄에서는 유일한 방법으로 같은 효과를 얻을 수 있습니다.

D (PCRE_DOLLAR_ENDONLY)

이 변경자가 설정되면, 패턴의 달러($) 메타문자는 주어진 문자열의 마지막에만 대응합니다. 이 변경자 없이는, 달러는 마지막 문자가 뉴라인일 경우에는 바로 직전의 문자에도 매칭합니다. (마지막이 아닌 뉴라인은 제외합니다) 이 변경자는 m 변경자가 지정되었을때는 무시됩니다. 펄에는 이 변경자가 존재하지 않습니다.

S

패턴이 여러번 이용되면, 매칭에 걸리는 시간을 절약하기 위해서 분석에 더 많은 시간을 들일 가치가 있습니다. 이 변경자를 지정하면, 추가 분석을 행합니다. 현 시점에서, 패턴의 분석은 하나의 고정된 시작 문자를 가지지 않는 비고정 패턴에만 유용합니다.

U (PCRE_UNGREEDY)

이 변경자는 수량 지시의 "greediness"를 뒤집습니다. 그리하여 기본값으로 not greedy하게 합니다. 하지만 "?"가 붙으면 greedy하게 됩니다. 이는 펄과 호환되지 않습니다. 패턴 안에서 (?U) 변경자 설정으로 지정할 수 있습니다.

X (PCRE_EXTRA)

이 변경자는 펄과 호환되지 않는 PCRE의 추가 기능을 사용하게 합니다. 패턴의 문자와 결합된 백슬래쉬가 특별한 의미를 지니지 않을 경우에 에러를 발생시켜서, 차후에 추가 기능을 위해 예약해둡니다. 기본적으로 펄은, 문자와 결합된 백슬래쉬가 특별한 의미를 지니지 않을 경우에는 글자로 취급합니다. 이 변경자는 다른 기능을 제어하지 않습니다.

u (PCRE_UTF8)

이 변경자는 펄과 호환되지 않는 PCRE의 추가 기능을 사용하게 합니다. 패턴 문자열을 UTF-8으로 취급합니다. 유닉스에서는 PHP 4.1.0부터, win32에서는 PHP 4.2.3부터 사용할 수 있습니다.

'Developer > JavaScript' 카테고리의 다른 글

javascript cookie (0)	2007.05.02
자바스크립트 단축키 핸들러 - shortcuts.js (0)	2007.04.20
Prototype base multi-Selection API (0)	2007.04.18

Binny V A씨는 많은 자바스크립트 라이브러리가 있음에도 단축키를 지원하는 라이브러리는 발견하지 못했다면서 구글의 웹 애플리케이션인 Gmail이나 Reader처럼 보다 쉽게 웹 애플리케이션에 단축키를 사용할 수 있도록 함수를 만들어 배포했습니다.

아래의 예제를 보면 첫번째 아규먼트로 키를 지정하고, 두번째로 콜백 함수를 넣습니다. 마지막 세번째에는 옵션을 지정할 수 있습니다. 지원 되는 키에는 "Ctrl+X"와 같은 형식으로 작성하여 매우 직관적이며 Tab, Space, Return, Enter, Backspace, Scroll_lock, Caps_lock, Num_lock, Pause, Insert, Home, Delete, End, Page_up, Page_down, Left, Up, Right, Down, F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12 키를 지원합니다.

옵션으로는 'type'에 'keydown','keyup','keypress' 이벤트를 변경할 수 있으며 'target'에 이벤트가 작동할 DOM단위의 영역을 설정할 수 있고 'propagate' 증식옵션(event.stop 또는 return false?)을 Boolean형태로 사용할 수 있습니다.

다운로드 자바스크립트 : shortcuts.js

예제 코드

shortcut("Ctrl+Shift+X",function() {


    alert("Hi there!");

});



shortcut("Ctrl+B",function() {

    alert("The bookmarks of your browser will show up after this alert...");

},{

    'type':'keydown',

    'propagate':true,

    'target':document


});

'Developer > JavaScript' 카테고리의 다른 글

문자열이 ASCII 코드로만 이루어졌는지 체크하는 함수 (0)	2007.04.26
Prototype base multi-Selection API (0)	2007.04.18
Emprise JavaScript Charting with Canvas (0)	2007.04.11

자바스크립트로 구현한 Prototype.js 프레임웍 기반 다중 선택기 API를 소개합니다.(API라고 하기에는 좀 부끄럽군요) 최초 올라로그 오픈베타 프로젝트에 사용되었습니다. 데스크탑 애플리케이션 못지않은 UI를 구현하겠다는 욕심에 조금은 억척 스럽게 만들어진 녀석입니다. 유저가 익숙하지 않다는 이유로 존속여부는 희박하지만, 라이브러리 형태로 공개하고 계속 발전시켜 나가볼 생각입니다. 조금더 다듬고 기능을 확장하여 여러환경에 적용할 수 있도록 손보았습니다. 웹 특성상 컨트롤 키를 조합하는 방식이 아닌 기본으로 활성화 되어 있는 상태입니다.(추가 예정)

download JS : http://firejune.com/javascripts/multiselect.js
download CSS : http://firejune.com/stylesheets/multiselect.css

사용방법

적용대상이 되는 엘리먼트는 리스트 아이템(UL)의 부모이며, 부모 엘리먼트는 다중선택 활성화 영역(parent)이 됩니다. ~~리스트 아이탬은 고유한 ID값를 지니고 있어야 합니다.~~(수정됨) 드래그 사용여부와 스타일 시트에서 지정한 스타일을 별도로 설정 할 수도 있습니다, 자세한 사용방법은 아래와 같습니다.(슬라이드 바는 포지션 리셋 테스트용 입니다.)

new MultiSelect('testElement');



// CSS 시각효과 설정

new MultiSelect('testElement', {

   dragSelect: false, // 드래그 사용 여부


   rectangleCN: 'MS-rectangle', // 선택영역 스타일 이름

   selectCN: 'MS-select',  // 선택된 아이탬 스타일 이름

   unselectCN: 'MS-unselect', // 선택되지 않은 아이탬 스타일 이름

}});



// 예제에 사용한 코드

var selector = new MultiSelect('testElement', {

   // 변화가 생기면 이벤트 발생


   onChange: function(){

   var debug = $('debug2'), point = '';

   debug .innerHTML = 'Selected : ';

   selector.items.each(function(a){

      if(a.success) {

        debug .innerHTML += point + a.element.innerHTML;


        point = ', ';

      }

   });

}});



selector.setOffset(true); // 포지션 다시 계산하기

selector.selectAll(true); // 모두 선택하기

selector.selectAll(false); // 모두 선택 해제하기

추후 추가될 기능

- 윈도우 컨벤션을 따르는 UI 모드 추가(컨트롤 키 조합)
- 메모리 릭현상 제거
- 더블 클릭 이벤트 추가
- ~~아이템의 ID값 없이도 사용할 수 있도록 수정~~(수정됨)
- form 엘리먼트 지원

출처 : FireJune's Blog

'Developer > JavaScript' 카테고리의 다른 글

문자열이 ASCII 코드로만 이루어졌는지 체크하는 함수 (0)	2007.04.26
자바스크립트 단축키 핸들러 - shortcuts.js (0)	2007.04.20
Emprise JavaScript Charting with Canvas (0)	2007.04.11

http://www.ejschart.com/index.php

Description: http://ajaxian.com/archives/emprise-jav ··· h-canvas

Jacob Miller and his team have created a rich charting library called EJSChart.

EJSChart is canvas-based with many interactive features such as zooming and auto scaling. The product has been in development for some time but the web site has just been established.

It features interactivity, axis scaling, zooming, scrolling, ajax-driven data, and much more.

'Developer > JavaScript' 카테고리의 다른 글

문자열이 ASCII 코드로만 이루어졌는지 체크하는 함수 (0)	2007.04.26
자바스크립트 단축키 핸들러 - shortcuts.js (0)	2007.04.20
Prototype base multi-Selection API (0)	2007.04.18

margalog