jquery mobile的主要應(yīng)用場(chǎng)景在哪

jquery mobile主要是應(yīng)用在移動(dòng)端網(wǎng)頁開發(fā)。

站在用戶的角度思考問題，與客戶深入溝通，找到黃石網(wǎng)站設(shè)計(jì)與黃石網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋黃石地區(qū)。

jQuery Mobile是jQuery 在手機(jī)上和平板設(shè)備上的版本。jQuery Mobile 不僅會(huì)給主流移動(dòng)平臺(tái)帶來jQuery核心庫，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)。

JQM 的使命是向所有主流移動(dòng)瀏覽器提供一種統(tǒng)一體驗(yàn)，使整個(gè) Internet 上的內(nèi)容更加豐富 — 不管使用哪種查看設(shè)備。

JQM 的目標(biāo)是在一個(gè)統(tǒng)一的 UI 中交付超級(jí) JavaScript 功能，跨最流行的智能手機(jī)和平板電腦設(shè)備工作。與 jQuery 一樣，JQM 是一個(gè)在 Internet 上直接托管、免費(fèi)可用的開源代碼基礎(chǔ)。事實(shí)上，當(dāng) JQM 致力于統(tǒng)一和優(yōu)化這個(gè)代碼基時(shí)，jQuery 核心庫受到了極大關(guān)注。這種關(guān)注充分說明，移動(dòng)瀏覽器技術(shù)在極短的時(shí)間內(nèi)取得了多么大的發(fā)展。

如何修改Jquery Mobile 設(shè)置默認(rèn)選項(xiàng)

以下的默認(rèn)配置可以通過$.mobile對(duì)象重新配置

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

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

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

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

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

});

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

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

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

頁面初始化

autoInitializePage(布爾值,默認(rèn): true)

當(dāng)DOM加載完成時(shí)，JQM框架會(huì)自動(dòng)調(diào)用$.mobile.initializePage方法。如果設(shè)為False，頁面page則不會(huì)自動(dòng)初始化，在視覺上就會(huì)是隱藏的，直到 $.mobile.initializePage 方法被手動(dòng)調(diào)用。

jQuery Mobile提供了一個(gè)叫autoInitializePage的屬性，這個(gè)屬性表示頁面是否應(yīng)該初始化，其默認(rèn)值為true。然而，如果是繼承擴(kuò)展 了$.mobile對(duì)象，開發(fā)者則可以將該值設(shè)置為false,并且在稍晚的時(shí)候?qū)撁娉跏蓟M(jìn)行設(shè)置。下面的代碼中，演示了當(dāng)其他腳本在運(yùn)行時(shí)，如何暫 時(shí)延遲頁面的初始化。如果有大量的客戶端腳本運(yùn)行，則一個(gè)很好的建議方法是延遲頁面的初始化，直到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 (字符串，默認(rèn): "ui-page")

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

url參數(shù)用來指向組件產(chǎn)生的子頁面（比如生成的嵌套的列表）。會(huì)被轉(zhuǎn)義為example.htmlui-page=subpageIdentifier。Jquery Mobile會(huì)把 ui-page=之前的部分用來向子頁面的url地址發(fā)出ajax請(qǐng)求。

設(shè)置歷史記錄

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

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

設(shè)置當(dāng)前激活頁面的樣式

activePageClass (字符串, 默認(rèn): "ui-page-active")：給當(dāng)前頁面(包括轉(zhuǎn)場(chǎng)中的) 分配class。

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

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

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

});

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

設(shè)置當(dāng)前激活頁面的按鈕

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

設(shè)置ajax

ajaxEnabled (布爾值, 默認(rèn): true)：Jquery Mobile 會(huì)自動(dòng)通過ajax處理鏈接點(diǎn)擊以及表單提交。如果無法處理，url hash 監(jiān)聽將會(huì)被禁用，url也會(huì)像常規(guī)那樣發(fā)出HTTP 請(qǐng)求.

ajaxLinksEnabled (布爾值, 默認(rèn): true)：可行時(shí)，Jquery Mobile 就會(huì)自動(dòng)通過ajax處理鏈接的點(diǎn)擊。

ajaxFormsEnabled (布爾值, 默認(rèn): true)：可行時(shí)，Jquery Mobile 就會(huì)自動(dòng)通過ajax處理表單的提交。

設(shè)置哈希值

hashListeningEnabled (布爾值, 默認(rèn): true)

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

設(shè)置默認(rèn)的轉(zhuǎn)場(chǎng)效果

defaultTransition (字符串, 默認(rèn): 'slide')：設(shè)定使用AJAX進(jìn)行頁面轉(zhuǎn)場(chǎng)的默認(rèn)的轉(zhuǎn)場(chǎng)效果。設(shè)為"none"的話則默認(rèn)沒有轉(zhuǎn)場(chǎng)的動(dòng)畫。

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

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

$.mobile.defaultPageTransition = "fade";

$.mobile.defaultDialogTransition = "fade";

　});

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

設(shè)置加載時(shí)默認(rèn)信息

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

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

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

$.mobile.loadingMessage = "Please wait";

});

設(shè)置加載時(shí)錯(cuò)誤信息

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

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

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

});

設(shè)置頁面的最小的卷動(dòng)距離

minScrollBack (字符串,默認(rèn):'150')：返回一個(gè)頁面的最小的卷動(dòng)距離。

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

jquery和jQueryMobile的區(qū)別jquerymobile

jquerymobile是以jquery為基礎(chǔ)的.

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

可以理解為jquery是為了傳統(tǒng)web而生,而jquerymobile相當(dāng)于jquery的擴(kuò)展,是為了讓傳統(tǒng)的web更像現(xiàn)在的手機(jī)應(yīng)用.

jquery mobile 怎么安裝

jquery mobile不需要安裝，這就是一個(gè)jq框架，是創(chuàng)建移動(dòng) web 應(yīng)用程序的框架。你只需要找到下載了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在此處插入標(biāo)題/h1

/div

div?data-role="content"

p在此處插入正文/p

/div

div?data-role="footer"

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

/div

/div?

/body

/html

上面的那三個(gè)缺一不可。

jquery mobile怎么用

如何使用默認(rèn)調(diào)板

jQueryMobile內(nèi)建了主題控制相關(guān)模塊。調(diào)板可以使用data-theme屬性來控制。如果你不指定data-theme屬性，將默認(rèn)采用a調(diào)板。以下代碼定義了一個(gè)采用默認(rèn)調(diào)板的頁面：

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

使用不同的調(diào)板：

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

從代碼結(jié)構(gòu)上看是一樣的，僅僅使用一個(gè)data-theme="e"便可以將整個(gè)頁面切換為黃色色調(diào)：

默認(rèn)情況下頁面上所有的控件都會(huì)繼承page上設(shè)置的調(diào)板，這意味著你只需設(shè)置一次便可以更改整個(gè)page：

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

當(dāng)然你也可以獨(dú)立設(shè)置不同元素的調(diào)板，同樣設(shè)置元素的data-theme屬性來實(shí)現(xiàn)：

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 框架的一個(gè)組件（而非jquery的移動(dòng)版本）。jQuery Mobile 不僅會(huì)給主流移動(dòng)平臺(tái)帶來jQuery核心庫，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)。jQuery Mobile開發(fā)團(tuán)隊(duì)說：能開發(fā)這個(gè)項(xiàng)目，我們非常興奮。移動(dòng)Web太需要一個(gè)跨瀏覽器的框架，讓開發(fā)人員開發(fā)出真正的移動(dòng)Web網(wǎng)站。

網(wǎng)站題目：c語言鏈表pop函數(shù),列表pop函數(shù)
網(wǎng)站地址：http://chinadenli.net/article23/dsgdjcs.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器、響應(yīng)式網(wǎng)站、網(wǎng)站排名、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)