<script language=javascript type=text/javascript>
//
Protoload´Â Andreas Kalsch°¡ ¸¸µç Prototype Framework¸¦ ±â¹ÝÀ¸·Î ÇÑ Ajax ·Îµù ÀεðÄÉÀÌÅ͸¦ »ç¿ëÇÏ°Ô ÇØÁÖ´Â ¶óÀ̺귯¸®ÀÌ´Ù. Ajax ·Îµù ÀεðÄÉÀÌÅͶõ Ajax Åë½ÅÀ» ½ÃÀÛÇÒ ¶§ µ¥ÀÌÅÍ°¡ ·ÎµùÁßÀÓÀ» »ç¿ëÀÚ¿¡°Ô ¾Ë·ÁÁÖ´Â ¿ªÇÒÀ» ÇÏ´Â °ÍÀ¸·Î º¸ÅëÀº GIFÀ̹ÌÁö°¡ »ç¿ëµÇ°í ¾î¶² ÀεðÄÉÀÌÅ͸¦ »ç¿ëÇÒ Áö´Â ¸¸µå´Â »ç¶÷ ¸¾À̱ä ÇÏÁö¸¸ º¸Åë ¿ìÃøÀÇ À̹ÌÁö°¡ Ajax ·Îµù ÀεðÄÉÀÌÅÍÀÇ ´ëÇ¥ÀûÀÌ´Ù.
Prototype Framework¸¦ ±â¹ÝÀ¸·Î Çϱ⠶§¹®¿¡ ´ç¿¬È÷ ÇÁ·ÎÅäŸÀÔÀ» ÀÎŬ·çµå ÇØÁÖ¾î¾ß ÇÑ´Ù.
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/protoload.js"></script>
Prototype Framework¸¦ ¸ÕÀú ÀÎŬ·çµå ÇÏ°í Protoload»çÀÌÆ®¿¡¼ ´Ù¿î¹ÞÀº protoload.jsÆÄÀϵµ ÀÎŬ·çµå ÇÏ¸é »ç¿ëÇØ ´ëÇÑ Áغñ´Â ¿Ï·áµÈ´Ù. ¹öÀüÀÌ 0.1À̱â´Â ÇÏÁö¸¸ ¸î¹ø ´Ù·ïº» °æÇèÀ¸·Î´Â »ç¿ë»ó¿¡ Å« ¹®Á¦Á¡Àº ¾ø´Â °Í °°´Ù. ÀÏ´Ü ÀεðÄÉÀÌÅͶó´Â°Ô ¾ÆÁÖ º¹ÀâÇÏÁø ¾Ê±â ¶§¹®¿¡...
Ajax·ÎµùÀ» »ç¿ëÀÚ¿¡°Ô ¾Ë·ÁÁÖ´Â °ÍÀº ¾ÆÁÖ Áß¿äÇÑ ÀÏÀÌÁö¸¸ µû·Î ±¸ÇöÇÒ·Á¸é ²Ï³ª ³°¨ÇÏ°Ô »ý°¢µÇ´Âµ¥(µû·Î ±¸ÇöÇØ º»ÀûÀº ¾ø´Ù.) protoload´Â ¾ÆÁÖ ½±°Ô ·Îµù ÀεðÄÉÀÌÅ͸¦ »ç¿ëÇÒ ¼ö ÀÖ°Ô ÇØÁØ´Ù.
¿©±â¼ Á¦°øÇÏ´Â °ÍÀº ¾ÆÁÖ °£´ÜÇϸ鼵µ Æí¸®Çѵ¥ ¿øÇÏ´Â ¿¤¸®¸ÕÆ®¿¡ ÀεðÄÉÀÌÅ͸¦ Ç¥½ÃÇÒ ¼ö ÀÖ´Â Á¡ÀÌ ¾ÆÁÖ ÁÁ´Ù. ¿¹¸¦ µé¾î "ajaxWait"¶ó´Â id¸¦ °¡Áø ¿¤¸®¸ÕÆ®¿¡ ÀεðÄÉÀÌÅ͸¦ Ç¥½ÃÇÏ°íÀÚ ÇÑ´Ù¸é
$("ajaxWait").startWaiting('bigWaiting');
$("ajaxWait").stopWaiting();
À§¿Í°°ÀÌ ½áÁÖ¸é µÈ´Ù. ÀεðÄÉÀÌÅ͸¦ Ç¥½ÃÇÒ ¿¤¸®¸ÕÆ®´Â ¾î¶² °ÍÀ̵çÁö »ó°ü¾ø´Ù. divµµ µÇ°í button, select, inputµî ¿øÇϴ´ë·Î Ç¥½ÃÇÒ ¼ö ÀÖ°í Àüü ÆäÀÌÁö¿¡ Ç¥½ÃÇÏ·Á¸é ¿¤¸®¸ÕÆ®ÀÇ id´ë½Å¿¡ document.body¸¦ ³Ñ°ÜÁÖ¸é µÈ´Ù. ÆĶó¹ÌÅ͸£ ³Ñ°ÜÁØ bigWaiting´Â protoload¿¡¼ Á¦°øÇÑ css¿¡ µé¾îÀִ Ŭ·¡½º À̸§ÀÌ´Ù. Áï ÁöÁ¤ÇÑ CSS Ŭ·¡½º¸¦ »ç¿ëÇÏ°Ú´Ù´Â ÀǹÌÀÌ°í css¿¡ Á¤ÀǵǾî ÀÖ´Ù¸é ´Ù¸¥ Ŭ·¡½º À̸§À» ¼±ÅÃÇصµ ¹«¹æÇÏ´Ù. ÆäÀÌÁö¿¡ ¸Â°Ô ½ºÅ¸ÀÏÀ» Á¤ÇÑ´ÙÀ½ ÁöÁ¤¸¸ ÇØÁÖ¸é µÈ´Ù.
prototype.jsÀÇ Ajax¸¦ »ç¿ëÇÒ ¶§´Â startWaitingÀº onLoading¿¡¼ stopWaitingÀº onComplete¿¡¼ ÁöÁ¤ÇØ ÁÖ¸é µÈ´Ù.(±¸µ¿µÇ´Â °ÍÀº protoload »çÀÌÆ® ¿¡ ³ª¿ÍÀÖÀ¸´Ï »çÀÌÆ®¸¦ Âü°íÇϱ⠹ٶõ´Ù.)
Prototype Framework¸¦ ±â¹ÝÀ¸·Î Çϱ⠶§¹®¿¡ ´ç¿¬È÷ ÇÁ·ÎÅäŸÀÔÀ» ÀÎŬ·çµå ÇØÁÖ¾î¾ß ÇÑ´Ù.
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/protoload.js"></script>
Prototype Framework¸¦ ¸ÕÀú ÀÎŬ·çµå ÇÏ°í Protoload»çÀÌÆ®¿¡¼ ´Ù¿î¹ÞÀº protoload.jsÆÄÀϵµ ÀÎŬ·çµå ÇÏ¸é »ç¿ëÇØ ´ëÇÑ Áغñ´Â ¿Ï·áµÈ´Ù. ¹öÀüÀÌ 0.1À̱â´Â ÇÏÁö¸¸ ¸î¹ø ´Ù·ïº» °æÇèÀ¸·Î´Â »ç¿ë»ó¿¡ Å« ¹®Á¦Á¡Àº ¾ø´Â °Í °°´Ù. ÀÏ´Ü ÀεðÄÉÀÌÅͶó´Â°Ô ¾ÆÁÖ º¹ÀâÇÏÁø ¾Ê±â ¶§¹®¿¡...
Ajax·ÎµùÀ» »ç¿ëÀÚ¿¡°Ô ¾Ë·ÁÁÖ´Â °ÍÀº ¾ÆÁÖ Áß¿äÇÑ ÀÏÀÌÁö¸¸ µû·Î ±¸ÇöÇÒ·Á¸é ²Ï³ª ³°¨ÇÏ°Ô »ý°¢µÇ´Âµ¥(µû·Î ±¸ÇöÇØ º»ÀûÀº ¾ø´Ù.) protoload´Â ¾ÆÁÖ ½±°Ô ·Îµù ÀεðÄÉÀÌÅ͸¦ »ç¿ëÇÒ ¼ö ÀÖ°Ô ÇØÁØ´Ù.
¿©±â¼ Á¦°øÇÏ´Â °ÍÀº ¾ÆÁÖ °£´ÜÇϸ鼵µ Æí¸®Çѵ¥ ¿øÇÏ´Â ¿¤¸®¸ÕÆ®¿¡ ÀεðÄÉÀÌÅ͸¦ Ç¥½ÃÇÒ ¼ö ÀÖ´Â Á¡ÀÌ ¾ÆÁÖ ÁÁ´Ù. ¿¹¸¦ µé¾î "ajaxWait"¶ó´Â id¸¦ °¡Áø ¿¤¸®¸ÕÆ®¿¡ ÀεðÄÉÀÌÅ͸¦ Ç¥½ÃÇÏ°íÀÚ ÇÑ´Ù¸é
$("ajaxWait").startWaiting('bigWaiting');
$("ajaxWait").stopWaiting();
À§¿Í°°ÀÌ ½áÁÖ¸é µÈ´Ù. ÀεðÄÉÀÌÅ͸¦ Ç¥½ÃÇÒ ¿¤¸®¸ÕÆ®´Â ¾î¶² °ÍÀ̵çÁö »ó°ü¾ø´Ù. divµµ µÇ°í button, select, inputµî ¿øÇϴ´ë·Î Ç¥½ÃÇÒ ¼ö ÀÖ°í Àüü ÆäÀÌÁö¿¡ Ç¥½ÃÇÏ·Á¸é ¿¤¸®¸ÕÆ®ÀÇ id´ë½Å¿¡ document.body¸¦ ³Ñ°ÜÁÖ¸é µÈ´Ù. ÆĶó¹ÌÅ͸£ ³Ñ°ÜÁØ bigWaiting´Â protoload¿¡¼ Á¦°øÇÑ css¿¡ µé¾îÀִ Ŭ·¡½º À̸§ÀÌ´Ù. Áï ÁöÁ¤ÇÑ CSS Ŭ·¡½º¸¦ »ç¿ëÇÏ°Ú´Ù´Â ÀǹÌÀÌ°í css¿¡ Á¤ÀǵǾî ÀÖ´Ù¸é ´Ù¸¥ Ŭ·¡½º À̸§À» ¼±ÅÃÇصµ ¹«¹æÇÏ´Ù. ÆäÀÌÁö¿¡ ¸Â°Ô ½ºÅ¸ÀÏÀ» Á¤ÇÑ´ÙÀ½ ÁöÁ¤¸¸ ÇØÁÖ¸é µÈ´Ù.
prototype.jsÀÇ Ajax¸¦ »ç¿ëÇÒ ¶§´Â startWaitingÀº onLoading¿¡¼ stopWaitingÀº onComplete¿¡¼ ÁöÁ¤ÇØ ÁÖ¸é µÈ´Ù.(±¸µ¿µÇ´Â °ÍÀº protoload »çÀÌÆ® ¿¡ ³ª¿ÍÀÖÀ¸´Ï »çÀÌÆ®¸¦ Âü°íÇϱ⠹ٶõ´Ù.)
ÀϹÝÀûÀÎ »çÀÌÆ®¿¡¼´Â »ç¿ë»ó¿¡ ¹®Á¦°¡ ¾øÁö¸¸ ÅÇÀ» ¾´´Ù´øÁö ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇؼ DOM±¸¼ºÀ» ¸¸Á®³õÀº °÷¿¡¼´Â ¿øÇÏ´Â À§Ä¡¿¡ Ajax ·Îµù ÀεðÄÉÀÌÅÍ°¡ ³ª¿ÀÁö ¾Ê´Â °æ¿ì°¡ ÀÖ´Ù. ÀÌ·²¶§´Â 10³âÂ÷Ãʺ¸°³¹ßÀÚ´ÔÀÌ ÆÐÄ¡ÇÑ ³»¿ë À» Âü°íÇؼ protoload¸¦ »ç¿ëÇÏ¸é ¾ÆÁÖ Àß µ¹¾Æ°£´Ù.(10³âÂ÷Ãʺ¸°³¹ßÀÚ´Ô °¨»ç~~)
Âü°í·Î Ajaxload»çÀÌÆ® ¸¦ ÀÌ¿ëÇÏ¸é ´Ù¾çÇÑ Ajax ·Îµù ÀεðÄÉÀÌÅ͸¦ ¿øÇÏ´Â ¸ð¾ç°ú »öÀ¸·Î ½±°Ô Á¦ÀÛÇÒ ¼ö ÀÖ´Ù. ÆäÀÌÁö¿¡ ¾î¿ï¸®´Â ÀεðÄÉÀÌÅ͸¦ °¡Á®´Ù°¡ ¾²¸é µÉ µí ½Í´Ù.
Ãâó: http://blog.outsider.ne.kr/trackback/133
»çÀÌÆ® µ¹¾Æ´Ù´Ï´Ù°¡ ±¦ÂúÀº°Ô ÀÖ¾î¼ ¿Ã¸³´Ï´Ù ..