개체의 유지(persist) 데이터에 즐겨찾기 사이트를 가능하게한다.
|
script | object.style.behavior="url('#default#saveFavorite')"; |
|---|---|---|
| object.addBehavior("#default#saveFavorite"); | ||
| HTML | <ELEMENT style="behavior:url('#default#saveFavorite')" id=idVal> | |
| XML | <prefix:CustomTag id=idVal style="behavior:url('#default#saveFavorite')" /> |
| prefix | CustomTag과 연관된 XML namespace 접두어이다. HTML 태그에서 xmlns 애트리뷰트로 설정한다. |
| CustomTag | 작성자가 정의하여 사용하는 태그이다. |
| idVal | 개체을 대표하는 유일한 인식자 문자열이다. |
saveFavorite 비헤이버는 사용자가 페이지를 즐겨찾기 메뉴에 추가할 때 현재 페이지의 상태를 저장한다.
사용자가 그 페이지로 돌아오기 위해서 즐겨찾기 메뉴에 해당 즐겨찾기를 클릭하면 저장되었던 값이 회복(restore)된다.
saveFavorite 비헤이버는 모든 세션에서 각 개체의 userData 저장 중 하나를 사용하여 유지(persist)한다. 두 개체를 같은 애트리뷰트로 적용하려면 각 엘레멘트의 userData에 둘 다 유지된다. saveFavorite UserData 저장이 즐겨찾기.ini 파일에 저장되고, 그 파일에는 문서의 주소(URL)와 사용자 데이터(UserData) 저장을 포함한다, 문서가 단축키나 즐겨찾기 메뉴에서 로딩되면, 그 페이지를 갖는 브라우저가 닫혀있어도 그 파일로 부터 사용자 데이터(UserData) 저장 데이터가 로딩된다.
예를들어 한 페이지가 탄력적으로 여러 스타일로 업데이트된 경우, 이들 업데이트된 스타일들은 onsave 이벤트처리자로 저장되고 onload 이벤트로 로딩된다. 스타일값들은 애트리뷰트 값들로 저장되고, 로딩된다.
페이지의 상태를 브라우저의 즐겨찾기 메뉴에 유지하기 위해서는 먼저 saveFavorite 비헤이버에 적용할 스타일쉬트(CSS) 스타일을 설정하여야 한다. 그 다음 유지되어야 할 내용의 태그에 그 스타일을 적용한다.
필요한 style은 인라인이나 문서의 head 부분에 설정할 수 있다.
<STYLE>.favoriteClass {behavior:url(#default#saveFavorite);}</STYLE>
id 속성은 선택적이지만 유지를 올바르게 하기 위해서는 id가 필요하다.
saveFavorite 비헤이버는 IE5의 Win32와 Unix 플랫트폼에서 지원된다.
| attribute | property | 설명 |
|---|---|---|
| XMLDocument | XMLDocument | 개체에 반영된 XML DOM(Document Object Model)의 참조를 반환한다. |
| 메서드 | 설명 |
|---|---|
| getAttribute | 지정된 애트리뷰트의 값을 반환한다. |
| removeAttribute | 지정된 애트리뷰트를 제거한다. |
| setAttribute | 지정된 애트리뷰트의 값을 설정한다. |
| 이벤트 | 설명 |
|---|---|
| onload | 페이지가 다시 로딩되면 유지(persistent) 엘레멘트로부터 발생한다. |
| onsave | 웹페이지가 저장되거나 북마크(bookmark)되거나 사용자가 브라우저로 페이지로부터 다른곳으로 항해하면 유지(persistent) 엘레멘트로부터 발생한다. |
| 개체 | IE |
|---|---|
| <ELEMENT style="behavior:url('#default#saveFavorite')" id=idVal> | IE5(win32,unix) |
| A ACRONYM ADDRESS AREA B BIG BLOCKQUOTE BUTTON CAPTION CENTER CITE CODE DD DEL DFN DIR DIV DL DT EM FONT FORM hn HR I IMG INPUT type=button INPUT type=checkbox INPUT type=file INPUT type=hidden INPUT type=image INPUT type=password INPUT type=radio INPUT type=reset INPUT type=submit INPUT type=text KBD LABEL LI LISTING MAP MARQUEE MENU OBJECT OL OPTION P plainText PRE Q S SAMP SELECT SMALL SPAN STRIKE STRONG SUB SUP TABLE TEXTAREA TT U UL VAR XMP | |
onsave로 즐겨찾기에 저장되고 onload 이벤트처리자로 문서로 로딩된다. setAttribute 메서드로 다른 개체들을 포함아여 입력 개체와 그 값을 즐겨찾기에 유지를 설정한다. 값이 유지되기 위해서는 클라스로 지정된 class="saveFavorite"이어야 한다.
<BUTTON
onclick="window.open('../behavior/exp/wsaveFavorate.html','_new','width=500,height=300,menubar=yes')">예제 보조창 열기
</BUTTON>
exp/wsaveFavorate.html 코드
<!DOCTYPE html public "-//w3c//dtd html 4//en">
<HTML>
<HEAD>
<TITLE>언어 참조 - Javascript - 비헤비어(behavior) - saveFavorite 예제</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=euc-kr">
<LINK rel="stylesheet" type="text/css" href="../../public/jscript.css">
<META name="save" content="saveFavorite">
<STYLE>.favoriteClass {behavior:url(#default#saveFavorite);}</STYLE>
<SCRIPT>
function dosaveFavorite(){
if (formName.oPersistText.value==''){
alert('입력필드에 문자열을 입력하라.');
} else formName.oPersistText.setAttribute('sPersistText',formName.oPersistText.value);
}
function doLoadsaveFavorite(){
formName.oPersistText.value=formName.oPersistText.getAttribute('sPersistText');
}
</SCRIPT></HEAD>
<BODY>
<TABLE width=500>
<TR><TD>
<DIV style="border:solid 1 blue;background:fff;text-align:center;width:100%;margin:5">
<H3><SPAN class=titleblue><SPAN class=behavior>saveFavorite</SPAN> 예제</SPAN></H3>
</DIV>
<SPAN class=gray><SCRIPT>document.write(document.location)</SCRIPT></SPAN><BR><BR>
<FORM name="formName">
정보 입력 1: <INPUT type="text" id="oPersistText" class="favoriteClass"
onsave="dosaveFavorite()" onload="doLoadsaveFavorite()">(유지된다.)<BR>
정보 입력 2: <INPUT type="text" id="oPersistNone">(유지되지 않는다.)
</FORM><BR>
<P align=center style="background:ffa;padding:10">
입력하고 즐겨찾기에 추가한 후, 즐겨찾기에서 호출하여 보라.</P><BR>
<TABLE cellpadding=8 align=center style="border:solid 1 blue">
<TR><TD align=center><BUTTON onClick="self.close()">현재 보조창 닫기</BUTTON></TD></TR>
</TABLE>
</TD></TR></TABLE>
</BODY>
</HTML>