젠트의 프로그래밍 세상

[jquery mobile] alpha버전에서 iScroll 사용하기


jquery mobile alpha버전에서는 아직 iScroll기능을 제공하지 않는다.
차후 버전에서는 제공을 할것으로 예상을 하지만 alpha버전에서 iScroll기능을
사용하고 싶다면 아래의 빨간색부분을 참고바람.

출처 : http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
 <title>jQuery Mobile: iScroll Test</title>
 <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
 <script src="http://cubiq.org/dropbox/iscroll/iscroll.js?v3.7.1"></script>
    <script src="https://github.com/yappo/javascript-jquery.mobile.iscroll/raw/master/jquery.mobile.iscroll.js"></script>  
</head>
<body>

<div data-role="page" data-iscroll="enable" data-theme="b" id="home">
 <div data-role="header">
  <h1>iScroll Test</h1>
 </div>
 <div data-role="content">
  <div data-iscroll="scroller">
   <ul data-role="listview" data-theme="c" >
    <li><a href="#about">01</a></li>
    <li><a href="#about">02</a></li>
    <li><a href="#about">03</a></li>
    <li><a href="#about">04</a></li>
    <li><a href="#about">05</a></li>
    <li><a href="#about">06</a></li>
    <li><a href="#about">07</a></li>
    <li><a href="#about">08</a></li>
    <li><a href="#about">09</a></li>
    <li><a href="#about">10</a></li>
    <li><a href="#about">11</a></li>
    <li><a href="#about">12</a></li>
    <li><a href="#about">13</a></li>
    <li><a href="#about">14</a></li>
    <li><a href="#about">15</a></li>
    <li><a href="#about">16</a></li>
    <li><a href="#about">17</a></li>
    <li><a href="#about">18</a></li>
    <li><a href="#about">19</a></li>
    <li><a href="#about">20</a></li>
   </ul>
  </div>
 </div>
</div>

<div data-role="page" data-theme="b" id="about">
 <div data-role="header">
  <h1>iScroll Test</h1>
 </div>
 <div data-role="content">
  Hello!!!
 </div>
</div>

</body>
</html>


'프로그래밍 / 자바스크립트' 관련 글

더 보기

[javascript|자바스크립트] foreach 구문을 이용하여 JSON 값 쉽게 가져오기 (json key get value)

  • 2014.10.31
더 읽기

[jquery] 아이폰 가로(landscape),세로(portrait) 모드 변경 이벤트

  • 2011.04.04
더 읽기

[jquerymobile] 로딩(loadding) 애니메이션

  • 2011.04.02
더 읽기

[javascript] 해당 날짜의 요일 구하기

  • 2011.04.01
더 읽기

 

댓글

Copyright © 젠트의 프로그래밍 세상 All Rights Reserved

Designed by JB FACTORY

티스토리툴바