- 지정된 규칙을 갖는 Wrapper형식의 엘리먼트에 대해 런타임상에서 아코디언 처리를 수행할수 있도록 고안된 클래스이다.
따라서 반드시 본 클래스를 사용하는 대상엘리먼트는 규칙이 수반되어야 한다.
[Rule]
- 대상엘리먼트의 타겟이 될 자식요소의 className이 'Accordion' 으로 지정 , 멀티 클래스네이밍은 허용됨
<div class='Accordion' > // ok
<div class='Accordion Content' > // ok
<div class='Test'> // disabled!
- 모션이 필요한 tree 메뉴에 많이 활용될 수 있다.
- 기존 다른 library들의 비해 사용법이 매우 간단하며 강력하다.
※ 멀티조합으로 동시에 액션을 수행할경우 여러개의 Accordion 모션처리 응용이 가능하다.
apply(mode, duration, engineName, callback) // applies to accordion to target element
대상엘리먼트에 아코디언을 적용한다.
[optional parameters]
mode는 auto/open/close 의 3가지 상태를 지정할 수 있다. 보틍 값이 지정되지 않은 상태는 알아서 상황을 판별후
자동으로 처리를 진행하게 된다.
duration은 진행될 duration time이다.
engineName은 모션처리에 사용될 easing 엔진이다.
callback은 모든 처리가 완료되었을때(모션처리) 리턴받아서 수행할 콜백함수이다.
-[ Normal test - single type]
<style type='text/css'>
.Hidden { color:#666666; display:none;}
</style>
<script type="text/javascript" src='AshAPI.js'></script>
</head>
<body>
<div>
<a href='#' class='ggg' onclick='AshAccordion.apply(parentNode); return false;'>Yu-na Most Favored CF Model</a>
<pre class='Accordion'>
<img src='http://www.koreatimes.co.kr/upload/news/090422_am_yuna.jpg'>
South Korea's top figure skater, Kim Yu-na, has surged ahead of prominent stars to take first place
in the model rankings conducted by TVCF, an advertisement portal site.
Kim led the pack appearing in 15 commercial films over the past year. Currently,
the figure queen is modeling for Hyundai Motor, Maeil Dairies, Samsung Electronics and others.
</pre>
</div>
<div style='width:500px;'>
<a href='#' class='ggg' onclick='AshAccordion.apply(parentNode); return false;'>'US Won’t Bend to N. Korea’s Unpredictability'</a>
<div class='Accordion Hidden'>
The U.S. won't give in to North Korea's "unpredictable behavior" after
Kim Jong Il's regime said it quit nuclear disarmament talks, Secretary of State Hillary Clinton said, according to Bloomberg.
The U.S. has made it clear it is prepared to resume the negotiations, also involving China,
Russia, Japan and South Korea, Clinton told the House Foreign Affairs Committee in Washington Wednesday.
<img src='http://www.koreatimes.co.kr/upload/news/090423_am_US.jpg' align='right'>
"The North Koreans have not demonstrated any willingness to resume the six-party process," Clinton was quoted as saying.
"I think we have to be strong, patient, persistent and not give in to the kind of back-and-forth, the unpredictable behavior of the North Korean regime."
North Korea vowed to permanently quit the six-party talks last week after the United Nations condemned its April 5 test of a suspected ballistic missile.
The communist state said it would resume reprocessing spent atomic fuel at its Yongbyon plant,
the source of its weapons-grade plutonium, and consider building new reactors.
Kim's government also expelled inspectors from the U.N.'s International Atomic Energy Agency.
</div>
</div>
</body>
-[ Extends test - Grouping multi type]
<style type='text/css'>
div.Tree { margin-top:20px; color:#888888; font-family:Arial; font-size:12px; }
div.Tree span { cursor:pointer; color:#000000; font-weight:bold; }
div.Tree .Accordion {display:none; }
.kenlazielo { color:#FF0000;}
</style>
<div class='Tree'>
<span>Category</span>
<div class='Accordion'>
- Adobe Flash Flatform.<br>
- Adobe Intergrated Runtime.<br>
- Microsoft SilverLights 2.0
</div>
</div>
<div class='Tree'>
<span>My Links</span>
<div class='Accordion kenlazielo'>
- Google Wepstore<br>
- Sunday Monday devine.<br>
- Destiny time.ABCD
</div>
</div>
<div class='Tree'>
<span>Why? tell me why?</span>
<div class='Accordion'>
- teven cambel<br>
- kissme devine.<br>
- end sinario
</div>
</div>
<div class='Tree'>
<span>Immortal</span>
<div class='Accordion'>
- Glasses Man<br>
- Iron Man.<br>
- Lee Myong bak<br>
- Juliet-Sara
</div>
</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
var accors = [], engine=['back.out','in'];
for(var l = divs.length, div, i = 0; i < l; i++) {
div = divs[i];
if(div.className == 'Tree') accors.push(new AshAccordion(div));
}
for(var i = 0, sp; i<accors.length; i++) {
sp = accors[i].target.getElementsByTagName('span')[0];
sp.onclick = function() {
for(var i = 0,a; i<accors.length; i++) {
a = accors[i];
if(a.target == this.parentNode) a.apply('open',AshUtil.randomRange(10,50), engine[AshUtil.random(1)]);
else a.apply('close',AshUtil.randomRange(10,50), engine[AshUtil.random(1)]);
}
}
}
accors[0].targetChild.style.display = 'block';
All Articles
1
LINK • SUMMARY
Share related link.
A Platform Evangelist Lee Brimelow's blog at Adobe.• 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 |
- 
- 