對jquery mobile的學習過程一

博主以前對於pc端使用的總是喜歡用html5+css3+javascript+jquery,對移動端總是愛使用原生的js和jquery包括jqueryui,同時也經常會使用bootstrap這種響應似的框架。

最近本人從新認識了jquery本身自帶的jquery mobile框架感覺裏面的很多功能都是非常的好用無論是動態效果還是網頁之間的相互傳值都處理的相當的適合。

下面本人想將自己學習jquery mobile的一個過程寫成博客,一方面是爲了方便與其他博主進行交流另一方方面也是爲了更好的提高自己來學習新的技術。

1.當然是jquery mobile的安裝,這個熟悉前端開發的工程師應該都不會陌生只用去jquerymobile的官網下載最新的版本然後通過script引入就可以了,這個跟jquery的使用

方式是一樣的。

2.jquerymobile的頁面

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>


<div data-role="page">
  <div data-role="header">
    <h1>歡迎訪問我的主頁</h1>
  </div>


  <div data-role="content">
    <p>現在我已經成爲一名移動開發者!</p>
  </div>


  <div data-role="footer">
  <h1>頁腳文本</h1>
  </div>
</div> 


</body>
</html>

  • data-role="page" 是顯示在瀏覽器中的頁面
  • data-role="header" 創建頁面上方的工具欄(常用於標題和搜索按鈕)
  • data-role="content" 定義頁面的內容,比如文本、圖像、表單和按鈕,等等
  • data-role="footer" 創建頁面底部的工具欄

3.在jquery mobile中添加頁面

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">轉到頁面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">轉到頁面一</a>
  </div>
</div>

<a href="externalfile.html">轉到外部頁面</a>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章