jQuery mobile

時間 2019-11-11

標籤 jquery mobile 欄目 JQuery 简体版

原文原文鏈接

jQuery Msobile 都能作什麼?

一、jQuery Mobile爲開發移動應用程序提供了很是簡單的用戶接口html

二、這種接口的配置是標籤驅動的，這意味着咱們能夠在HTML中創建大量的程序接口而不不須要寫一行js代碼瀏覽器

三、提供了一些自定義的事件用來探測移動和觸摸動做。例如tap(敲擊)、tap-and-hold（點擊並按住）、swipe、orientation change緩存

四、使用一些增強的功能時須要參照一下設備瀏覽器支持列表app

五、使用預設主題能夠輕鬆定製應用程序外觀ide

AJAX 導航

爲了實如今移動設備上的無縫客戶體驗，jQuery Mobile默認採用AJAX的方式載入一個目的連接頁面。所以，當在瀏覽器中點擊一個連接打一個新的頁面時，jQuery Mobile接收這個連接，經過AJAX的方式請求連接頁面，並把請求獲得的內容注入到當前頁面的DOM裏。另外還須要確保請求的頁面url惟一標識的。測試

這樣的結果就是用戶交互始終保存在同一個頁面中。新頁面中的內容也會輕鬆的顯示到這個頁面裏。這種平滑的客戶體驗相比於傳統打開一個新的頁面並等待數秒的方式要好不少。當一個新的頁面作爲新的data-role=」page」 div插入到主頁面時，主頁面會有效的緩存取到的內容。使得當要訪問一個頁面時可以儘快的顯示出來。這個工做過程聽起來難以置信的複雜，可是作爲開發人員的咱們大部份不須要了解其中工做的具體細節。只要能看到效果就OK。this

注意:若是你不想採用AJAX的方式加載頁面，而想以原生的頁面加載方式打開一個連接頁面，只須要在打開的連接上添加屬性 rel=」external」屬性url

頁面切換效果

你可使用多種不一樣的切換效果來顯示新頁面內容，只須要在連接裏添加data-transition屬性便可。可能的值以下spa

slidecode	從右到左切換（默認）
slideup	從下到上切換
slidedown	從上到下切換
pop	以彈出的形式打開一個頁面
fade	漸變退色的方式切換
flip	舊頁面翻轉飛出，新頁面飛入

例如 <p><a href=」#about」 data-transition=」flip」>關於頁面</a></p>

在瀏覽器中查看效果

注意：查看以上的效果須要您的瀏覽器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。

對話框

經過在連接中添加data-rel=」dialog」的屬性，可使連接頁面的顯示方式變爲對話框。給顯示的對話框加入切換的效果也是一個不錯的選擇

例如咱們將about的連接變成一個對話框並加入相應的切換效果。代碼以下

<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>

注意：目前的測試版本存在問題，當在一個頁面中寫多個」page」時在以dialog的方式打開一個頁面時，不會出現對話框效果

按鈕

按鈕是觸摸式應用程序的一部分，它們扮演連接的功能，由於它們提供了更大的目標，當你點擊連接的時候（比較適合，手指比較胖的人羣）

在jQuery Mobile中把一個連接變成button的效果，只須要在標籤中添加data-role=」button屬性便可」。例如：

<div data-role="content">     
    <p><a href="#about" data-role="button">About this app</a></p>    </div>...
<div data-role="content">     
    <p>This app rocks!</p>    
    <a href="#home" data-role="button">Go home</a>
</div>

另外jQuery Mobile也會自動的轉換像表單元素中的submit，reset，button，或image爲按鈕樣式。

還能夠利用data-icon屬性創建各式各樣的按鈕，創建行內按鈕和按鈕組（水平或垂直的）

主題

jQuery Mobile渲染的灰色、黑色和藍色及圓形的組件使其看起來很漂亮，可是若是你的整個應用都使用這樣的樣式，將會使其變得很乏味。jQuery Mobile容許你自定義官方一些組件的主題。例如：

Font family
Drop shadows
按鈕和盒狀元素的邊框圓角半徑
圖標組件

另外，每個主題包含26種不一樣顏色的切換（標記從a 到z），能夠控制前景顏色，背景色和漸變色，典型用法是使頁面元素部分替換，你可使用data-theme屬性。例如

<!DOCTYPE html> 
<html>   
<head>   
<title>Page Title</title> 
</head>
<body>
<div data-role="page" id="home">  
　　<div data-role="header">    
　　　　<h1>Home</h1>  
　　</div>  
　　<div data-role="content">     
　　　　<a href="#" data-role="button" data-theme="a">About this app</a>    
　　　　<a href="#" data-role="button" data-theme="b">About this app</a>    
　　　　<a href="#" data-role="button" data-theme="c">About this app</a>    
　　　　<a href="#" data-role="button" data-theme="d">About this app</a>    
　　　　<a href="#" data-role="button" data-theme="e">About this app</a>  　　</div></div></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。