神武八荒一颗小说,好看的言情小说,穿越小说完本

您當(dāng)前的位置：首頁(yè)>最新動(dòng)態(tài)>jQuery Mobile提供了哪些可配置選項(xiàng)？

新聞中心

最新動(dòng)態(tài)緣震優(yōu)勢(shì)網(wǎng)建知識(shí)

精彩案例

地址：上海市靜安區(qū)共和新路4718弄10號(hào)樓2樓

熱線：400-166-3538

電話：19301461038

郵箱：sales@shyuanzhen.cn

jQuery Mobile提供了哪些可配置選項(xiàng)？

2013-02-01 00:00:00

上海緣震網(wǎng)絡(luò)有限公司在前面的文章中我們上海網(wǎng)頁(yè)設(shè)計(jì)就提到，jQuery Mobile是采用HTML5標(biāo)準(zhǔn)的data屬性來(lái)驅(qū)動(dòng)元素生成各種界面組件的。實(shí)際上，jQuery Mobile不僅提供上述這些方面的功能，還在JavaScript可編程方面提供更多的可配置、可定制的參數(shù)和方法。

同樣，作為基于jQuery的jQuery Mobile移動(dòng)框架，它也提供了一個(gè)類似的事件。當(dāng)jQuery Mobile開(kāi)始運(yùn)行時(shí)，它會(huì)在document對(duì)象上觸發(fā)一個(gè)mobileinit事件。我們可以通過(guò)該事件重寫(xiě)默認(rèn)的相應(yīng)函數(shù)，配置各種屬性參數(shù)。

使用方法如下：

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

//在這里添加用戶自定義的代碼

});

由于mobileinit事件在運(yùn)行jQuery Mobile的時(shí)候會(huì)立即觸發(fā)，因此如果我們需要編寫(xiě)自定義事件就必須在mobileinit事件之前進(jìn)行。因此自定義事件的JavaScript文件的導(dǎo)入位置，就必須在jQuery類庫(kù)文件之后，jQuery Mobile類庫(kù)文件之前。

例如：

jQuery Mobile為開(kāi)發(fā)者提供了一個(gè)對(duì)象：$.mobile。該對(duì)象的作用是配置各種選項(xiàng)及其默認(rèn)值。

例如：

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

$.mobile.foo = "foo";

});

除了上述通過(guò)$.mobile.foo 的點(diǎn)語(yǔ)法對(duì)某個(gè)屬性值進(jìn)行初始化以外，還可以使用jQuery自帶的方法$.extend通過(guò)繼承方式對(duì)屬性值進(jìn)行初始化。

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

$.extend($.mobile,{

foo:"foo"

});

jQuery Mobile提供了非常多的可配置選項(xiàng)。

1.ns

類型：字符串，默認(rèn)值是空字符串。

用法：$.mobile.ns = "mynamespace"

描述：自定義命名空間，避免命名空間沖突。使用方法是通過(guò)指定data-屬性來(lái)自定義命名空間。當(dāng)指定了ns值時(shí)，data屬性所對(duì)應(yīng)的自定義命名空間屬性名就是data-mynamespace-foo。通常情況下，當(dāng)開(kāi)發(fā)者需要開(kāi)發(fā)一套自定義主題樣式時(shí)才需要使用該選項(xiàng)。

2.autolnitializePage

類型：布爾值，默認(rèn)值是true。

用法：$.mobile.autoInitializePage = false

描述：默認(rèn)情況下，當(dāng)頁(yè)面DOM元素準(zhǔn)備就緒后，程序會(huì)自動(dòng)加載autolnitializePage函數(shù)。如果autolnitializePage選項(xiàng)被設(shè)置為false，頁(yè)面就不會(huì)被立即渲染，并保持隱藏狀態(tài)，一直到人工調(diào)用$.mobile.initializePage 函數(shù)后才會(huì)渲染各種頁(yè)面和視圖組件。

initializePage函數(shù)是jQuery Mobile框架的內(nèi)部初始化函數(shù)，該函數(shù)的主要功能是在DOM元素中查找和增強(qiáng)頁(yè)面中的各個(gè)視圖，并指定默認(rèn)顯示的第一個(gè)視圖。

3.subPageUrlKey

類型：字符串，默認(rèn)值是ui-page。

用法：$.mobile.autoInisubPageUrlKey = "page"

描述：該參數(shù)的主要功能是改變jQuery Mobile視圖在URL地址中的key參數(shù)名，STRONG>上海網(wǎng)站設(shè)計(jì)舉例：example.html?ui-page=subpage。當(dāng)選項(xiàng)參數(shù)改成subPageUrlKey-"page"時(shí)，其url地址會(huì)被改為example.html?page=subpage。

當(dāng)ui-page的值是一個(gè)URL地址時(shí)，jQuery Mobile框架會(huì)發(fā)送一個(gè)Ajax請(qǐng)求，并返回顯示該URL頁(yè)面。

4.activePageClass

類型：字符串，默認(rèn)值是ui-page-active。

用法：$.mobile.activePageClass = "ui-ns-page-active"

描述：該選項(xiàng)參數(shù)參數(shù)的主要功能是自定義活動(dòng)狀態(tài)頁(yè)面和過(guò)渡狀態(tài)時(shí)的視圖CSS樣式。

5.activeBtnClass

類型：字符串，默認(rèn)值是ui-btn-active。

用法：$.mobile.activeBtnClass = "ui-ns-page-active"

描述：該選項(xiàng)參數(shù)的主要功能是自定義處于活動(dòng)狀態(tài)的按鈕的樣式風(fēng)格。

6.ajaxEnabled

類型：布爾值，默認(rèn)值是true。

用法：$.mobile.ajaxEnabled = false

描述：該選項(xiàng)參數(shù)的作用是設(shè)置當(dāng)單擊鏈接或提交表單或按鈕時(shí)，是否使用Ajax方式加載頁(yè)面或提交數(shù)據(jù)。默認(rèn)情況下，jQuery Mobile采用Ajax請(qǐng)求，而采用傳統(tǒng)的HTTP方式請(qǐng)求跳轉(zhuǎn)或提交方式。

7.hashListeningEnabled

類型：布爾值，默認(rèn)值是true。

用法：$.mobile.hashListeningEnabled = false

描述：設(shè)置jQuery Mobile是否自動(dòng)監(jiān)聽(tīng)和處理location.hash的變化，如果設(shè)置為false,可以使用手動(dòng)的方式處理hash的變化，或者簡(jiǎn)單的使用鏈接地址進(jìn)行跳轉(zhuǎn)。

8.defaultPageTransition

類型：布爾值，默認(rèn)值是true。

用法：$.mobile.defaultPageTransition = "fade"

描述：該選項(xiàng)菜熟的作用是設(shè)置頁(yè)面切換默認(rèn)的效果。如果設(shè)置none，頁(yè)面切換時(shí)將不會(huì)有效果。可選的切換效果包括：slide（左右劃入）、slideup（由下向上滑入）、slidedown（由上向下滑入）、pop（由中心展開(kāi)）、fade（漸顯）、flip（翻轉(zhuǎn)）。

9.touchOverflowEnabled

類型：布爾值，默認(rèn)值是false。

用法：$.mobile.touchOverflowEnabled = true

描述：是否使用設(shè)備的原生區(qū)域滾動(dòng)特性。目前除iOS5外，大部分設(shè)備還不支持原生的區(qū)域滾動(dòng)特性。

10.defaultDialogTransition

類型：字符串，默認(rèn)值是pop。

用法：$.mobile.defaultDialogTransition = "none"

描述：該選項(xiàng)設(shè)置Ajax對(duì)話框的彈出效果，若設(shè)置為none，則沒(méi)有過(guò)渡效果。其可選的效果和defaultPageTransition屬性相同。

11.minScrollBack

類型：字符串，默認(rèn)值為150。

用法：$.mobile.minScrollBack = "200"

描述：當(dāng)滾動(dòng)超出所設(shè)置的高度時(shí)才會(huì)出發(fā)滾動(dòng)位置記憶功能。當(dāng)滾動(dòng)高度沒(méi)有超過(guò)所設(shè)置的高度時(shí)，后腿到該頁(yè)面滾動(dòng)條會(huì)到達(dá)的頂部。通過(guò)設(shè)置該選項(xiàng)的數(shù)值來(lái)減小位置記憶的數(shù)據(jù)量。

12.loadingMessage

類型：字符串，默認(rèn)值是loading。

用法：$.mobile.loadingMessage = "加載中"

描述：設(shè)置頁(yè)面加載狀態(tài)的文本內(nèi)容。如果設(shè)置為false，則不會(huì)顯示任何內(nèi)容。

13.pageLoadErrorMessage

類型：字符串，默認(rèn)值是Error Loading Page。

用法：$.mobile.pageLoadErrorMessage = "頁(yè)面加載失敗"

描述：設(shè)置當(dāng)Ajax請(qǐng)求頁(yè)面失敗時(shí)顯示的提示文本內(nèi)容。

14.gradeA

類型：布爾值，默認(rèn)值是$.support.mediaquery的值。

用法：$.mobile.gradeA

描述：當(dāng)瀏覽器復(fù)合所有支持的條件時(shí)才會(huì)返回true。默認(rèn)返回$support.mediaquery的值。

上面介紹了jQuery Mobile 1.0bata3版本中提供個(gè)可配置參數(shù)選項(xiàng)，由于該版本仍然是一個(gè)beta版本,因此上海網(wǎng)頁(yè)設(shè)計(jì)認(rèn)為這類配置參數(shù)可能會(huì)隨著后續(xù)版本的更新而發(fā)生變化，例如有可能在下一個(gè)版本中發(fā)現(xiàn)某些配置選項(xiàng)已經(jīng)被拋棄或者會(huì)新增更多的配置選項(xiàng)等。

建網(wǎng)站不是東抄西襲，把握分寸很重要

第一：借鑒而不是照搬

　　企業(yè)參考同行網(wǎng)站，如果看中某個(gè)網(wǎng)站不應(yīng)該全部照搬過(guò)來(lái)。這樣顯得自己網(wǎng)站很沒(méi)特色，有的人就會(huì)發(fā)現(xiàn)網(wǎng)站風(fēng)格似曾相識(shí)，還以為網(wǎng)站套了模板呢。尤其現(xiàn)在很多企業(yè)都有自己的官網(wǎng)，網(wǎng)站風(fēng)格相似在所難免，如果給網(wǎng)站規(guī)劃好就不會(huì)與其它網(wǎng)站撞風(fēng)格了。企業(yè)在參考同行網(wǎng)站時(shí)可以做些筆記，例如網(wǎng)站中哪些功能效果可取，哪些風(fēng)格可借鑒。因?yàn)槠髽I(yè)不只參考一個(gè)網(wǎng)站而是很多網(wǎng)站，那么就容易眼花繚亂，做好筆記給專業(yè)建網(wǎng)站公司參考，再結(jié)合所有總總設(shè)計(jì)一款不一樣的企業(yè)網(wǎng)站。

　　第二：避免侵權(quán)

　　，覺(jué)得自己的網(wǎng)站如果用了相同的設(shè)計(jì)會(huì)不會(huì)被對(duì)方發(fā)現(xiàn)。說(shuō)真吧，這要看建網(wǎng)站公司如果如何轉(zhuǎn)化這個(gè)設(shè)計(jì)。有的建網(wǎng)站公司為了使網(wǎng)站盡快完成就直接照搬同行的網(wǎng)站，這種做法很明顯有侵權(quán)意思。如果對(duì)方網(wǎng)站是的版權(quán)說(shuō)明的，若被發(fā)現(xiàn)很容易吃官司的。企業(yè)要做的只是參考與學(xué)習(xí)，并通過(guò)同行網(wǎng)站來(lái)升華自己的網(wǎng)站，靈巧運(yùn)用建站元素和設(shè)計(jì)功能效果。要建有特色的網(wǎng)站就要避免網(wǎng)站照般和侵權(quán)問(wèn)題。

　　總的來(lái)說(shuō)，有分寸的參考同行網(wǎng)站就應(yīng)該避免這兩件事，這樣有利于企業(yè)網(wǎng)站建得更好。取其精華棄其糟粕給自己的企業(yè)網(wǎng)站好好規(guī)劃，并不是東抄西襲而是從同行網(wǎng)站中學(xué)習(xí)經(jīng)驗(yàn)，參考網(wǎng)站的風(fēng)格和功能排版，最后給網(wǎng)站做一個(gè)最適合企業(yè)行業(yè)的建站方案。