新聞中心
jquery mobile的主要應(yīng)用場景在哪
jquery mobile主要是應(yīng)用在移動端網(wǎng)頁開發(fā)。
站在用戶的角度思考問題,與客戶深入溝通,找到黃石網(wǎng)站設(shè)計與黃石網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都網(wǎng)站設(shè)計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋黃石地區(qū)。
jQuery Mobile是jQuery 在手機上和平板設(shè)備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫,而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。支持全球主流的移動平臺。
JQM 的使命是向所有主流移動瀏覽器提供一種統(tǒng)一體驗,使整個 Internet 上的內(nèi)容更加豐富 — 不管使用哪種查看設(shè)備。
JQM 的目標(biāo)是在一個統(tǒng)一的 UI 中交付超級 JavaScript 功能,跨最流行的智能手機和平板電腦設(shè)備工作。與 jQuery 一樣,JQM 是一個在 Internet 上直接托管、免費可用的開源代碼基礎(chǔ)。事實上,當(dāng) JQM 致力于統(tǒng)一和優(yōu)化這個代碼基時,jQuery 核心庫受到了極大關(guān)注。這種關(guān)注充分說明,移動瀏覽器技術(shù)在極短的時間內(nèi)取得了多么大的發(fā)展。
如何修改Jquery Mobile 設(shè)置默認(rèn)選項
以下的默認(rèn)配置可以通過$.mobile對象重新配置
自定義命名空間s (字符, 默認(rèn): ""):
在jQuery Mobile中,甚至可以自定義象HTML5中的data-attribute等系列屬性,比如data-role等。這通過自定義命名空間即可實現(xiàn)。比 如可以實現(xiàn)自定義一個名字,變成data-自定義名-role這樣的形式。按照“data-屬性”格式安排的命名空間,例如:data-role,可以設(shè) 置為任何東西,默認(rèn)為空字符串。如果你包含一個面包屑的話用起來會比較明晰,比如mynamespace-",會映射到 data-mynamespace-foo="...".
這可以通過$.mobile對象中增加ns屬性來指定,如下代碼:
$(document).bind("mobileinit", function() {
$.mobile.ns = "my-custom-ns";
});
通過上面的代碼,建立了一個data-my-customer-ns-role的屬性,而不是傳統(tǒng)jQuery Mobile中指定的data-role。通過設(shè)置自定義的命名空間,可以方便開發(fā)者在CSS選擇器中進行指定,同時如果要自定義mobile小插件的主 題,則也必須使用自定義命名空間,以示區(qū)別。
注意:如果你使用了data-命名空間,你需要在主題的css中手動的更新/覆蓋一個選擇器。按照以下格式把命名空間并并入到命名空間中。
.ui-mobile [data-mynamespace-role=page], .ui-mobile [data-mynamespace-role=dialog], .ui-page { ...
頁面初始化
autoInitializePage(布爾值,默認(rèn): true)
當(dāng)DOM加載完成時,JQM框架會自動調(diào)用$.mobile.initializePage方法。如果設(shè)為False,頁面page則不會自動初始化,在視覺上就會是隱藏的,直到 $.mobile.initializePage 方法被手動調(diào)用。
jQuery Mobile提供了一個叫autoInitializePage的屬性,這個屬性表示頁面是否應(yīng)該初始化,其默認(rèn)值為true。然而,如果是繼承擴展 了$.mobile對象,開發(fā)者則可以將該值設(shè)置為false,并且在稍晚的時候?qū)撁娉跏蓟M行設(shè)置。下面的代碼中,演示了當(dāng)其他腳本在運行時,如何暫 時延遲頁面的初始化。如果有大量的客戶端腳本運行,則一個很好的建議方法是延遲頁面的初始化,直到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中引用子頁時,默認(rèn)使用的是ui-page做為KEY標(biāo)識。開發(fā)者可以通過$.mobile對象的subPageUrlKey去重新設(shè)置,比 如如果定義了subPageUrlKey為my-page,則默認(rèn)的子頁引用將從web-page.htmlui-page=value改為 web-page.htmlmy-page=value,這樣做的一個好處是開發(fā)者可讓url更友善更容易維護。
url參數(shù)用來指向組件產(chǎn)生的子頁面(比如生成的嵌套的列表)。會被轉(zhuǎn)義為example.htmlui-page=subpageIdentifier。Jquery Mobile會把 ui-page=之前的部分用來向子頁面的url地址發(fā)出ajax請求。
設(shè)置歷史記錄
nonHistorySelectors (字符串, 默認(rèn): "dialog")
對于帶有 data-rel 屬性的a標(biāo)簽鏈接,或 data-role 屬性的頁面,如果選擇器與之匹配,則他們不會在歷史記錄中被追蹤 (即它們不會在location.hash中被更新也不會被瀏覽器歷史所標(biāo)記).
設(shè)置當(dāng)前激活頁面的樣式
activePageClass (字符串, 默認(rèn): "ui-page-active"):給當(dāng)前頁面(包括轉(zhuǎn)場中的) 分配class。
當(dāng)使用了jQuery Mobile后,默認(rèn)當(dāng)前激活頁面中的ui-page元素都會使用框架默認(rèn)的樣式中定義的ui-page-active,如果要對其進行修改,可以設(shè)置$.mobile對象中的activePageClass屬性,比如:
$(document).bind("mobileinit", function(){
$.mobile.activePageClass="ui-page-custom";
});
其中ui-page-custome則為用戶自定義的樣式。
設(shè)置當(dāng)前激活頁面的按鈕
activeBtnClass (字符串, 默認(rèn): "ui-page-active"):給活動狀態(tài)的按鈕分配class值,該class值必須在css框架中存。
設(shè)置ajax
ajaxEnabled (布爾值, 默認(rèn): true):Jquery Mobile 會自動通過ajax處理鏈接點擊以及表單提交。如果無法處理,url hash 監(jiān)聽將會被禁用,url也會像常規(guī)那樣發(fā)出HTTP 請求.
ajaxLinksEnabled (布爾值, 默認(rèn): true):可行時,Jquery Mobile 就會自動通過ajax處理鏈接的點擊。
ajaxFormsEnabled (布爾值, 默認(rèn): true):可行時,Jquery Mobile 就會自動通過ajax處理表單的提交。
設(shè)置哈希值
hashListeningEnabled (布爾值, 默認(rèn): true)
Jquery Mobile 會自動監(jiān)聽與處理 location.hash的改變。禁用它會防止Jquery Mobile處理 location.hash的改變。使你可以自己處理他們,或者在文檔中用完整的鏈接地址指到一個特定的id值上。
設(shè)置默認(rèn)的轉(zhuǎn)場效果
defaultTransition (字符串, 默認(rèn): 'slide'):設(shè)定使用AJAX進行頁面轉(zhuǎn)場的默認(rèn)的轉(zhuǎn)場效果。設(shè)為"none"的話則默認(rèn)沒有轉(zhuǎn)場的動畫。
默認(rèn)的jQuery Mobile的頁面和對話框的效果都是通過ajax實現(xiàn)的。默認(rèn)的頁面切換效果是幻燈片切換,默認(rèn)的對話框出現(xiàn)的效果是彈出。如果需要改變這些效果的話 ,同樣是如下代碼所示,設(shè)置$.mobile對象的defaultPageTransition和defaultDialogTransition屬性就 可以了。
$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = "fade";
$.mobile.defaultDialogTransition = "fade";
});
jQuery Mobile提供了6種效果供用戶選擇,分別是:slide, slideup, slidedown, pop, fade, 和flip,用戶可以按照上面的方法進行設(shè)置。
設(shè)置加載時默認(rèn)信息
loadingMessage (字符串, 默認(rèn): "loading"):設(shè)置頁面加載時顯示的文本. 如果設(shè)置為false,將不會顯示任何文字。
加載信息會在加載頁面時顯示給用戶看,要更改這個設(shè)置,只需要修改$.mobile對象的loadingMessage屬性即可,如下:
$(document).bind("mobileinit", function() {
$.mobile.loadingMessage = "Please wait";
});
設(shè)置加載時錯誤信息
pageLoadErrorMessage (字符串, 默認(rèn): "Error Loading Page"):通過ajax加載頁面失敗時出現(xiàn)的文本信息。
$(document).bind("mobileinit", function() {
$.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';
});
設(shè)置頁面的最小的卷動距離
minScrollBack (字符串,默認(rèn):'150'):返回一個頁面的最小的卷動距離。
gradeA (返回一個布爾值, 默認(rèn): 返回$.support.mediaquery的值):瀏覽器必須符合所有支持的條件才會返回 true.
jquery和jQueryMobile的區(qū)別jquerymobile
jquerymobile是以jquery為基礎(chǔ)的.
其相關(guān)的接口和使用的頁面樣式都是為了達到讓web app更趨向于native app的目的.
可以理解為jquery是為了傳統(tǒng)web而生,而jquerymobile相當(dāng)于jquery的擴展,是為了讓傳統(tǒng)的web更像現(xiàn)在的手機應(yīng)用.
jquery mobile 怎么安裝
jquery mobile不需要安裝,這就是一個jq框架,是創(chuà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
上面的那三個缺一不可。
jquery mobile怎么用
如何使用默認(rèn)調(diào)板
jQueryMobile內(nèi)建了主題控制相關(guān)模塊。調(diào)板可以使用data-theme屬性來控制。如果你不指定data-theme屬性,將默認(rèn)采用a調(diào)板。以下代碼定義了一個采用默認(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)上看是一樣的,僅僅使用一個data-theme="e"便可以將整個頁面切換為黃色色調(diào):
默認(rèn)情況下頁面上所有的控件都會繼承page上設(shè)置的調(diào)板,這意味著你只需設(shè)置一次便可以更改整個page:
div data-role="page" id="page" data-theme="e"
當(dāng)然你也可以獨立設(shè)置不同元素的調(diào)板,同樣設(shè)置元素的data-theme屬性來實現(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 框架的一個組件(而非jquery的移動版本)。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫,而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile開發(fā)團隊說:能開發(fā)這個項目,我們非常興奮。移動Web太需要一個跨瀏覽器的框架,讓開發(fā)人員開發(fā)出真正的移動Web網(wǎng)站。
分享標(biāo)題:c語言鏈表pop函數(shù),列表pop函數(shù)
轉(zhuǎn)載注明:http://fisionsoft.com.cn/article/dsgdjcs.html