Jquery Mobile 학습 노트 01

4070 단어 jqueryhtml5
1. Jquery Mobile 가 져 오기http://jquerymobile.com/download/ 최신 Jquery Mobile 라 이브 러 리 를 다운로드 하여 웹 페이지 에 jquery. mobile - *. min. css, jquery. mobile - *. min. js 를 도입 합 니 다. *Jquery Mobile 버 전 번호 입 니 다.Jquery 를 도입 해 야 합 니 다. 물론 외부 체인 에 있 는 Jquery Mobile 과 Jquery 라 이브 러 리 를 직접 도입 할 수 있 습 니 다. 예 를 들 어 jquery mobile 다운로드 페이지 에서 보 여 준 예: < link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> < / script > 2. 첫 페이지 Jquery Mobile 페이지 쓰기
<body>
<!-- data-role="page" 是在浏览器中显示的页面。 -->
  <div data-role="page" id="page1" data-fullscreen="true">
  <!-- 头部data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮) -->
  <div data-role="header" data-position="fixed"><!-- data-position=fixed 填充页面 header与footer一致,不然可能在移动端页面出现上下位移差-->
  <h1>欢迎来到我的移动端网页</h1>
  </div>
  <!-- 正文data-role="content" 定义了页面的内容,比如文本, 图片,表单,按钮等。 -->
  <div data-role="content"><!-- 正文部分-->
  厉害吗?<br>
  <a href="#page2">跳往页面2</a>
  </div>
  <!-- 尾部data-role="footer" 用于创建页面底部工具条。 -->
  <div data-role="footer" data-position="fixed">
  <h1>结束了!</h1>
  </div>
  </div>
  </body>

 data - * html 5 에서 유래 한 각종 ui 요 소 는 header, content, footer 용기 에 HTML 요소 - 단락, 그림, 제목, 목록 등 을 추가 할 수 있 습 니 다.
 
첫 번 째 간단 한 대화 페이지 를 써 보 세 요.
<html>
  <head>
    <title>首页</title>
<link rel="stylesheet" href="jQuery/JqueryMobile/jquery.mobile-1.4.5.min.css" />
<script src="jQuery/jquery-1.11.2.min.js"></script>
<script src="jQuery/JqueryMobile/jquery.mobile-1.4.5.min.js"></script>
  </head>
  
  <body>
  <div data-role="page" id="page1" data-fullscreen="true">
  <!-- 头部 -->
  <div data-role="header" data-position="fixed">
  <h1>欢迎来到我的移动端网页</h1>
  </div>
  <!-- 正文 -->
  <div data-role="content">
  厉害吗?<br>
  <a href="#page2">跳往页面2</a>
  </div>
  <!-- 尾部 -->
  <div data-role="footer" data-position="fixed">
  <h1>结束了!</h1>
  </div>
  </div>
  <div data-role="page" id="page2">
  <!-- 头部 -->
  <div data-role="header" data-position="fixed">
  <h1>欢迎来到我的移动端网页</h1>
  </div>
  <!-- 正文 -->
  <div data-role="content">
  厉害!<br>
  <a href="#page3" data-rel="dialog">跳往页面3</a><!-- 以弹窗方式的窗口 -->
  </div>
  <!-- 尾部 -->
  <div data-role="footer" data-position="fixed">
  <h1>页面2结束了!</h1>
  </div>
  </div>
  <div data-role="page" id="page3">
  <!-- 头部 -->
  <div data-role="header" data-position="fixed">
  <h1>欢迎来到我的移动端网页</h1>
  </div>
  <!-- 正文 -->
  <div data-role="content">
  厉害!!<br>
  <a href="#page1">跳往页面1</a>
  </div>
  <!-- 尾部 -->
  <div data-role="footer" data-position="fixed">
  <h1>页面2结束了!</h1>
  </div>
  </div>
  </body>
</html>

좋은 웹페이지 즐겨찾기