從本文開始，使用 jQuery Mobile 與 HTML5 開發(fā) Web App 系列將會(huì)進(jìn)入第三部分——jQuery Mobile 事件與方法，這其中將會(huì)利用之前所講述的 jQuery Mobile 組件作為例子說明，因此 Kayo 建議如果你不熟悉 jQuery Mobile ，可以首先閱讀前面兩部分的文章。本文會(huì)介紹 jQuery Mobile 的默認(rèn)配置以及一些基本的事件使用方法。
創(chuàng)新互聯(lián)公司長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為樂都企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，樂都網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
一.默認(rèn)配置
jQuery Mobile 會(huì)有一些默認(rèn)的設(shè)置，如之前介紹過的 Ajax 導(dǎo)航形式，可以選擇在默認(rèn)配置中關(guān)閉，這樣整個(gè)網(wǎng)站都會(huì)關(guān)閉 jQuery Mobile Ajax 導(dǎo)航。
jQuery Mobile 把所有這些配置都封裝在 $.mobile 中，作為它的屬性，因此改變這些屬性值就可以改變 jQuery Mobile 的默認(rèn)配置。
當(dāng) jQuery Mobile 開始執(zhí)行時(shí)，它會(huì)在 document 對(duì)象上觸發(fā) mobileinit 事件，并且這個(gè)事件遠(yuǎn)早于 document.ready 發(fā)生，因此開發(fā)者需要通過如下的形式重寫默認(rèn)配置：
1
2
3
$(document).bind("mobileinit", function(){
// 新的配置
});
由于 mobileinit 事件會(huì)在 jQuery Mobile 執(zhí)行后馬上觸發(fā)，因此開發(fā)者需要在 jQuery Mobile 加載前引入這個(gè)新的默認(rèn)配置，若這些新配置保存在一個(gè)名為 custom-mobile.js 的文件中，你按如下順序引入 jQuery Mobile 的各個(gè)文件。
1
2
3
script src="jquery.min.js"/script
script src="custom-mobile.js"/script
script src="jquery-mobile.min.js"/script
下面以 Ajax 導(dǎo)航作為例子說明如何自定義 jQuery Mobile 的默認(rèn)配置：
在之前的文章《使用 jQuery Mobile 與 HTML5 開發(fā) Web App —— jQuery Mobile 頁面與對(duì)話框》中，Kayo 說明過，jQuery Mobile 是以 Ajax 的方式驅(qū)動(dòng)網(wǎng)站（可以參加上文的第三點(diǎn)“Ajax 驅(qū)動(dòng)的站點(diǎn)”），若某個(gè)鏈接不需要 Ajax ，可以為某個(gè)鏈接添加 data-ajax=”false” 屬性，這是局部的設(shè)置，如果開發(fā)者需要取消默認(rèn)的 Ajax 方式（即全局取消 Ajax），可以自定義默認(rèn)配置：
代碼如下：
1
2
3
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
jQuery Mobile 是基于 jQuery 的，因此你也可以使用 jQuery 的 $.extend 擴(kuò)展 $.mobile 對(duì)象，
1
2
3
4
5
$(document).bind("mobileinit", function(){
$.extend($.mobile, {
ajaxEnabled: false
});
});
使用上面的第二種方法可以很方便的自定義多個(gè)屬性，如在上例的基礎(chǔ)上同時(shí)設(shè)置 activeBtnClass ，即為當(dāng)前頁面分配一個(gè) class，原本的默認(rèn)值為 “ui-btn-active”，現(xiàn)在設(shè)置為“new-ui-btn-active”，可以這樣寫：
1
2
3
4
5
6
$(document).bind("mobileinit", function(){
$.extend($.mobile, {
ajaxEnabled: false,
activeBtnClass: "new-ui-btn-active"
});
});
上面的例子中介紹了簡(jiǎn)單同時(shí)也是最基本的 jQuery Mobile 事件，它反映了 jQuery Mobile 事件需要如何使用，同時(shí)也要注意觸發(fā)事件的對(duì)象和順序。
下面列出所有的默認(rèn)配置及說明。（以屬性名、值的類型、默認(rèn)值的方式說明）
activeBtnClass 字符串 默認(rèn)值："ui-btn-active"
為激動(dòng)狀態(tài)的按鈕分配 class 值。
activePageClass 字符串 默認(rèn)值："ui-page-active"
為當(dāng)前頁面分配 class 值。
ajaxEnabled 布爾型 默認(rèn)值：true
控制是否禁止默認(rèn)的 Ajax 鏈接點(diǎn)擊和表單提交，并停止 hash 的監(jiān)聽，然后以常規(guī)的 HTTP 方式進(jìn)行。
allowCrossDomainPages 布爾型 默認(rèn)值：false
設(shè)置是否允許跨域。因?yàn)?jQuery Mobile 會(huì)記錄 location hash ，這有可能會(huì)為網(wǎng)站帶來 cross-site scripting (XSS) 攻擊，因此該選項(xiàng)默認(rèn)為 false 。
autoInitializePage 布爾型 默認(rèn)值：true
當(dāng) DOM 加載完畢后，jQuery Mobile 會(huì)自動(dòng)調(diào)用 $.mobile.initializePage 方法。如果設(shè)置該屬性為 false ，則頁面不進(jìn)行初始化，即頁面空白。
buttonMarkup.hoverDelay 整形 默認(rèn)值：200
該屬性設(shè)置觸摸觸摸某一個(gè) jQuery Mobile 按鈕后添加 hover 和 down 的 class 的延時(shí)。該數(shù)值越小，延時(shí)越小，觸摸越靈敏，但同時(shí)很有可能錯(cuò)誤的觸發(fā)頁面滾動(dòng)條滾動(dòng)。因此建議數(shù)值不要太小。
defaultDialogTransition 字符串 默認(rèn)值："pop"
設(shè)置使用 Ajax 方式的對(duì)話框的默認(rèn)過場(chǎng)動(dòng)畫。
defaultPageTransition 字符串 默認(rèn)值：fade
設(shè)置使用 Ajax 方式跳轉(zhuǎn)的頁面的默認(rèn)過場(chǎng)動(dòng)畫。
gradeA 布爾型 默認(rèn)值："true"
設(shè)置 $.support.mediaquery 的返回值，默認(rèn)為符合全部 grade A 等級(jí)的移動(dòng)設(shè)備的支持條件才會(huì)返回 true 。
hashListeningEnabled 布爾型 默認(rèn)值：true
設(shè)置是否監(jiān)聽和處理 location.hash 的改變。
ignoreContentEnabled 布爾值 默認(rèn)值：false
把該選項(xiàng)設(shè)置為 true ，并且在某元素的父元素上設(shè)置 data-enhance="false" 屬性，那么該元素會(huì)自動(dòng)降低 jQuery Mobile 增強(qiáng)（jQuery Mobile 元素增強(qiáng)指的是 jQuery Mobile 對(duì)網(wǎng)頁基本元素在樣式上的豐富、交互上的增強(qiáng)以及相應(yīng)的 HTML 結(jié)構(gòu)改造）。
linkBindingEnabled 布爾值 默認(rèn)值：true
jQuery Mobile 會(huì)自動(dòng)綁定錨標(biāo)記到文檔中，設(shè)置該選項(xiàng)為 false 將阻止所有的錨點(diǎn)擊處理，例如取消激活按鈕狀態(tài)。一般來說只有在把錨標(biāo)記處理交給另一個(gè)處理庫時(shí)才設(shè)置該屬性為 false 。
loadingMessageTextVisible 布爾值 默認(rèn)值：false
設(shè)置當(dāng)頁面加載中的時(shí)候是否顯示提示文字。
loadingMessage 字符串 默認(rèn)值："loading"
設(shè)置當(dāng)頁面顯示加載提示時(shí)，加載提示文字的內(nèi)容。
loadingMessageTheme 字符串 默認(rèn)值："A"
設(shè)置當(dāng)頁面顯示加載提示時(shí)，加載提示的默認(rèn)主題。
minScrollBack 整形 默認(rèn)值：250
設(shè)置頁面最小滾動(dòng)距離
NS 字符串 默認(rèn)：""
該屬性可以改變 jQurey Mobile 的命名空間，jQuery Mobile 按 data-NS 屬性值安排命名空間，默認(rèn)為空，則直接 data-role ，舉個(gè)簡(jiǎn)單的例子，若設(shè)置 NS 的值為 "custom" ，則此時(shí)需要定義一個(gè) jQuery Mobile 頭部的話需要從原來的 data-role="header" 改為 data-custom-role="header" ，其他 data-role 也要改成為 data-custom-role 。這樣開發(fā)者可以創(chuàng)建屬于自己的命名空間，避免與 jQuery Mobile 原有的屬性發(fā)生沖突， 便于制作自定義主題。
需要注意的是，當(dāng)你使用了 data-命名空間后，你需要更新 jQuery Mobile css 文件的選擇器，格式如下
.ui-mobile [data-custom-role=page], .ui-mobile [data-custom-role=dialog] ......
pageLoadErrorMessage 字符串 默認(rèn)值："Error Loading Page"
設(shè)置當(dāng) Ajax 加載頁面錯(cuò)誤時(shí)顯示的提示信息。
pageLoadErrorMessageTheme 字符串 默認(rèn)值："e"
設(shè)置當(dāng) Ajax 加載頁面錯(cuò)誤時(shí)錯(cuò)誤提示框的主題樣式。
pushStateEnabled 布爾型 默認(rèn)值：true
在支持的瀏覽器中開啟 history.replaceState 這個(gè)增強(qiáng)特性，把哈希值（hash-based）的 Ajax 請(qǐng)求轉(zhuǎn)化為完整的文檔路徑。jQuery Mobile 建議在關(guān)閉 Ajax 導(dǎo)航和大量使用外部鏈接的情況下關(guān)閉這個(gè)特性。
subPageUrlKey 字符串 默認(rèn)值："ui-page"
URL 參數(shù)用來指向由組件生成的子頁面(如嵌套列表頁)，該 URL 會(huì)被解釋成如 example.htmlui-page=subpageIdentifier 的形式，而在 ui-page= 之前的哈希值會(huì)被 jQuery Mobile 向此 URL 地址做 Ajax 請(qǐng)求。
touchOverflowEnabled 布爾型 默認(rèn)值：false
設(shè)置是否使用設(shè)備的原生區(qū)域滾動(dòng)特性，除了 iOS5 之外大部分的設(shè)備到目前還不支持原生的區(qū)域滾動(dòng)特性，因此在 jQuery Mobile 1.1.0 中不建議修改該屬性。
二.事件基礎(chǔ)
通過上面的基本配置，相信大家對(duì) jQuery Mobile 的事件也有一定了解，這里 Kayo 再正式介紹一下 jQuery Mobile 的事件。
jQuery Mobile 在基于本地事件上，創(chuàng)建了一系列的自定義事件，大部分事件是基于觸摸設(shè)備的使用情況開發(fā)的，當(dāng)然這些事件對(duì)于桌面環(huán)境也會(huì)有適當(dāng)?shù)奶幚恚_發(fā)者可以使用 bind() 函數(shù)綁定到需要的頁面對(duì)象中。
值得注意的是，jQuery Mobile 是基于 Ajax 導(dǎo)航的，所以采用 bind() 方法綁定的事件無法作用于 Ajax 產(chǎn)生的網(wǎng)頁元素中，因此建議開發(fā)者使用動(dòng)態(tài)綁定的方法如 live()、delegate() 將事件動(dòng)態(tài)的綁定到相應(yīng)的元素中。live()、delegate() 等方法可以把 jQuery Mobile 選擇器選擇的 DOM 元素，在整個(gè) DOM 范圍將其持久化，這就意味著，無論該元素是先前存在還是通過 Ajax 動(dòng)態(tài)加載的，事件都會(huì)被綁定，如同 CSS 給元素添加樣式一樣。這在對(duì) Ajax 有比較大依賴的網(wǎng)站中是必須注意的。
live()、delegate() 在實(shí)現(xiàn)動(dòng)態(tài)綁定的原理和資源消耗方面也有很大的差別，但這并不是本文的討論范圍，Kayo 將會(huì)另寫文章敘述。
2012/11/7 更新
“剛剛在網(wǎng)友提醒下，了解到在 jQuery 1.7 中，引入了一個(gè)新的事件綁定函數(shù) —— .on() ，用于代替 bind, live, delegate 。但 jQuery Mobile 文檔仍建議使用 .bind() 和 .live() 方法綁定事件，jQuery Mobile 并沒有明確其中原因，但考慮到低版本的 jQuery Mobile 只需 jQuery 1.6.4 的支持就足夠，出于兼容性的原因，當(dāng)然也可能是由于考慮到開發(fā)者的習(xí)慣，jQuery Mobile 才作出以上建議。當(dāng)然如果開發(fā)者熟悉 .on() 方法也不妨采用 .on() 進(jìn)行事件綁定?！?/p>
下面以其中的 live() 方法舉一個(gè)例子說明如何動(dòng)態(tài)綁定 jQuery Mobile 事件。
1
2
3
4
5
$(function(){
$("body").live('swiperight', function() {
$('#next').click(); // #next 為下一頁的鏈接的 id
});
});
說明：上面的例子中，假設(shè)進(jìn)入下一頁的鏈接的 id 為 next 。那么在頁面上向右滑動(dòng)就會(huì)觸發(fā)點(diǎn)擊了下一頁的鏈接，從而進(jìn)入下一頁?？梢韵胂?，這個(gè)過程是 Ajax 的，頁面會(huì)平滑的跳轉(zhuǎn)并且會(huì)有過場(chǎng)動(dòng)畫，這樣從視覺上看，可以很好的做出原生 App 中常見的滑動(dòng)翻頁功能。當(dāng)然，這些是基于瀏覽器的，如果用戶的移動(dòng)設(shè)備配置不高的話，會(huì)很容易造成畫面不流暢等降低用戶體驗(yàn)的情況，這也是 Kayo 在前文中建議不要使用過于炫麗的過場(chǎng)動(dòng)畫（如 3D transforms）的原因之一。
通過上面的例子，不難看出 jQuery Mobile 的強(qiáng)大和方便，它考慮了很多開發(fā) Web App 需要用到的功能。至于 jQuery Mobile 的詳細(xì)事件，Kayo 將會(huì)在下文中詳細(xì)說明。
三.完整 Demo
本例子對(duì)上面提到的自定義 jQuery Mobile 默認(rèn)配置和滑動(dòng)事件綁定進(jìn)行測(cè)試，滑動(dòng)事件是為觸摸設(shè)備而設(shè)計(jì)的，因此建議你使用觸摸設(shè)備進(jìn)行測(cè)試，若使用 PC 環(huán)境測(cè)試，jQuery Mobile 也會(huì)檢測(cè)鼠標(biāo)操作代替觸摸操作，具體的操作是按住鼠標(biāo)左鍵進(jìn)行滑動(dòng)，jQuery Mobile 的默認(rèn)滑動(dòng)有效距離是 30px，因此測(cè)試時(shí)只需滑動(dòng)一小段距離即可觸發(fā)滑動(dòng)。具體的完整代碼可以打開 Demo 后直接查看文檔的源碼。
完整 Demo（建議使用 PC 上的 Firefox、Chrome 等現(xiàn)代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統(tǒng)瀏覽器瀏覽）
無權(quán)限操作瀏覽器
js只能關(guān)閉本身窗口，或由當(dāng)前頁面派生出的新窗口
不能直接關(guān)閉其他窗口
用window.close可關(guān)閉當(dāng)前窗口
用window.close()關(guān)閉，如：button onclick="window.open('about:blank','_self'); window.close();"關(guān)閉/button 望采納！
如果是模態(tài)窗口彈出form name="form1"input type="text" name="fag1"input type="text" name="fag2"/formfunction shw(){
var url="open.html";
//----------方法一--start-------
var obj=document.form1; //指定頁面對(duì)象
var returnValue=window.showModalDialog(url ,obj,'dialogHeight:550px;dialogWidth:500px;center:yes'); //方法返回值
//----------方法一--end-------
alert(returnValue);
}
如果是非模態(tài)窗口彈出，那么script type="text/javascript"http://彈出窗口function openwin(url,width,height){
var l=window.screen.width ;
var w= window.screen.height;
var al=(l-width)/2; var aw=(w-height)/2; var OpenWindow=window.open(url,"彈出窗口","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="+width+",height="+height+",top="+aw+",left="+al+"");
OpenWindow.focus();if(OpenWindow!=null){ //彈出窗口關(guān)閉事件//if(window.attachEvent) OpenWindow.attachEvent("onbeforeunload", quickOut); if(window.attachEvent) OpenWindow.attachEvent("onunload", quickOut);
}
}//關(guān)閉觸發(fā)方法function quickOut()
{
alert("窗口已關(guān)閉");
}/scriptinput type="button" value="ok" onclick="openwin('open.html','600','500')"input type="text" name="txt0" id="txt0" 注意：firefox這里一定要寫ID屬性，不然取不到值
重慶分公司
重慶分公司
