????接觸移動端開發很長時間了,今天做下筆記,幾下所學到的,今天的筆記是關于jquery?


modile滴。

? ? 首先,大家要知道:

javascript筆記,? ? jQuery Mobile 是創建移動 web 應用程序的框架。

? ? jQuery Mobile 適用于所有流行的智能手機和平板電腦。

? ? jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對頁面進行布局。

代碼:

<link rel="stylesheet" href="jquery.mobile-1.4.5.css" />

jquery mobile app案例。<script src="jquery-1.10.2.min.js"></script>

<script src="jquery.mobile-1.4.5.js"></script>

這要引入的三個文件。

由于jq mobile 是依賴于jq的,要先引入jq文件,否則jquery-1.10.2.min.js會報錯的,


jquery mobile?jquery.mobile-1.4.5.css也是要引入的,控制樣式。

data-role="page",定義了一個頁面容器,用于構建多頁面設計。

data-role="header",頁眉或標題欄。

data-role="content",是內容主體的包裝容器。

data-role="footer",頁腳。

jquerymobile案例?data-role="navbar",定義導航欄。

data-role="collapsible",可折疊。

data-role="collapsible-set",可折疊集合。(手風琴)

data-position='fixed',可以將頁腳定位在屏幕底部,其實,如果頁面高度沒有屏幕高度高


pc寫jquerymobile。,會定位在頁面底部。

data-transition="",設置頁面轉換效果,值為slide(滑動),slideup(卷起),slidedown(向


下滑動),pop(彈出),fade(淡入淡出),flip(翻轉),none(無)。

? ? 頁面到頁面的轉換過程,其實,步驟是這樣的:

jquerymobiledemo。1、用戶輕巧按鈕,導航到下一個頁面。

2、框架使用一個Hijax請求載入下一個頁面,然后添加到當前頁面的DOM中,當前頁面其實是


和下一個頁面并排放置的,因此準備發生一個平滑轉換。

3、框架轉換到另一個頁面。

jquerymobile模板。4、顯示下一個頁面,轉換完成。


data-role="dialog",彈層。

data-rel="back", 設置返回按鈕。

data-role="button", 設置按鈕。

jquerymobile組件,屬性:

data-corners="frue/false",設置按鈕是否有圓角。

data-mini="frue/false",設置是否是小按鈕。

data-shadow="frue/false",設置按鈕是否有陰影。

data-inline="true",設置多個按鈕并排顯示。

jquerymobile試題、

圖標:

data-icon="arrow-l",左箭頭。

data-icon="arrow-r",右箭頭。

data-icon="delete",刪除。

jquerymobile開發框架。data-icon="info",信息。

data-icon="home",首頁。

data-icon="back",返回。

data-icon="search",搜索。

data-icon="grid",網絡。

jquery treeview、data-iconpos 可以用來定位圖標。值為:top,bottom,left,right

data-iconpos="notext",只顯示圖標。

data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u",設置折疊圖標。

?