Happyfri.com Blog

Home | Experience | Guestbook | Admin | About

http://www.happyfri.com/blog/61

AshPopup(extends AshEventDispatcher)

• CREATION DATE | 2009.01.04

• LAST MODIFY | 2009.01.04

• VERSION | 0.3

• Description

- 본클래스는 Singleton Class 이다.

- 따라서 AshPopup.manager static 속성을 이용해서 사용하도록 한다.

- 본 클래스는 popup형식을 취한다. 따라서 관리대상 객체의 부모노드는 document.body이다.
하지만 본 객체는 DOM의 흐름에 혼돈을 주지 않기 위해 대상 객체 자체를 append 하지 않고 clone 시켜서 처리하고 있다.

※ 팝업형식을 그대로 취하게 되므로 동시에 2개의 팝업은 존재할수 없다.
만약 useAutoClearAsRollout = false 인상태에서 create명령이 적용된다면 기존에 존재하는 poupup은 자동으로 사라지게된다.

• ClassType

public extends

• Inherited Public Properties

instancedCount (Defined by Ash)
owner (Defined by AshEventDispatcher)
openData (Defined by AshEventDispatcher)

• Inherited Public Methods

getClass (Defined by Ash)
toString (Defined by Ash)
addEventListener (Defined by AshEventDispatcher)
removeEventListener (Defined by AshEventDispatcher)
dispatchEvent (Defined by AshEventDispatcher)
hasEventListener (Defined by AshEventDispatcher)
getEventListeners (Defined by AshEventDispatcher)

• Costants

AshPopup.CREATE = 'create'; // when the popup's element create, event invoke.
팝업이 생성될때 이벤트가 발생한다.

AshPopup.CLEAR = 'clear'; // when the popup's element remove, event invoke.
팝업이 제거될때 이벤트가 발생한다.

• Static Properties

AshPopup.manager = new AshPopup(); // you must use this manager's property for managing of any object.
본클래스는 싱글톤을 지향함으로 반드시 이 static 속성을 이용해서 매니징을 처리한다.

• Static Methods

• On Event Handler

onCreate:Function // when the popup's element create.
onClear:Function // when the popup's element remove.

• Public Properties

(read-only)
target // the current target's element.
현재 popup처리가 요청된 대상 엘리먼트.

cloner // the clone element that was created from target's element.
대상 엘리먼트로 부터 생성된 팝업 클로너.

coordinates // the coordinates info object.
현재 popup생성을 위해 요청된 coordinates 객체.

motioner // the current motioner that was created.
팝업처리에서 모셔닝 담당을 위해 생성된 motioner 객체.

• Public Methods

create(target, [coordinates, useMotion, callback, useAutoClearAsRollout] );
*parameters |
target // 팝업으로 생성할 타겟으로 id 네이밍이나 dotTree형식(aaa.bbb.ccc...)의 타겟지정, 혹은 element 자체를 던져줄수 있다.
(optional)-------------------
coordinates = null // optional 값으로 팝업이 표시될 좌표이다. coordinates 에 호출한 객체를 던져주면 해당 객체의 바운딩 좌표에 맞추어서 팝업이 나타나며 {x:200, y:200} 처럼 좌표값을 지정하면
해당좌표값(단,글로벌좌표임)에 팝업이 나타나며 coordinates 값이 지정되지 않으면 기본 마우스위치기준으로 팝업이 나타난다.
하지만 가장 많이 사용되는 방법은 바로 특정 타겟 객체를 지정하고 해당 타겟 객체에 대한 마진을 상대값으로 적용하는것으로 이것은 시각적으로 모양새에 대한 퀄리티를 높일때 매우 유용하다.
{target:객체, x:marginx, y:marginy} 로 지정하면 된다.
useMotion = null // 기본적으로 팝업이 나타날때 모션처리가 수행된다. useMotion = false 이면 모션처리를 수행하지 않는다.
callback:function = null // 각 팝업에 대한 mouse 클릭상태를 callback핸들러로 수신받을수 있다. (mouseover, mousedown, mouseup 을 type으로 전달한다.)
ex)
AshPopup.manager.create('mydiv', mybutton, false, function(type) {
if(type == 'mouseup') this.clear(); // 생성된 팝업메뉴에서 각메뉴들을 누르면 팝업을 사라지게 한다.
});
useAutoClearAsRollout = true // 롤아웃 시에 자동으로 생성된 팝업엘리먼트를 제거한다. 만약 자동제거를 원하지 않는다면 false 값을 지정하면된다.

* return
-생성된 clone element를 반환한다. (물론 AshPopup.manager.cloner 를 이용해도 된다.)
좀더 세부적인 제어를 원한다면 이 반환된 clone element를 직접제어 해서 위치변경이나 innerHTML변경등 세부작업이 추가적으로 가능하다.

clear() // Clear the cloner's popup that has created from the target element.
생성된 팝업 엘리먼트를 제거한다.

• Constructor

AshPopup();

• Example

</script>
</head>

<body>
<div style='display:none;' >
<div id='direction' class='EditorCommon' style='padding:20px; background-color:#ffffff; border:1px solid #000000;'>
  <a href="javascript:editPanel.setToolbarDirection('n');">North</a><br>
  <a href="javascript:editPanel.setToolbarDirection('e');">East</a><br>
  <a href="javascript:editPanel.setToolbarDirection('s');">South</a><br>
  <a href="javascript:editPanel.setToolbarDirection('w');">West</a><br>
</div>
<div id='FontList' class='EditorCommon' style=' padding:20px; background-color:#ffffff; border:1px solid #aaaaaa;'>
  <a href="javascript:;">Arial</a><br>
  <a href="javascript:;">돋움</a><br>
  <a href="javascript:;">돋움체</a><br>
  <a href="javascript:;">굴림</a><br>
  <a href="javascript:;">굴림체</a><br>
  <a href="javascript:;">궁서</a><br>
  <a href="javascript:;">궁서체</a><br>
  <a href="javascript:;">Tahoma</a><br>
  <a href="javascript:;">Tims New Roman</a><br>
  <a href="javascript:;">Courier New</a><br>
  <a href="javascript:;">Verdana</a>
</div>
</div>

<! -- 마우스오버일때(기본) -->
<span onmouseover="AshPopup.manager.create('direction', this);" style='cursor:pointer;'>direction(기본) </span>   

<! -- 마우스오버일때(등장모션 사용하지 않음) -->
<span onmouseover="AshPopup.manager.create('FontList', this, false);" style='cursor:pointer;'>Font Lists(등장모션 사용하지 않음)</span>

<! -- 마우스클릭할때(마우스롤아웃일때 자동으로 clear되지 않게 함) -->
<div style='position:absolute; left:100px; top:100px;'>
<span onclick="AshPopup.manager.create('direction', this, true, null, false);" style='cursor:pointer;'>direction(MouseRollout시 자동으로 clear되지 않게 함)</span>
</div>

<! -- 마우스오버일때(팝업영역이 document clientWidth 영역을 벗어나면 자동 위치보정/ 팝업내부에서 마우스업 시에 클리어하게 적용함) -->
<div style='float:right;'>
(팝업영역이 document clientWidth 영역을 벗어나면 자동 위치보정/ 팝업내부에서 마우스업 시에 클리어하게 적용함)
<span onmouseover="AshPopup.manager.create('FontList', this, true, function(type) {if(type=='mouseup') this.clear();});" style='cursor:pointer;'>Font Lists</span>
</div>

<! -- 마우스클릭할때(팝업 포지션을 현재 엘리먼트 위치가 아닌 마우스 좌표 위치로 자동으로 맞추게 설정) -->
<div style='position:absolute; left:150x; top:150px;'>
<span onclick="AshPopup.manager.create('direction');" style='cursor:pointer;'>direction(Mouse x/y 팝업 포지션을 현재 엘리먼트 위치가 아닌 마우스 좌표 위치로 자동으로 맞추게 설정)</span>
</div>

<! -- 마우스오버일때(팝업영역이 지정한 좌표영역에서 나타나게함) -->
<div style='position:absolute; left:200x; top:200px;'>
<span onmouseover="AshPopup.manager.create('FontList', {x:100, y:300});" style='cursor:pointer;'>Font Lists({x:100, y:300})</span>
</div>
</body>

EDIT | DELETE

Leave Comment

- AshResize(extends AshEventDispatcher)

- AshLocationHistory(Instance of AshEventDispatcher)

All Articles

• 한화 갤러리아몰 오픈

• IE8은 opacity[ filter:al . . .

• Better +operator than P . . .

• CSS parse VS Offset per . . .

• 스마트기기 및 하이브리드앱 개발을 위한 A . . .

• 안녕하세요. 답변이 늦었습니다. 당시에 . . .

• 네, 형님 정말 얼굴 한번 봐요~ 형님도 . . .

• 안녕하세요. 현재 AshSelectBox . . .

• 타블로의 악플러는 과연 처벌 대상인가?

• 타블로는 경고한다 그 입다물라!

• IE8 inline-block

2008

LINK • SUMMARY

• Flash

FlashBookmarks

Share related link.

Mike Chambers

A Principal Product Manager at Adobe.

theFlashBlog

A Platform Evangelist Lee Brimelow's blog at Adobe.

EverydayFlash

A blog about 3D flash and actionscript by Bartek Drozdz.

• Reference

Gecko DOM

MSDN Library

Mozilla CSS

CS4 ActionScript 3.0 Language

PHP: Hypertext Preprocessor

• ETC

IEBlog

Behance Network

Creative Portfolios,Projects, and Collaborations

• people

ddakzzi

A significant person.

Namoo Interactive

Just a good man.

Jin_u as blog

Ghost-Corps' Chief Flashist.

해맑게 웃기

A Promising Flashist.

Phoebe

A Web Publisher.
(Team.L / d'strict)

nemo

A Web Publisher.
(Senior / d'strict)

• 2010-10-31	AshAPI(1.9) Update - AshTextMarquee / AshMarquee. - AshScrollBar

• 2010-10-28	YouTubePlayer RemoteController(0.75) - Easy to add tracks and to load videos. - Eidetic serviceability, immediacy

• 2010-08-20	ash3 lib's(classes based as3) AsDoc - Core Assets(LayoutManager, DockingManager, Scroller) - Useful Assets(AshHTMLElement...) - UICompenent Assets(AshUIC Serieses)

• 2009-05-08	AshCodeHighlighter(0.98) now available - Third Party/Code Compressor - AS/JS/PHP/HTML All keywords - Auto code sizing

• 2009-04-23	AshAccordion addition - Runtime changeable - Support multi type Easy usage

• 2009-04-13	AshAPI(1.6) download available

• 2009-03-22	AshGoogleSearch.Image Google AJAX API + AshAPI

HOME | TOP | ADMIN | NEW POST / FEED - RSS 2.0