¾È±Ô °øºÎ¹æ

Javascript & JQuery & CSS > Dialog() ±¸ÇöÇϱâ #1

µî·ÏÀÏ : 2017-09-21 16:53 Á¶È¸¼ö : 53,968

ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ Á¦ÀÌÄõ¸®ui¿¡´Â ´Ù¾çÇÑ ui Ç÷¯±×ÀÎÀÌ Á¸ÀçÇϴµ¥ ÀÌÁß¿¡¼­ dialog Á¦ÀÌÄõ¸® ui ±¸Çö¿¡ ´ëÇÏ¿© ¾Ë¾Æº¸ÀÚ.
¿ì¼± ´ÙÀ̾ó·Î±×¸¦ ¸¸µé°Ô µÇ¸é ÆäÀÌÁö¿¡ Æ˾÷âÀ» ¶ç¿ì°Ô µÈ´Ù.
Æ˾÷âÀº ¸ð´Þâ ÇüŸ¦ ¶ç¸ç À̸¦ ¸¸¾à Á÷Á¢ ¸¸µé °æ¿ì ½Ã°£ ¹× ³ë·ÂÀÌ ¸¹À̵éÁö¸¸ ÀÌ Ç÷¯±×ÀÎÀ» »ç¿ëÇÒ °æ¿ì ¸Å¿ì ¼Õ½±°Ô ±¸ÇöÇÒ ¼ö ÀÖ¾î ¸Å¿ì Æí¸®ÇÏ´Ù.


ÀÏ´Ü ´Ù¿î·Îµå¸¦ ÇؾßÇϴµ¥ Á¦ÀÌÄõ¸® Ç÷¯±×ÀÎ dialog´Â ¾Æ·¡ÀÇ °æ·Î¿¡¼­ ´Ù¿î ¹ÞÀ» ¼ö ÀÖ´Ù.

* Á¦ÀÌÄõ¸®ui Download ¹Ù·Î°¡±â > https://jqueryui.com/download/
* Á¦ÀÌÄõ¸®ui dialog ÆäÀÌÁö ¹Ù·Î°¡±â > https://jqueryui.com/dialog/



´ÙÀ̾ó·Î±×¸¦ ½ÇÇàÇÒ °æ¿ì ¾Æ·¡ÀÇ ½ºÅ©¸°¼¦Ã³·³ ¸ð´ÞÇüÅÂÀÇ Æ˾÷À» ¶ç¿ï ¼ö Àִµ¥ ÀÌ ´ÙÀ̾ó·Î±×´Â ¸î °¡ÁöÀÇ ±â´ÉÀ» °¡Áö°í ÀÖ´Ù. ÀÌ ±â´ÉµéÀº ¿É¼ÇÀ» ÅëÇØ Ãß°¡Çϰųª Á¦¿ÜÇÒ ¼ö ÀÖ´Ù. ¾Æ·¡´Â dialog¿¡¼­ »ç¿ë °¡´ÉÇÑ ±â´ÉµéÀÌ´Ù.

1. µå·¡±× °¡´É(Draggable)
2. ¸ð´ÞÇüÅÂÀÇ bg ¹é±×¶ó¿îµå ¼³Á¤ ±â´É
3. ¸®»çÀÌÁî °¡´ÉÇÑ ±â´É

»ç½Ç À§¿¡ ¾ð±ÞÇÑ ±â´É ¿Ü¿¡µµ »ó´çÈ÷ ¸¹Àº ... ¸Å¿ì Æí¸®ÇÑ ±â´ÉµéÀ» Á¦°øÇÏ°í ÀÖ´Ù. ±× Áß¿¡¼­µµ À§ ¼¼°¡Áö ±â´ÉÀº °¡Àå Å« Ư¡À̶ó°í ÇÒ ¼ö ÀÖ´Â ºÎºÐÀÌ´Ù. ¸¸¾à ÀÌ ±â´ÉµéÀ» Á÷Á¢ ÄÚµùÇÒ °æ¿ì »ó´çÇÑ ³ë·ÂÀÌ ¿ä±¸µÇ±â ¶§¹®ÀÌ´Ù. ƯÈ÷ ¸ð´ÞâÀ» ¸®»çÀÌÁî ÇÒ ¼ö ÀÖ´Â ±â´Éµµ ¼³Á¤ÇÒ ¼ö Àִµ¥ ÀÌ ºÎºÐµµ ¸Å¿ì Æí¸®ÇÑ ±â´É Áß ÇϳªÀÌ´Ù. °³ÀÎÀûÀ¸·Î µå·¡±×°¡ °¡´ÉÇÑ Á¡ÀÌ ÁÁ¾Æ ¸¹ÀÌ »ç¿ëÇÑ´Ù.

! dialog ¿¹Á¦¼Ò½º º¸±â

dialog âÀ» ¸¸µé±â À§ÇÑ ¹æ¹ýÀº ÀÇ¿Ü·Î °£´ÜÇÏ´Ù. ¸¸¾à ¾Æ·¡¿Í °°ÀÌ dialog¶ó´Â id¸¦ °¡Áø ¿¤¸®¸ÕÆ®°¡ ÀÖ´Ù¸é ÀÌ id¿¡ dialog() ¸Þ¼Òµå¸¦ »ç¿ëÇØ ½ÇÇàÇÏ¸é µÈ´Ù. ¾Æ·¡ÀÇ ¼Ò½ºÄڵ带 º¸ÀÚ.
 

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="dialog">
   <p>´ÙÀ̾ó·Î±× ¸ð´ÞâÀ» ¶ç¿ì´Â °£´ÜÇÑ ¹æ¹ý!!</p>
</div>

<script>
   $('#dialog').dialog();
</script>


À§ ¹æ¹ýÀ» »ç¿ëÇÒ °æ¿ì ±âº»ÀûÀÎ ´ÙÀ̾ó·Î±×âÀÌ ¶ç¾îÁø´Ù. À̶§ ¸î°¡Áö ¿É¼ÇÀÌ ¼³Á¤ °¡´ÉÇÑ´Ù. ¸ÕÀú Á¦¸ñÀÎ titleÀ» Ãß°¡ÇÏ´Â ¹æ¹ýÀº ¾Æ·¡¿Í °°´Ù.

 

<script>
   $('#dialog').dialog({
      title: '´ÙÀ̾ó·Î±× Á¦¸ñÀ» ³ÖÀÚ',
      modal: true,
      width: '300',
      height: '300'
   });
</script>

À§ ¹æ¹ý¿¡¼­´Â ŸÀÌƲ Á¦¸ñÀ» Ãß°¡ÇÏ¿´´Ù. ±× ¾Æ·¡¿¡ º¸¸é modal: true; ¿É¼ÇÀÌ Ãß°¡µÇ¾î Àִµ¥ ÀÌ ¿É¼ÇÀ» »ç¿ëÇÏ¸é µÚ¿¡ ¹é±×¶ó¿îµå bg°¡ ³ªÅ¸³ª°Ô µÈ´Ù. Áï, ¸ð´Þ µÞ ºÎºÐÀÌ ¾îµÓ°Ô µÇ¾î Æ˾÷ ´ÙÀ̾ó·Î±×°¡ ´õ¿í °­Á¶µÉ ¼ö ÀÖ´Ù.

¶ÇÇÑ width, height °ªÀ» À§¿Í °°ÀÌ »ç¿ëÇÏ¿© Á¤ÇÒ ¼ö ÀÖ´Ù. À§ ¹æ¹ýó·³ »ç¿ëÇÏ´Â ¹æ¹ý ¿Ü¿¡ 'option'À» »ç¿ëÇÏ¿© Á¤ÇÒ ¼öµµ Àִµ¥ ¾Æ·¡ ¹æ¹ýÀ» º¸ÀÚ.
 
<script>
   $('#dialog').dialog('option', 'width', '300');
</script>
À§ ¹æ¹ýÀº width °ªÀ» ¼³Á¤ÇÏ¿´´Âµ¥ ¸Ç À§¿¡ À§Ä¡ÇÑ ¹æ¹ý°ú µ¿ÀÏÇÑ °á°ú°¡ ³ªÅ¸³ª°Ô µÈ´Ù. ¶Ç ´Ù¸¥ ¼³Á¤ ¹æ¹ýÀÌ´Ù.

 
¡Ø Ȥ½Ã µµ¿òÀÌ µÇ¼Ì´Ù¸é ´ñ±Û¿¡ ÇѸ¶µð ³²°ÜÁÖ¼¼¿ä!
ÀÛ¼ºÀÚ   ºñ¹Ð¹øÈ£
ÀÚµ¿±Û ¹æÁö     (ÀÚµ¿±Û ¹æÁö ±â´ÉÀÔ´Ï´Ù.)
³»¿ë   ´ñ±Û´Þ±â 
À̸ÞÀÏ ¹®ÀÇ : cak0280@nate.com  
Copyright 2000 By ENTERSOFT.KR All Rights Reserved.