½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > OPEN API > ¸ð¹ÙÀÏ ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ® jindo.m.Scroll [1.4.0] »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
¸ð¹ÙÀÏ ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ® jindo.m.Scroll [1.4.0]
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù OPEN API
´Ù¿î·Îµå Ƚ¼ö 312 ȸ
°£´Ü¼³¸í jindo_mobile_component.js ´Ù¿î·Îµå. ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®(jindo.m.Scroll)´Â JMC(Jindo Mobile Component)ÀÇ ÄÄÆ÷³ÍÆ® °¡¿îµ¥ °¡Àå ¸¹ÀÌ »ç¿ëÇÏ´Â ÄÄÆ÷³ÍÆ®ÀÔ´Ï´Ù. ÀÌ ±Û¿¡¼­´Â ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®ÀÇ Æ¯Â¡°ú »ç¿ë ¹æ¹ýÀ» ¼Ò°³ÇÒ °ÍÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

 



JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®ÀÇ ÀÌÇØ: jindo.m.Scroll

½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®(jindo.m.Scroll)´Â JMC(Jindo Mobile Component)ÀÇ ÄÄÆ÷³ÍÆ® °¡¿îµ¥
°¡Àå ¸¹ÀÌ »ç¿ëÇÏ´Â ÄÄÆ÷³ÍÆ®ÀÔ´Ï´Ù.
ÀÌ ±Û¿¡¼­´Â ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®ÀÇ Æ¯Â¡°ú »ç¿ë ¹æ¹ýÀ» ¼Ò°³ÇÒ °ÍÀÔ´Ï´Ù.

½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®°¡ ÇÊ¿äÇÑ ÀÌÀ¯

¸ð¹ÙÀÏ UIÀÇ ´ëÁßÈ­

½º¸¶Æ®ÆùÀÇ ´ëÁßÈ­·Î »ç¿ëÀÚ´Â ±âÁ¸ PC¿¡¼­ º¸´ø UIÈ­¸éº¸´Ù À§¿Í ¾Æ·¡ °íÁ¤¿µ¿ªÀÌ ÀÖ´Â
ÀϹÝÀûÀÎ ¸ð¹ÙÀÏ UI¸¦ ´õ¿í Ä£¼÷ÇÏ°Ô ¿©±â°í ÀÖ´Ù.

ÀÌ·± UI¸¦ ±¸¼ºÇÏ·Á¸é ¸¹Àº ÄÜÅÙÃ÷¸¦ ºü¸£°Ô ½ºÅ©·ÑÇÒ ¼ö ÀÖ´Â ±â´ÉÀÌ ÇʼöÀûÀÌ´Ù. ¹°·Ð,
ÀÌ·± ±â´ÉÀ» µ¥½ºÅ©Åé ºê¶ó¿ìÀú¿¡¼­ ±¸ÇöÇÏ´Â ¹æ¹ýÀº ¸Å¿ì °£´ÜÇÏ´Ù.
¹Ù·Î "position:fixed" ¼Ó¼ºÀ» ÀÌ¿ëÇϸé À§ÂÊ ¿µ¿ª°ú ¾Æ·¡ÂÊ ¿µ¿ªÀ» È­¸é¿¡ °íÁ¤ÇÒ ¼ö ÀÖ´Ù.

ÇÏÁö¸¸ ¸ð¹ÙÀÏ¿¡¼­´Â ÀÌ ÀÏÀÌ °áÄÚ ½¬¿î ÀÏÀÌ ¾Æ´Ï´Ù.

±×¸² 1 ÀϹÝÀûÀÎ ¸ð¹ÙÀÏ UI

position:fixed ¼Ó¼º ¹ÌÁö¿ø

µ¥½ºÅ©Åé ȯ°æ¿¡¼­´Â °ÅÀÇ ¸ðµç ºê¶ó¿ìÀú°¡ "position:fixed" ¼Ó¼ºÀ» Áö¿øÇÏÁö¸¸,
¸ð¹ÙÀÏ È¯°æ¿¡¼­´Â ÃÖ±Ù¿¡ ¿Í¼­¾ß "position:fixed" ¼Ó¼ºÀ» Áö¿øÇÑ´Ù.
iOS 5.0 ¹öÀüÀÇ Safari¿Í Android 2.1 ¹öÀüÀÇ ºê¶ó¿ìÀúºÎÅÍ "position:fixed" ¼Ó¼ºÀ»
Áö¿øÇÏÁö¸¸, Á¤»óÀûÀ¸·Î µ¿ÀÛÇÏ·Á¸é iOS 5.0 ¹öÀü ÀÌ»óÀÇ Safari¿Í Android 3.0 ¹öÀü
ÀÌ»óÀÇ ºê¶ó¿ìÀú¿©¾ß ÇÑ´Ù.

±×¸² 2 position:fixed ¼Ó¼º Áö¿ø ¿©ºÎ(¿øº» Ãâó: http://caniuse.com)

±×»Ó¸¸ ¾Æ´Ï¶ó "position:fixed" ¼Ó¼ºÀ» ÀÌ¿ëÇØ ÀϹÝÀûÀÎ ¸ð¹ÙÀÏ UI¸¦ ¸¸µé¸é,
À§ÂÊ°ú ¾Æ·¡ÂÊÀÇ °íÁ¤µÈ ¿µ¿ª¿¡µµ ½ºÅ©·ÑÀÌ Ç¥½ÃµÇ¾î µðÀÚÀÎ Á¦¾àÀÌ ¹ß»ýÇÑ´Ù.

±×¸² 3 Position:fixed¸¦ »ç¿ëÇÒ °æ¿ì, µðÀÚÀÎ Á¦¾àÀÌ ¹ß»ýÇÑ´Ù.

ºê¶ó¿ìÀú¿¡¼­ ±âº»À¸·Î Á¦°øÇÏ´Â "position:fixed" ¼Ó¼º¸¸À¸·Î´Â ´Ù¾çÇÑ ¸ð¹ÙÀÏ È¯°æ¿¡¼­ µ¿ÀÏ UI¿Í µ¿ÀÏ ±â´ÉÀ» º¸ÀåÇϱ⠾î·Æ´Ù.

Android¿¡¼­´Â iOS¿¡¼­º¸´Ù ½ºÅ©·ÑÀÌ À¯µ¶ ´À¸®´Ù.

¸ð¹ÙÀÏ¿¡¼­ ½ºÅ©·ÑÀ» ±¸ÇöÇÒ ¶§ °¡Àå ¹®Á¦°¡ µÇ´Â ºÎºÐÀº ¼º´ÉÀÌ´Ù. ƯÈ÷, Android¿¡¼­ ºü¸£°í ¸Å²ô·¯¿î ½ºÅ©·ÑÀ» ±¸ÇöÇÏ´Â °ÍÀº ¸Å¿ì ¾î·Á¿î ÀÏÀÌ´Ù. ±× ÀÌÀ¯´Â ´ÙÀ½°ú °°´Ù.

GC·Î ÀÎÇÑ UI ºí·Ï ¹ß»ý

°¡»ó ¸Ó½Å(Virtual Machine) ±â¹ÝÀÇ Android´Â ÁÖ±âÀûÀ¸·Î ¸Þ¸ð¸®¸¦ Á¤¸®ÇÏ´Â GC(garbage collection)°¡ ¹ß»ýÇÑ´Ù. À̶§ ¼ø°£ÀûÀ¸·Î ºí·Ï(block) Çö»óÀÌ ¹ß»ýÇϸç ÀÌ´Â UI ¼º´É Áö¿¬À» À¯¹ßÇÑ´Ù.

½º·¹µå ¿ì¼±¼øÀ§

Android¿¡¼­ÀÇ ½ºÅ©·ÑÀÌ iOS¿¡¼­º¸´Ù ´À¸° ±Ùº»ÀûÀÎ ÀÌÀ¯´Â ³·Àº ¿ì¼±¼øÀ§ ¶§¹®ÀÌ´Ù. iOS´Â »ç¿ëÀÚÀÇ ÀÔ·Â(touch)ÀÌ ¹ß»ýÇßÀ» ¶§ 'UI ½º·¹µå'°¡ '½Ç½Ã°£(RealTime)' ¿ì¼±¼øÀ§·Î ó¸®ÇÑ´Ù. ¹Ý¸é, Android´Â »ç¿ëÀÚÀÇ ÀÔ·Â(touch)À» '¸ÞÀÎ ½º·¹µå'°¡ 'º¸Åë(normal)' ¿ì¼±¼øÀ§·Î ó¸®ÇÑ´Ù. µû¶ó¼­, ¾Æ¹«¸® Çϵå¿þ¾î°¡ ÁÁ´õ¶óµµ »ç¿ëÀÚ ÀÔ·Â ÀÎÁö°¡ ´À¸®±â ¶§¹®¿¡ UI ¹ÝÀÀ¼ºÀÌ ´À¸®´Ù.

Android¿¡¼­µµ ºü¸£°í ¸Å²ô·¯¿î ½ºÅ©·ÑÀ» ±¸ÇöÇÏ·Á¸é ´Ù¾çÇÑ Á¢±Ù¹ýÀ» °¡Áö°í ´ëÀÀÇØ¾ß ÇÑ´Ù. ±×·¸Áö ¾ÊÀ¸¸é ¼º´É ¹®Á¦¿¡ ºÀÂøÇÏ°Ô µÈ´Ù.

´Ù¾çÇÑ ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®

À§¿¡¼­ ¾ð±ÞÇÑ ÀÌÀ¯·Î ÀÎÇØ ÀÌ¹Ì ½ÃÁß¿¡´Â ¸¹Àº ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®°¡ ³ª¿Í ÀÖ´Ù. ´ëÇ¥ÀûÀÎ ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®·Î´Â iScroll4(http://cubiq.org/iscroll-4) , Sencha Touch(http://www.sencha.com/products/touch) ÀÇ DataView, List µîÀÌ ÀÖÀ¸¸ç, jQuery ±â¹ÝÀÇ °¢Á¾ Ç÷¯±×Àεµ ÀÖ´Ù.

ÇÏÁö¸¸ À̵é ÄÄÆ÷³ÍÆ®´Â ´Ù¾çÇÑ ¸ð¹ÙÀÏ ´Ü¸»±â¿¡ ¹ü¿ëÀûÀ¸·Î »ç¿ëÇϱ⿡´Â ´Ù¼Ò ¾ÈÀü¼º°ú ¼º´ÉÀÌ ¶³¾îÁø´Ù. ƯÈ÷, ±¹³»¿¡¼­ »ý»êµÇ´Â ¸ð¹ÙÀÏ ´Ü¸»±â¿¡¼­´Â ´õ¿í ±× Á¤µµ°¡ ½ÉÇÏ´Ù. ÀÌ¿Í °ü·ÃÇؼ­´Â Ç¥ 2¸¦ ÂüÁ¶ÇÑ´Ù.

JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®(jindo.m.Scroll)

½ºÅ©·Ñ ÄÄÆ÷³ÍÆ® ±¸Á¶

JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®´Â ºü¸£°í ¾ÈÁ¤ÀûÀÌ¸ç ¸Å²ô·¯¿î ½ºÅ©·ÑÀ» ¸ñÇ¥·Î ±¸ÇöµÇ¾ú´Ù. JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®ÀÇ ±¸Á¶´Â ºñ±³Àû °£´ÜÇÏ´Ù. »ç¿ëÀÚ°¡ º¸´Â View ¿µ¿ª°ú ³»¿ëÀÌ Á¸ÀçÇÏ´Â Content ¿µ¿ªÀ¸·Î ·Î ±¸¼ºµÇ¾î ÀÖÀ¸¸ç, »ç¿ëÀÚ°¡ View ¿µ¿ªÀ» ÅÍÄ¡ÇÏ¿© ÄÜÅÙÃ÷¸¦ ½ºÅ©·ÑÇÏ´Â ¹æ½ÄÀÌ´Ù.

±×¸² 4 JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®ÀÇ ±¸Á¶

½ºÅ©·Ñ ¾Ö´Ï¸ÞÀ̼Ç

ÃÖÀûÀÇ ±¸Çö ¹æ½Ä

¸ð¹ÙÀÏ À¥¿¡¼­ ¾Ö´Ï¸ÞÀ̼ÇÀ» ±¸ÇöÇÏ´Â ±â¼ú¿¡´Â JavaScript, CSS3, SVG, Canvas µî ´Ù¾çÇÑ ±â¼úÀÌ Á¸ÀçÇÏÁö¸¸, JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®´Â ÃÖÀûÀÇ ¼º´ÉÀ» À§ÇØ, Çϵå¿þ¾î °¡¼ÓÀÌ °¡´ÉÇÑ CSS3¿Í »ó´ëÀûÀ¸·Î ¸®¼Ò½º »ç¿ë·®ÀÌ ÀûÀº JavaScript ±â¼úÀ» º´ÇàÇØ »ç¿ëÇÑ´Ù.

´ÙÀ½ Ç¥´Â CSS3 ¼Ó¼ºÀÎ 'transform:translate' °ú 'transform:translate3d' À» »ç¿ëÇÏ°í, TimingFunction°ú JavaScriptÀÇ setTimeout ÇÔ¼ö¸¦ º´ÇàÇÏ¿© ¾Ö´Ï¸ÞÀ̼ÇÀ» ±¸ÇöÇßÀ» ¶§ÀÇ Æ¯Â¡À» Á¤¸®ÇÑ Ç¥ÀÌ´Ù.

Ç¥ 1. CSS3¿Í JavaScript ±¸Çö ±â¼ú ºñ±³

À̵¿ ¹æ½Ä CSS3 Transform:Translate CSS3 Trnasform:Translate3d
¾Ö´Ï¸ÞÀÌ¼Ç ¹æ½Ä setTimeoutÀ» ÅëÇÑ ½ºÅ©¸³Æ® ¹æ½Ä CSS3 TimingFunctionÀ» ÅëÇÑ ¹æ½Ä setTimeoutÀ» ÅëÇÑ ½ºÅ©¸³Æ® ¹æ½Ä CSS3 TimingFunctionÀ» ÅëÇÑ ¹æ½Ä
¾Ö´Ï¸ÞÀÌ¼Ç Ç°Áú Áß »ó Áß »ó
Çϵå¿þ¾î °¡¼Ó ¹Ì»ç¿ë ¹Ì»ç¿ë »ç¿ë »ç¿ë
±¸Çö ³­À̵µ ¾î·Á¿ò ½¬¿ò ¾î·Á¿ò ½¬¿ò
¸®¼Ò½º »ç¿ë·® ÀûÀ½ ¸¹À½ ÀûÀ½ ¸¹À½
¸¶Å©¾÷ ¿µÇâµµ °ÅÀÇ ¾øÀ½ ¹Î°¨ÇÔ °ÅÀÇ ¾øÀ½ ¹Î°¨ÇÔ

Çϵå¿þ¾î°¡ °í»ç¾çÀ̰ųª ÄÜÅÙÃ÷ÀÇ ¾çÀÌ ÀûÀ» ¶§´Â 'CSS3 Translate(3d) + CSS3 TimingFunction' ¹æ½ÄÀ» ÀÌ¿ëÇÏ´Â °ÍÀÌ ÁÁ°í, Çϵå¿þ¾î°¡ Àú»ç¾çÀ̰ųª ÄÜÅÙÃ÷ÀÇ ¾çÀÌ ¸¹À» ¶§´Â 'CSS3 Translate(3d) + setTimeoutÀ» ÅëÇÑ ½ºÅ©¸³Æ® ¹æ½Ä'À» ÀÌ¿ëÇÏ´Â °ÍÀÌ ÁÁ´Ù.

¹Ý¸é, ¾Ö´Ï¸ÞÀÌ¼Ç Ç°Áú Ãø¸é¿¡¼­´Â 'setTimeoutÀ» ÅëÇÑ ½ºÅ©¸³Æ® ¹æ½Ä'º¸´Ù´Â 'CSS3 TimingFunction ¹æ½Ä'À» ¼±ÅÃÇÏ´Â °ÍÀÌ ´õ ÁÁ´Ù.

¸ð¹ÙÀÏ ´Ü¸»±âº° Â÷º°È­

¼º´É°ú Ç°Áú Ãø¸é¿¡¼­´Â À§ Ç¥¸¦ ÅëÇØ ¾î´À Á¤µµ ´ë¾ÈÀ» ãÀ» ¼ö ÀÖÁö¸¸, ½ÇÁ¦ ¸ð¹ÙÀÏ ´Ü¸»±â¿¡¼­´Â ´Ü¸»±âº° ¹ö±×¿Í Çϵå¿þ¾î °¡¼Ó Áö¿ø ¿©ºÎ¿¡ µû¶ó ¼±ÅÃÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀÌ ¸¹ÀÌ ´Þ¶óÁø´Ù. ¾Æ·¡ ±×¸²Àº Çϵå¿þ¾î °¡¼ÓÀ» »ç¿ëÇÏ´Â CSS3 3D TransformÀÇ Áö¿ø ¿©ºÎ¸¦ ºê¶ó¿ìÀúº°·Î Á¤¸®ÇÑ Ç¥ÀÌ´Ù.

±×¸² 5 CSS3 3D Áö¿ø ¿©ºÎ(¿øº» Ãâó: http://caniuse.com/#feat=transforms2d)

iOS´Â ÃʱâºÎÅÍ Çϵå¿þ¾î °¡¼ÓÀ» Áö¿øÇßÁö¸¸, Android´Â 3.0 ¹öÀüºÎÅÍ Çϵå¿þ¾î °¡¼ÓÀ» Áö¿øÇϱ⠽ÃÀÛÇØ Android 4.0 ¹öÀüÀÌ µÇ¾î¼­¾ß ¾ÈÁ¤ÀûÀ¸·Î Áö¿øÇÑ´Ù.

Áö¿øÇÏÁö ¾Ê´Â ¸ð¹ÙÀÏ ´Ü¸»±â¿¡¼­ CSS3 3D¸¦ »ç¿ëÇÏ¸é ·»´õ¸µ ½Ã È­¸éÀÌ ±ôºýÀ̰ųª ·¹À̾ƿôÀÌ ±úÁö´Â ¹®Á¦°¡ ¹ß»ýÇÑ´Ù. ÀÌ·² ¶§´Â ¿ÀÈ÷·Á 'setTimeoutÀ» ÅëÇÑ ½ºÅ©¸³Æ® ¹æ½Ä'À» Àû¿ëÇÏ´Â °ÍÀÌ ´õ¿í È¿°úÀûÀÌ´Ù.

JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®´Â À§¿¡¼­ ¾ð±ÞÇÑ Á¡µéÀ» °í·ÁÇÏ¿© ±¸ÇöµÇ¾ú´Ù.

´Ù¾çÇÑ ±¸Çö¹æ½ÄÀ» ¸ð¹ÙÀÏ ´Ü¸»±â Ư¼º¿¡ ¸Â°Ô Àû¿ëÇ߱⠶§¹®¿¡ ´ë»ó ´Ü¸»±â¿¡¼­ ÃÖÀûÀÇ ¼º´É°ú ¾ÈÀü¼ºÀ» º¸ÀδÙ.

´Ù¸¥ ÄÄÆ÷³ÍÆ®¿Í ºñ±³(iScroll4 vs. jindo.m.Scroll)

´ÙÀ½Àº Àü ¼¼°èÀûÀ¸·Î ³Î¸® »ç¿ëµÇ°í ÀÖ´Â ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®ÀÎ iScroll4¿Í JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®¸¦ ºñ±³ÇÑ ³»¿ëÀÌ´Ù.

Ç¥ 2. iScroll4¿Í jindo.m.Scroll ºñ±³

±¸ºÐ iScroll4 Jindo.m.Scroll
±¸Çö¹æ½Ä CSS3 Translate(3d) + CSS3 TimingFunction, CSS3 Translate(3d) + setTimeoutÀ» ÅëÇÑ ½ºÅ©¸³Æ® ¹æ½Ä CSS3 Translate(3d) + CSS3 TimingFunction , CSS3 Translate(3d) + setTimeoutÀ» ÅëÇÑ ½ºÅ©¸³Æ® ¹æ½Ä
±âº» ½ºÅ©·Ñ ¹æ½Ä CSS3 Translate(3d) + setTimeoutÀ» ÅëÇÑ ½ºÅ©¸³Æ® ¹æ½Ä ¸ð¹ÙÀÏ ´Ü¸»±âº°·Î ¼±º°Àû Àû¿ë
¾ÈÁ¤¼º ¸î¸î Android ´Ü¸»±â¿¡¼­ ½ºÅ©·Ñ µµÁß È­¸éÀÌ ÇϾé°Ô µÇ°Å³ª ±ôºý°Å¸°´Ù. ±¹³» ¸ð¹ÙÀÏ ´Ü¸»±â¿¡¼­ ¾ÈÁ¤ÀûÀ¸·Î ½ºÅ©·ÑµÈ´Ù. ¶ÇÇÑ, º°µµ ¿É¼ÇÀ» ÅëÇØ ´Ü¸»±â º°·Î Á¦¾î°¡ °¡´ÉÇÏ´Ù
Àû¿ë¹üÀ§ ¸ð¹ÙÀÏ, µ¥½ºÅ©Åé ¸ð¹ÙÀÏ
±â´É ÄÜÅؽºÆ®(context) ¸Þ´º ¹× ÇÏÀ̶óÀÌÆ® Áö¿ø ¾È ÇÔ Pull Down/Pull UpÀ» ÀÌ¿ëÇÑ ÄÜÅÙÃ÷ ¾÷µ¥ÀÌÆ® Áö¿ø Snap, Zoom-in Áö¿ø ÄÜÅؽºÆ®(context) ¸Þ´º ¹× ÇÏÀ̶óÀÌÆ® Áö¿ø Pull Down/Pull UpÀ» ÀÌ¿ëÇÑ ÄÜÅÙÃ÷ ¾÷µ¥ÀÌÆ® Áö¿ø
¼º´É   ¼º´É»ó Â÷ÀÌ´Â iScroll4¿Í Â÷ÀÌ°¡ ¾øÀ¸³ª ´Ü¸»±âº°·Î °¡¼Óµµ¸¦ ´Ù¸£°Ô ¼³Á¤ÇØ Ã¼°¨¼Óµµ¸¦ Çâ»ó½ÃÄ×´Ù.

µÎ °¡Áö ±¸Çö ¹æ½Ä¿¡¼­ Å« Â÷ÀÌÁ¡Àº ¾øÁö¸¸, JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®´Â iScroll4¿¡ ºñÇØ ¸ð¹ÙÀÏ¿¡ ´õ ÃÖÀûÈ­µÇ¾î ÀÖ´Ù. »Ó¸¸ ¾Æ´Ï¶ó, °¢°¢ÀÇ ´Ü¸»±â Ư¼º¿¡ µû¶ó ¼±º°ÀûÀ¸·Î ÃÖÀûÈ­µÇ¾î Àֱ⠶§¹®¿¡ Á¦Á¶»ç°¡ ´Ù¾çÇÑ Android °è¿­¿¡¼­´Â iScroll4º¸´Ù ¿ì¼öÇÑ ¼º´É°ú ¾ÈÀü¼ºÀ» º¸ÀδÙ.

´ÙÀ½ ¿µ»óÀº °¶·°½ÃS2(2.3.6) ´Ü¸»±â¿¡¼­ iScroll4¿Í JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®ÀÇ ¼º´ÉÀ» ºñ±³ÇÑ µ¿¿µ»óÀÌ´Ù. JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®´Â Android¿¡¼­µµ ºü¸£°í ºÎµå·¯¿î ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ Áö¿øÇÏ°í ÀÖ´Ù.

JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ® »ç¿ëÇϱâ

¼¼·Î·Î ½ºÅ©·ÑÇÒ ¼ö ÀÖ´Â °£´ÜÇÑ ½ºÅ©·Ñ ÆäÀÌÁö¸¦ ÀÛ¼ºÇؼ­ JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®¸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ýÀ» ¼³¸íÇÏ°Ú´Ù.

JMC ´Ù¿î·Îµå

JMCÀÇ ¼±Åà ´Ù¿î·Îµå ÆäÀÌÁö¿¡¼­ Scroll ÄÄÆ÷³ÍÆ®¸¦ ´Ù¿î·ÎµåÇÑ´Ù. ÄÄÆ÷³ÍÆ®¸¦ ´Ù¿î·ÎµåÇÒ ¶§¿¡´Â ÀÇÁ¸¼º ÀÚµ¿ üũ¸¦ ¼±ÅÃÇØ ÀÇÁ¸¼ºÀÌ ÀÖ´Â °ü·Ã ¸ðµâÀ» ÇÔ²² ´Ù¿î·ÎµåÇϵµ·Ï ¼³Á¤ÇÑ´Ù.

±×¸² 6 JMC ¼±Åôٿî·Îµå

Jindo ÇÁ·¹ÀÓ¿öÅ©¿Í JMC ÄÄÆ÷³ÍÆ® ÆÄÀÏ Ãß°¡

JMC´Â Jindo ÇÁ·¹ÀÓ¿öÅ© ±â¹ÝÀ¸·Î °³¹ßµÆ±â ¶§¹®¿¡ ±âº»ÀûÀ¸·Î Jindo ÇÁ·¹ÀÓ¿öÅ©¸¦ Ãß°¡ÇØ¾ß ÇÑ´Ù. Âü°í·Î, JMC ¼±Åà ´Ù¿î·Îµå¿¡¼­´Â Jindo ÇÁ·¹ÀÓ¿öÅ©±îÁö ´Ù¿î·ÎµåµÇÁö´Â ¾Ê´Â´Ù.

JS ÆÄÀÏ Ãß°¡

<!-- Jindo ÇÁ·¹ÀÓ¿öÅ© Ãß°¡ -->  
<script src="http://helloworld.naver.com/js/jindo.all.ns.js"
 charset="utf-8">
</script>

<!-- JMC ¼±Åà ´Ù¿î·Îµå ÆäÀÌÁö¿¡¼­ ´Ù¿î·ÎµåÇÑ JMC Ãß°¡ -->  
<script src="http://helloworld.naver.com/js/jindo_mobile_component.js"
 charset="utf-8"></script>

HTML ÀÛ¼º

½ÇÁ¦ È­¸é¿¡¼­ º¸ÀÌ´Â View ¿µ¿ª(<div id="scrollView">)°ú ½ºÅ©·ÑµÉ ³»¿ëÀÎ Contents ¿µ¿ª(<ul>)À» ±¸¼ºÇÑ´Ù. JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®ÀÇ ±¸Á¶´Â ºñ±³Àû °£´ÜÇؼ­ ¸¶Å©¾÷ ¶ÇÇÑ °£´ÜÇÏ´Ù. ±âº»ÀûÀÎ ¸¶Å©¾÷ ÇüÅ´ ´ÙÀ½°ú °°´Ù.

½ºÅ©·Ñ ¿µ¿ª HTML

<!-- Scroll View -->  
<div id="scrollView">

    <!-- Scroll Contents -->
    <ul>
        <li>… »ý·« …</li>
        <li>… »ý·« …</li>
        <li>… »ý·« …</li>
    </ul>
</div>  

JavaScript ÀÛ¼º

jindo.m.ScrollÀÇ Ã¹ ¹ø° ÀÎÀÚ·Î ½ºÅ©·ÑÀ» Àû¿ëÇÒ ¿µ¿ªÀÇ ID¿Í µÎ ¹ø° ÀÎÀÚ·Î ¿É¼Ç°ªÀ» Àü´ÞÇÏ´Â ÀνºÅϽº¸¦ »ý¼ºÇÑ´Ù. ¿É¼Ç¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ³»¿ëÀº ·¹ÆÛ·±½º ÆäÀÌÁö¸¦ ÂüÁ¶Çϱ⠹ٶõ´Ù.

Scroll ÄÄÆ÷³ÍÆ® ÃʱâÈ­ ÄÚµå

// ³ôÀÌ°¡ 210pxÀÎ JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®¸¦ »ý¼ºÇÑ´Ù.
var oScroll = new jindo.m.Scroll("scrollView", {  
    nHeight : 210
});

Àüü ÄÚµå

±¸ÇöµÈ Àüü ÄÚµå´Â ´ÙÀ½°ú °°´Ù.

head ÄÚµå

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>jindo.m.Scroll</title>  
<!-- Jindo ÇÁ·¹ÀÓd¿öÅ© Ãß°¡ -->  
<script src="http://helloworld.naver.com/js/jindo.all.ns.js"
 charset="utf-8"></script>  
<!-- JMC ¼±Åà ´Ù¿î·Îµå¿¡¼­ ´Ù¿î·Îµå ¹ÞÀº JMC Ãß°¡ -->  
<script src="http://helloworld.naver.com/js/jindo_mobile_component.js"
 charset="utf-8"></script>

body ÄÚµå

<!-- Scroll View -->  
<div id="scrollView">  
    <!-- Scroll Contents  -->
    <div>
        <ul>
            <li>
                <p class="scl_tmb">
                    <a href="http://m.news.naver.com/">
                  <img src="http://helloworld.naver.com/../im/ico_news.jpg"
                     alt="³×À̹ö ´º½º" width="57" height="57" style="">
                    </a>
                </p>
                <p class="scl_cnt">
                    Scroll List 1<br>
                    <a href="http://m.news.naver.com/" class="scl_link"
                     style="">³×À̹ö ´º½º ¹Ù·Î°¡±â</a>
                </p>
            </li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            ...
        </ul>
    </div>
</div>  
<script type="text/javascript">  
// ³ôÀÌ°¡ 210pxÀÎ JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®¸¦ »ý¼ºÇÑ´Ù.
var oScroll = new jindo.m.Scroll("scrollView", {  
    nHeight : 210
});
</script>  

JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÏ¸é ´Ü ¸î ÁÙ ¸¸À¸·Î ¸ð¹ÙÀÏ ´Ü¸»±â¿¡
ÃÖÀûÈ­µÈ °íÁ¤ ¿µ¿ªÀÇ ¼¼·Î ½ºÅ©·Ñ ±â´ÉÀ» ±¸ÇöÇÒ ¼ö ÀÖ´Ù.

¸¶Ä¡¸ç

iScroll4, Sencha Touch, jQuery µî ¸¹Àº ¸ð¹ÙÀÏ ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®°¡ ½ÃÁß¿¡ ³ª¿Í ÀÖÁö¸¸, °¢°¢ÀÇ ¸ð¹ÙÀÏ ´Ü¸»±â¿¡ ÃÖÀûÈ­µÈ ¼º´É°ú ¾ÈÀü¼ºÀ» º¸ÀåÇÏ´Â ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®´Â ã±â Èûµé´Ù. ƯÈ÷ Android ´Ü¸»±âÀÇ Á¡À¯À²ÀÌ ³ôÀº ±¹³»¿¡¼­ ¿Ü±¹»ê ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇØ ¼­ºñ½º¸¦ ¿î¿µÇϱ⿡´Â ¸¹Àº ¾î·Á¿òÀÌ ÀÖ´Ù.

JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®´Â ½ÃÁß¿¡ ³ª¿Í ÀÖ´Â ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ® Áß °¡Àå ¼­ºñ½º¿¡ ÀûÇÕÇÑ ÄÄÆ÷³ÍÆ®¶ó°í ´Ü¾ðÇÒ ¼ö ÀÖ´Ù. ÇÏÁö¸¸, ÀÌ·¯ÇÑ ÄÄÆ÷³ÍÆ®µµ ½Ç¼­ºñ½º¿¡ ¾Æ¹«·± ÁÖÀÇ ¾øÀÌ Àû¿ëÇÏ¸é ±â´É°ú ¼º´É¿¡ Á¦¾àÀÌ »ý±æ ¼ö ÀÖ´Ù. ƯÈ÷, ºê¶ó¿ìÀú°¡ ¼ö¿ëÇÒ ¼ö ¾øÀ» Á¤µµÀÇ ´ë¿ë·® ÄÜÅÙÃ÷¸¦ ½ºÅ©·ÑÇÒ ¶§´Â ¼º´É ¹®Á¦¿¡ Á÷¸éÇÏ°Ô µÈ´Ù. JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®´Â ÀÌ·¯ÇÑ ¹®Á¦¸¦ ÇØ°áÇÒ¼ö ÀÖ´Â ¹æ¹ýÀ» Áö±Ýµµ °í¹ÎÇÏ°í ÀÖ´Ù.

±× ´ëÇ¥ÀûÀÎ ¿¹°¡ ¹«ÇѽºÅ©·ÑÀÌ´Ù. Pull Down/Pull Up ±â´ÉÀ» ÀÌ¿ëÇØ ±âÁ¸ ÄÜÅÙÃ÷¸¦ Á¦°ÅÇÏ°í ½Å±Ô ÄÜÅÙÃ÷¸¦ Áõ°¡ÇÏ´Â ½ÄÀ¸·Î ÄÜÅÙÃ÷¸¦ ÀÏÁ¤ÇÑ ¹üÀ§·Î À¯ÁöÇϸç ÃÖ»óÀÇ ¼Óµµ°¡ ³ª¿Ã¼ö ÀÖµµ·Ï ÇÏ´Â ¹æ½ÄÀÌ´Ù. ÇÏÁö¸¸, ¾ÆÁ÷Àº ³Ñ¾î¾ß ÇÒ »êÀÌ ¸¹´Ù.

¸ð¹ÙÀÏ È¯°æÀº ±Þ¼Óµµ·Î ¹ßÀüÇÏ°í ÀÖ´Ù. ¾Û¿¡¼­ °¡´ÉÇÏ´ø ±â´ÉµéÀÌ Á¡Â÷ ¸ð¹ÙÀÏ À¥¿¡¼­µµ °¡´ÉÇÏ°Ô µÇ°í ÀÖ´Ù. ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®µµ °á±¹ ¸ðµç ºê¶ó¿ìÀú¿¡¼­ ó¸®ÇÒ ¼ö ÀÖ´Â ¶§°¡ ¿Ã Áöµµ ¸ð¸¥´Ù. ÇÏÁö¸¸, ¹«Åδë°í ±â´Ù¸®´Â ¹æ¹ýÀº Çö½ÇÀûÀÌÁö ¸øÇÏ´Ù. ¸ð¹ÙÀÏ È¯°æÀÇ ¹ßÀü°ú ÇÔ²² ¾ÕÀ¸·Î º¯È­ÇÏ´Â JMC ½ºÅ©·Ñ ÄÄÆ÷³ÍÆ®¸¦ °ü½ÉÀÖ°Ô ÁöÄѺÁ ÁÖ±æ ¹Ù¶õ´Ù.


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 61624495 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.