ajaxÀÇ Á¤ÀÇ
XHTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ® µîÀÇ ±â¼úÀÌ °í·ç ¼¯¿© ´ëÈÇü À¥¾îÇø®ÄÉÀ̼ÇÀ» ¸¸µé ¼ö ÀÖ°Ô ÇÏ´Â À¥ÇÁ·Î±×·¡¹Ö ±â¼úÀÇ º¹ÇÕü. ºñµ¿±â½Ä ÀÚ¹Ù½ºÅ©¸³Æ®¿Í XML(Asynchronous JavaScript And XML)ÀÇ ÁÙÀÓ¸»ÀÌ´Ù.
¼³¸í
ÀÌ ½ºÅ©¸³Æ®´Â ajax¸¦ ÀÌ¿ëÇÏ¿© ÆäÀÌÁö·ÎµùÀ» ±×¶§±×¶§ÇØÁÖ¾î ¼ø°£ ÆäÀÌÁö ·Îµù¼Óµµ°¡ ¸Å¿ì ºü¸£´Ù. °¢°¢ÀÇ ÅǸ޴ºÀÇ ³»¿ëÀÌ µû·Î Á¸ÀçÇÏ°í Ŭ¸¯½Ã¿¡ ±×ÆÄÀÏÀ» ·ÎµùÇϱ⶧¹®¿¡ ÀçÀÛµµ ÆíÇϸç, ·Îµù¼Óµµ°¡ ¸Å¿ì ºü¸£´Ù.
¼öÁ¤ÇҺκÐ
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js"> <link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" /> À§ÀÇ ºÎºÐÀÌ ²À µé¾î°¡¾ß ÇÕ´Ï´Ù.
<ul id="maintab" class="shadetabs"> <li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li> <li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li> <li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li> <li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li> <li><a href="external4.htm" rel="ajaxcontentarea">Sea Otter</a></li> </ul>
<div id="ajaxcontentarea" class="contentstyle"> <p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p> </div>
<script type="text/javascript"> //Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma. startajaxtabs("maintab") </script>
rel="ajaxcontentarea" À̺κÐÀÌ ajaxcontentarea ¶ó´ÂºÎºÐ¿¡ Çش縵ũÀÇ ÆäÀÌÁö¸¦ Ç¥½ÃÇ϶ó´Â ¸»ÀÔ´Ï´Ù. Áï ·¹À̾î(div) ¾ÆÀ̵𰡠ajaxcontentarea ÀÎ ºÎºÐ¿¡ Ç¥½ÃÇÏ°Ô µË´Ï´Ù.
|