독자 분들께서 문의 해주신 jQuery Mobile 완벽가이드 책의 내부 스크롤 관련 내용입니다.


문의)


p271의 내부 스크롤 내용 중에서 data-scroll='x'의 경우 스크롤이 원래상태로 돌아가 버립니다.

스크롤된 상태를 유지 할려면 어떻게 하면 되는지요?



답변)


1. 예제 파일 : cp4_scroll.html

2. 아래와 같이 x 축 스크롤 부분에 class="scrollBtn" 를 첫번째 태그에서 삭제하시고 두번째 div 태그에 추가해주세요


<div data-role="fieldcontain" data-scroll="x" >

<div data-role="controlgroup" data-type="horizontal"  class="scrollBtn"  >

<a href="#" data-role="button">button A</a>

...

<a href="#" data-role="button">button L</a>

</div>

</div>


3. CSS를 정의하고 있는 scroll.css 파일을 열어 주시고,

4. 아래와 같이 scrollBtn 속성을 변경해 주세요.


.scrollBtn{

height: 70px;

width: 1400px;

}


5. 웹페이지에서 다시 확인해 보시면 아래와 같이 정상적으로 보여 집니다.




위와 같이 변경해 보시고 잘 안되시면 언제든지 메일을 통해 연락주시면 성심껏 답변 해드리도록 하겠습니다.

관심을 가져 주시고 문의를 주신 분들께 감사드립니다.

즐겁고 행복한 가정의 달 맞이 하시길 바랍니다.^^




'----- IT ----- > jQuery Moblie' 카테고리의 다른 글

[책] p250 위치 정보  (0) 2012.05.12
[책] p271 내부 스크롤 (nested scroll)  (0) 2012.05.12
[책] jQuery Mobile 완벽 가이드  (5) 2012.04.07
jQuery Mobile 1.0.1 released  (0) 2012.01.28
jQuery Mobile 1.0 출시  (0) 2011.11.22
jQuery Mobile 1.0RC3 Released  (0) 2011.11.15
Posted by 대소니

댓글을 달아 주세요