第一天認識jQuery mobile 框架,資源,書籍

時間 2019-11-06

標籤第一天認識 jquery mobile 框架資源書籍欄目 JQuery 简体版

原文原文鏈接

前言

這裏就不對jquery mobile作過多的歷史介紹,直接進行jQuery mobile的學習css

jQuery mobile 框架縱覽

1.jQuery mobile 的顯示結構

如圖1.1html

從上面的圖示咱們能夠知道,一個完整的頁面是由html5

header

content

footer

這三部分組成.那這三部分是否是一個jQuerymobile 頁面必須擁有的元素呢,並且必須是這樣的排序呢?答案是:不是,這些元素能夠組合和排序能夠任由本身自由選擇,固然,我我的建議仍是嚴格按照規範進行排序.jquery

2,第一個Hello,World 的jQuery Mobile!

在進行咱們第一個jQuery Mobile Hello world程序以前,咱們要對html5進行一個簡單的認識,由於,jQuery Mobile是基於Html5開發的.框架

1.文檔的聲明和jQuery Mobile的初始化

相比當初html 4 那種冗長的文檔的聲明相比,html5的文檔聲明無疑簡潔不少,你只需在你的頁面第一行輸入:工具
<!DOCTYPE html>
這樣就完成了一個html5 的文檔類型聲明瞭,接下來就開始一個標準的html的頁面編寫:學習
<html>
<head>
<meta charset="utf-8">
<title>Hello,Mobile,world</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<head>
<body>
</body>
</html>
這樣一個標準的jQuery Mobile的文檔格式就初始化完畢,這裏,我使用了jQuery Mobile 的CDN 鏈接,如何是本地的話,只要作出相應的替換便可.編碼

2.編寫咱們的頁面

編碼的步驟按照我上面的元素寫便可,page,header,footer,注意!html5 新增的一個屬性,data-role!!!lua
<div data-role="page">
  <div data-role="header">
     <h1>Hello,World!!</h1>  
  </div>
  <div data-role="content">
     <p>Hello,Mobile World!</p>  
  </div>
  <div data-role="footer">
   <h1>Coypright:youxiachai</h1>
  </div>
</div>
這樣就完成了咱們第一個jQuery mobile的頁面,很簡單是不?spa

一個完整的jQuery mobile頁面
<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Hello,Mobile,world</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 
<div data-role="page">
	<div data-role="header">
		<h1>Hello,World</h1>
	</div>

	<div data-role="content">	
		<p>Hello,Mobile,World!!<p>
	</div>
	<div data-role="footer">
		<h4>Copyright:youxiachai</h4>
	</div>
</div>

</body>
</html>
咱們的第一個jQuery Mobile就這樣完成了,是否是簡單到難以置信呢?沒錯,jQuery mobile就是這麼方便,下面介紹一下,咱們從那裏獲取學習的資源,次日,我詳細說說jQuery mobile 的幾個經常使用組件,若是,你以爲這些很不夠的話,我建議你,認真看下我提供的傳送門

jQuery 的學習資源

http://jquerymobile.com/resources/

jQuery Mobile 已經提供了很是豐富的學習資源,涵蓋了,jQuery mobile 項目的演示,書籍,框架,第三方插件,,工具,還有相應的教程和文章,固然,都是英文的…

jQuery 書籍介紹

如下都是豆瓣的傳送門,書籍介紹我已經所有補全了

jQuery mobile

http://book.douban.com/subject/6724989/

jQuery Mobile First Look

http://book.douban.com/subject/6954448/

Using the CSS3 Mobile Pack for Adobe Fireworks CS5

http://book.douban.com/subject/7564687/

Adobe Dreamweaver Cs5.5 Studio Techniques

http://book.douban.com/subject/7070561/

對了你們應該更關心電子版吧.呵呵,正在上傳中,由於版權問題,等課程完了就撤銷…還有下載了的朋友不要處處傳,就算要傳也要記得不要寫上轉載地址.原本是打算打包上傳..不知道爲何115上傳速度才幾K….就單個上傳好了

http://115.com/file/aqx9nbee#
__Using_the_CSS3_Mobile_Pack_for_Adobe_Fireworks_CS5.epub
http://115.com/file/cl142epx#
__jQuery_Mobile_First_Look.pdf

http://115.com/file/aqx9nw32#

__jQuery_Mobile.pdf
http://115.com/file/cl142kj7#

__Adobe_Dreamweaver_CS5_5_Studio_Techniques__Designing_and_Developing_for_Mobile_with_jQuery__HTML5__and_CSS3.pdf