w3cschool的jQuery Mobile教程总结
w3cschool的jQuery Mobile教程總結
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
jQuery Mobile 工作于所有主流的智能手機和平板電腦上。
一 jQuery Mobile教程
jQuery Mobile教程
jQuery Mobile簡介
jQuery Mobile安裝
??? jQuery Mobile CDN:
<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>
jQuery Mobile頁面
??? data-role="page" 是在瀏覽器中顯示的頁面。
??? data-role="header" 是在頁面頂部創建的工具條 (通常用于標題或者搜索
按鈕)
??? data-role="content" 定義了頁面的內容，比如文本， 圖片，表單，按鈕
等。
??? data-role="footer" 用于創建頁面底部工具條。
??? 在鏈接中添加data-rel="dialog"讓用戶點擊鏈接時彈出對話框。
jQuery Mobile頁面切換
??? 頁面切換效果可被應用于任何使用 data-transition 屬性的鏈接或表單提
交：
<a href="#anylink" data-transition="slide">切換到第二個頁面</a>
jQuery Mobile按鈕
??? 在 jQuery Mobile 中，按鈕可通過三種方式創建：
??? 使用 <button> 元素
??? 使用 <input> 元素
??? 使用帶有 data-role="button" 的 <a> 元素
jQuery Mobile按鈕圖標
??? 添加圖標到您的按鈕，使用 data-icon 屬性：
<a href="#anylink" data-role="button" data-icon="search">Search</a>
jQuery Mobile工具欄
??? 頭部和尾部可以通過三種方式進行定位：
??? Inline - 默認。頭部欄和尾部欄與頁面內容內聯。
??? Fixed - 頭部欄和尾部欄固定在頁面的頂部和底部。
??? Fullscreen - 與 Fixed 定位模式基本相同，頭部欄和尾部欄固定在頁面的頂部和底部。但是當他工具欄滾動出屏幕之外時，不會自動重新顯示，除非點擊屏幕，這對于圖片或視頻類有提升代入感的應用是非常有用的。注意這種模式下工具欄會遮住頁面內容。
jQuery Mobile導航欄
??? 使用 data-role="navbar" 屬性來定義導航欄
jQuery Mobile可折疊塊
??? 創建一個可折疊的內容塊，需要為容器添加 data-role="collapsible" 屬性。
jQuery Mobile 網格
二 jQuery Mobile 列表
jQuery Mobile列表視圖
??? 應用方法就是在ul或ol標簽中添加data-role="listview"屬性。在每個項目(<li>)中添加鏈接，用戶可以點擊它。
jQuery Mobile列表內容
三 jQuery Mobile表單
jQuery Mobile表單基礎
jQuery Mobile表單輸入
jQuery Mobile表單選擇
jQuery Mobile表單滑動條
四 jQuery Mobile主題
jQuery Mobile主題
五 jQuery Mobile 事件
jQuery Mobile事件
jQuery Mobile觸摸事件
jQuery Mobile滾屏事件
jQuery Mobile方向改變事件
jQuery Mobile實例
jQuery Mobile Data屬性
jQuery Mobile圖標
jQuery Mobile事件
jQuery Mobile頁面事件
??? 在 jQuery Mobile 中與頁面打交道的事件被分為四類：
??? Page Initialization - 在頁面創建前，當頁面創建時，以及在頁面初始化之后
??? Page Load/Unload - 當外部頁面加載時、卸載時或遭遇失敗時
??? Page Transition - 在頁面過渡之前和之后
??? Page Change - 當頁面被更改，或遭遇失敗時
jQuery Mobile CSS類
??? 全局類
??? 按鈕類
??? 圖標類
??? 主題類
??? 網格類
?
總結
以上是生活随笔為你收集整理的w3cschool的jQuery Mobile教程总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JSP标准标签库JSTL总结
- 下一篇： Struts2 - 上传任意多个文件