jQuery Study: jQuery UI Book Reading Ch.4 Dialog
jQuery UI 1.6 - The User Interface Library for jQuery (Feb 2009),
Chapter 4. Dialog
modal, modality? ÀÌ°Ô ¹«½¼ ¶æÀϱî?
¡®modal¡¯ , ¡®modality¡¯ ÀÌ ´Ü¾î, Âü ¶æÀÌ ¹¦¿¬ÇÏ´Ù.
µµÀúÈ÷ »çÀüÀû Àǹ̸¦ °¡Áö°í´Â ¹» ¶æÇÏ´ÂÁö, °¨Á¶Â÷ Àâ±â°¡ ¾î·Æ´Ù.
jQuery UI Dialog Property ¼³¸í¿¡´Â ¾Æ·¡¿Í °°ÀÌ ³ª¿ÍÀÖ´Ù.
dialog°¡ ¿·ÈÀ» ¶§, modality¸¦ È°¼ºÈ ½ÃŲ´Ù°í?
½ÇÁ¦ Äڵ忡¼´Â ¾Æ·¡¿Í °°ÀÌ »ç¿ëÇÑ´Ù.
img/modal.png ÆÄÀÏÀ» ã¾Æº¸´Ï, ´Ù¼Ò ¸ÛÇÏ´Ù.
The PNG used in this example is a simple square one pixel high by one pixel wide. The image is made of the color #999999 set to approx 25% transparency.
¹ÝÅõ¸íÀÇ È¸»öºû 1x1 Çȼ¿ÀÇ À̹ÌÁö ÆÄÀÏÀÌ´Ù. ³Ê¹« À۾Ƽ Àß º¸ÀÌÁöµµ ¾Ê´Â´Ù. ÀÌ°Å °¡Áö°í ´ëü ¹» ÇÏ·Á´Â °ÅÁö?
modal : true ÁöÁ¤ÇßÀ» ¶§, ¾Æ·¡¿Í °°ÀÌ, ³ª¿Â´Ù. Èì, ¹¹°¡, ´Þ¶óÁø °É±î? À̰͸¸ ºÁ¼± ¼±¶æ ´«¿¡ Àß µé¾î¿ÀÁö ¾Ê´Â´Ù.
¾Æ·¡ ȸéÀ» ºñ±³Çؼ »ìÆ캸ÀÚ. ±×·³, ´Ü¹ø¿¡ ¾Ë ¼ö ÀÖ´Ù. [modal ÁöÁ¤ÇÏÁö ¾Ê¾ÒÀ» ¶§]
¸Â´Ù. ¹è°æȸéÀÇ »ö±òÀÌ È¾Ç ´Þ¶óÁ³´Ù. modalÀ» true·Î ÇßÀ» ¶§, ¹º°¡, inactiveµÇ´Â ´À³¦ÀÌ´Ù. µùµ¿! ¡®modality¡¯´Â »çÀüÀûÀÎ Àǹ̿ʹ ÀüÇô ´Ù¸£°Ô, Àû¾îµµ UI ¿µ¿ª¿¡¼´Â ¡®»ç¿ëÀÚ ÀÔ·ÂÀ» µ¶Á¡ÇѴٴ¡¯ ÀǹÌÀÌ´Ù.
Ȥ½Ã³ª ½Í¾î¼, UI ¿µ¿ª¿¡¼ »ç¿ëÇÏ´Â ¡®modality¡¯¶ó´Â °³³ä¿¡ ´ëÇÑ ±Û °Ë»ö, »ý°¢º¸´Ù ¸¹Áö´Â ¾Ê´Ù.
°¡¸¸È÷, µé¿©´Ù º¸´Ï, modalÀ̶ó´Â ¸»°ú modeless¶õ ¸»ÀÌ ¹º°¡ ´ë¸³µÇ´Â °Í °°´Ù. Èì, modeless´Â ¾óÇͺ¸¸é modelÀ̶ó´Â ´Ü¾î¿Í °¡±õ°Ô º¸ÀÌÁö¸¸, ÀüÇô ¾Æ´Ï´Ù. mode °¡ less ÇÏ´Ù´Â ¶æÀÌ´Ù. Áï, ¸í»ç mode °¡ ¹Ù·Î Çü¿ë»ç modalÀÇ ¾î±ÙÀ̶ó°í ÇÒ ¼ö ÀÖ´Ù. ±×·³, mode ¶õ ¹º°¡?
¡®mode¡¯¶õ ¾î¶² ¡®¹æ½Ä¡¯ÀÌ´Ù. ¾î¶² ¡®±ÔÁ¤¡¯ÀÌ°í ¡®°ü½À¡¯ÀÌ´Ù. Áï, modal À̶õ ±× ¾î¶² ¡®mode¡¯¸¦ µû¸¥´Ù´Â ÀǹÌÀÌ°í, modeless´Â µû¶ó¾ß ÇÒ ¡®mode¡¯°¡ ¾ø´Ù´Â ¶æÀÌ´Ù. Áï, ±×³É, Á¦¸Ú´ë·Î ¶ó´Â °Å´Ù.
±Ã±ÝÁõ. Çϳª. Dialog°¡ ¿·È´Ù°¡ ÀÏÁ¤ ½Ã°£ÀÌ Áö³ª¸é ÀÚµ¿À¸·Î »ç¶óÁö°Ô ÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀº?
- ã¾Æº¸¸é, ÀÖÀ» µí. ±×·±µ¥, ¾î¶² Å°¿öµå ã¾Æ¾ß ½±°Ô ¹ß°ßÇÒ ¼ö ÀÖÀ»±î?
- ¡°jquery autoclose¡±·Î ãÀ¸´Ï, pluginÀÌ µÎ °³ ³ª¿Â´Ù.
- jQuery Modal Dialog - Plugins | jQuery Plugins
- weebox is a dialog plugin - Plugins | jQuery Plugins <- ³µ¥¾ø´Â ¡®Áß±¹¾î¡¯, ´Ù¼Ò ³°¨.
jquery.modaldialog.js |
$.modaldialog.success('Autoclosing in 5 seconds.', { |