jquery mobile的主要應用場景在哪

jquery mobile主要是應用在移動端網頁開發。

站在用戶的角度思考問題，與客戶深入溝通，找到黃石網站設計與黃石網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創造個性化、用戶體驗好的作品，建站類型包括：成都網站設計、網站制作、企業官網、英文網站、手機端網站、網站推廣、空間域名、網頁空間、企業郵箱。業務覆蓋黃石地區。

jQuery Mobile是jQuery 在手機上和平板設備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。

JQM 的使命是向所有主流移動瀏覽器提供一種統一體驗，使整個 Internet 上的內容更加豐富 — 不管使用哪種查看設備。

JQM 的目標是在一個統一的 UI 中交付超級 JavaScript 功能，跨最流行的智能手機和平板電腦設備工作。與 jQuery 一樣，JQM 是一個在 Internet 上直接托管、免費可用的開源代碼基礎。事實上，當 JQM 致力于統一和優化這個代碼基時，jQuery 核心庫受到了極大關注。這種關注充分說明，移動瀏覽器技術在極短的時間內取得了多么大的發展。

如何修改Jquery Mobile 設置默認選項

以下的默認配置可以通過$.mobile對象重新配置

自定義命名空間s (字符, 默認: ""):

在jQuery Mobile中，甚至可以自定義象HTML5中的data-attribute等系列屬性，比如data-role等。這通過自定義命名空間即可實現。比 如可以實現自定義一個名字，變成data-自定義名-role這樣的形式。按照“data-屬性”格式安排的命名空間，例如：data-role,可以設 置為任何東西，默認為空字符串。如果你包含一個面包屑的話用起來會比較明晰，比如mynamespace-",會映射到 data-mynamespace-foo="...".

這可以通過$.mobile對象中增加ns屬性來指定，如下代碼：

$(document).bind("mobileinit", function() {

$.mobile.ns = "my-custom-ns";

});

通過上面的代碼，建立了一個data-my-customer-ns-role的屬性，而不是傳統jQuery Mobile中指定的data-role。通過設置自定義的命名空間，可以方便開發者在CSS選擇器中進行指定，同時如果要自定義mobile小插件的主 題，則也必須使用自定義命名空間，以示區別。

注意：如果你使用了data-命名空間，你需要在主題的css中手動的更新/覆蓋一個選擇器。按照以下格式把命名空間并并入到命名空間中。

.ui-mobile [data-mynamespace-role=page], .ui-mobile [data-mynamespace-role=dialog], .ui-page { ...

頁面初始化

autoInitializePage(布爾值,默認: true)

當DOM加載完成時，JQM框架會自動調用$.mobile.initializePage方法。如果設為False，頁面page則不會自動初始化，在視覺上就會是隱藏的，直到 $.mobile.initializePage 方法被手動調用。

jQuery Mobile提供了一個叫autoInitializePage的屬性，這個屬性表示頁面是否應該初始化，其默認值為true。然而，如果是繼承擴展 了$.mobile對象，開發者則可以將該值設置為false,并且在稍晚的時候對頁面初始化進行設置。下面的代碼中，演示了當其他腳本在運行時，如何暫 時延遲頁面的初始化。如果有大量的客戶端腳本運行，則一個很好的建議方法是延遲頁面的初始化，直到DOM完成加載客戶端腳本。

!DOCTYPE HTML

html

head

titleUnderstanding the jQuery Mobile API/title

script type="text/java script" src="jquery.js"/script

script type="text/java script"

$(document).bind("mobileinit", function() {

$.mobile.autoInitializePage = false;

});

/script

script type="text/java script" src="jquery.mobile.js"/script

/head

body

div data-role="page"

div data-role="content"

ul data-role="listview" id="my-list"/ul

/div

/div

script type="text/java script"

$('#my-list').html('lia href="page-2.html"Link to another page/a/li');

$.mobile.autoInitializePage = true;

/script

/body

/html

自定義子頁的URL鍵

subPageUrlKey (字符串，默認: "ui-page")

當在jQuery Mobile中引用子頁時，默認使用的是ui-page做為KEY標識。開發者可以通過$.mobile對象的subPageUrlKey去重新設置，比 如如果定義了subPageUrlKey為my-page,則默認的子頁引用將從web-page.htmlui-page=value改為 web-page.htmlmy-page=value,這樣做的一個好處是開發者可讓url更友善更容易維護。

url參數用來指向組件產生的子頁面（比如生成的嵌套的列表）。會被轉義為example.htmlui-page=subpageIdentifier。Jquery Mobile會把 ui-page=之前的部分用來向子頁面的url地址發出ajax請求。

設置歷史記錄

nonHistorySelectors (字符串, 默認: "dialog")

對于帶有 data-rel 屬性的a標簽鏈接，或 data-role 屬性的頁面，如果選擇器與之匹配，則他們不會在歷史記錄中被追蹤 (即它們不會在location.hash中被更新也不會被瀏覽器歷史所標記).

設置當前激活頁面的樣式

activePageClass (字符串, 默認: "ui-page-active")：給當前頁面(包括轉場中的) 分配class。

當使用了jQuery Mobile后，默認當前激活頁面中的ui-page元素都會使用框架默認的樣式中定義的ui-page-active，如果要對其進行修改，可以設置$.mobile對象中的activePageClass屬性，比如：

$(document).bind("mobileinit", function(){

$.mobile.activePageClass="ui-page-custom";

});

其中ui-page-custome則為用戶自定義的樣式。

設置當前激活頁面的按鈕

activeBtnClass (字符串, 默認: "ui-page-active")：給活動狀態的按鈕分配class值，該class值必須在css框架中存。

設置ajax

ajaxEnabled (布爾值, 默認: true)：Jquery Mobile 會自動通過ajax處理鏈接點擊以及表單提交。如果無法處理，url hash 監聽將會被禁用，url也會像常規那樣發出HTTP 請求.

ajaxLinksEnabled (布爾值, 默認: true)：可行時，Jquery Mobile 就會自動通過ajax處理鏈接的點擊。

ajaxFormsEnabled (布爾值, 默認: true)：可行時，Jquery Mobile 就會自動通過ajax處理表單的提交。

設置哈希值

hashListeningEnabled (布爾值, 默認: true)

Jquery Mobile 會自動監聽與處理 location.hash的改變。禁用它會防止Jquery Mobile處理 location.hash的改變。使你可以自己處理他們，或者在文檔中用完整的鏈接地址指到一個特定的id值上。

設置默認的轉場效果

defaultTransition (字符串, 默認: 'slide')：設定使用AJAX進行頁面轉場的默認的轉場效果。設為"none"的話則默認沒有轉場的動畫。

默認的jQuery Mobile的頁面和對話框的效果都是通過ajax實現的。默認的頁面切換效果是幻燈片切換，默認的對話框出現的效果是彈出。如果需要改變這些效果的話 ，同樣是如下代碼所示，設置$.mobile對象的defaultPageTransition和defaultDialogTransition屬性就 可以了。

　$(document).bind("mobileinit", function() {

$.mobile.defaultPageTransition = "fade";

$.mobile.defaultDialogTransition = "fade";

　});

jQuery Mobile提供了6種效果供用戶選擇，分別是：slide, slideup, slidedown, pop, fade, 和flip，用戶可以按照上面的方法進行設置。

設置加載時默認信息

loadingMessage (字符串, 默認: "loading")：設置頁面加載時顯示的文本. 如果設置為false，將不會顯示任何文字。

加載信息會在加載頁面時顯示給用戶看，要更改這個設置，只需要修改$.mobile對象的loadingMessage屬性即可，如下：

$(document).bind("mobileinit", function() {

$.mobile.loadingMessage = "Please wait";

});

設置加載時錯誤信息

pageLoadErrorMessage (字符串, 默認: "Error Loading Page")：通過ajax加載頁面失敗時出現的文本信息。

$(document).bind("mobileinit", function() {

$.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';

});

設置頁面的最小的卷動距離

minScrollBack (字符串,默認:'150')：返回一個頁面的最小的卷動距離。

gradeA (返回一個布爾值, 默認: 返回$.support.mediaquery的值)：瀏覽器必須符合所有支持的條件才會返回 true.

jquery和jQueryMobile的區別jquerymobile

jquerymobile是以jquery為基礎的.

其相關的接口和使用的頁面樣式都是為了達到讓web app更趨向于native app的目的.

可以理解為jquery是為了傳統web而生,而jquerymobile相當于jquery的擴展,是為了讓傳統的web更像現在的手機應用.

jquery mobile 怎么安裝

jquery mobile不需要安裝，這就是一個jq框架，是創建移動 web 應用程序的框架。你只需要找到下載了jquery mobile.js和jquery mobile.css然后跟引入js和css文件那樣引入就可以了

!DOCTYPE?html

html

head

link?rel="stylesheet"?href=""http://這是引入的css文件

script?src=""/script//這是引入的jq庫

script?src=""/script//這是引入的js文件

/head

body

div?data-role="page"?id="pageone"

div?data-role="header"

h1在此處插入標題/h1

/div

div?data-role="content"

p在此處插入正文/p

/div

div?data-role="footer"

h1在此處插入頁腳文本/h1

/div

/div?

/body

/html

上面的那三個缺一不可。

jquery mobile怎么用

如何使用默認調板

jQueryMobile內建了主題控制相關模塊。調板可以使用data-theme屬性來控制。如果你不指定data-theme屬性，將默認采用a調板。以下代碼定義了一個采用默認調板的頁面：

div data-role="page" id="page"

div data-role="header"

h1Sample Page/h1

/div

div data-role="content"

pI'm a sample page!/p

/div

/div

使用不同的調板：

div data-role="page" id="page" data-theme="e"

div data-role="header"

h1Sample Page/h1

/div

div data-role="content"

pI'm a sample page!/p

/div

/div

從代碼結構上看是一樣的，僅僅使用一個data-theme="e"便可以將整個頁面切換為黃色色調：

默認情況下頁面上所有的控件都會繼承page上設置的調板，這意味著你只需設置一次便可以更改整個page：

div data-role="page" id="page" data-theme="e"

當然你也可以獨立設置不同元素的調板，同樣設置元素的data-theme屬性來實現：

div data-role="page" id="page"

div data-role="header" data-theme="c"

h1Header/h1

/div

div data-role="content" data-theme="d"

pContent/p

pnbsp; ? ?/p

ul data-role="listview" data-theme="b"

lia href="#page1"Page 1/a/li

/ul

div data-role="collapsible-set"

div data-role="collapsible" data-theme="b"

h3Header/h3

pContent/p

/div

div data-role="collapsible" data-collapsed="true" data-theme="a"

h3Header/h3

pContent/p

/div

div data-role="collapsible" data-collapsed="true" data-theme="e"

h3Header/h3

pContent/p

/div

/div

/p

pnbsp;a href="#page4" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="e"Go To Page 4/a/p

/div

div data-role="footer"

h4Footer/h4

/div

/div

jQuery Mobile是什么

jQuery Mobile是jQuery 框架的一個組件（而非jquery的移動版本）。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile開發團隊說：能開發這個項目，我們非常興奮。移動Web太需要一個跨瀏覽器的框架，讓開發人員開發出真正的移動Web網站。