使用JQuery實(shí)現(xiàn)Web彈出編輯框

一．背景(Background)

隨著Ajax（Asynchronous Javascript And XML）的逐漸流行，我們可以通過Ajax實(shí)現(xiàn)一些以往只能在WinForm中才能做到的UI效果，最經(jīng)典的就是彈出的模式對話框(Modal Dialog)了。基于Ajax的Web中模式對話框不但可以提高用戶的UI體 驗(yàn)，更可以減少頁面的不必要刷新，減少與Web服務(wù)器的數(shù)據(jù)交互，從而減少不必要的Web服務(wù)器負(fù)載。

在網(wǎng)的管理平臺(tái)中，我們充分利用JQuery和Ajax實(shí)現(xiàn)了Web彈出對話框，取代了先前的彈出頁面和頁面跳轉(zhuǎn)，提高了響應(yīng)速度，增進(jìn)了用戶體驗(yàn)。

二．相關(guān)技術(shù)(Techniques)
1. JQuery
jQuery由美國人John Resig創(chuàng)建，至今已吸引了來自世界各地的眾多javascript高手加入其team，包括來自德國的Jörn Zaefferer，羅馬尼亞的Stefan Petre等等。

jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。

它是輕量級(jí)的js庫(壓縮后只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

jQuery是一個(gè)快速的，簡潔的javaScript庫，使用戶能 更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。在很多的電子商務(wù)網(wǎng)站（如網(wǎng)）和門戶網(wǎng)站中，都大量使用了JQuery完成一些特效和交互，以彌補(bǔ)HTML靜態(tài)頁面的不足。

2. Ajax
AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX并非縮寫詞，而是由Jesse James Gaiiett創(chuàng)造的名詞，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

網(wǎng)中的頂部導(dǎo)航就是用Ajax技術(shù)來實(shí)現(xiàn)的。

三．實(shí)現(xiàn)彈出 對話框
1.傳統(tǒng)實(shí)現(xiàn)
在很多的管理平臺(tái)中，我們都要實(shí)現(xiàn)管理數(shù)據(jù)的頁面，一般的主界面 如下圖所示。

傳統(tǒng)的編輯單條數(shù)據(jù)的UI實(shí)現(xiàn)，一般為彈出一個(gè)對話框頁面或者轉(zhuǎn)到一個(gè)新頁面，在修改完成后，關(guān)閉對話框頁面或者跳轉(zhuǎn) 回原頁面，兩種方式都有一些不可避免的缺陷：

1）彈出對話框頁面的方式，經(jīng)常會(huì)被瀏覽器所屏蔽（禁止彈出窗口），而且，如果關(guān)閉對話框之前在母頁面上做了其他的操作或者母頁面已經(jīng)被轉(zhuǎn)到其他頁面，那么對話 框關(guān)閉后的刷新母頁面方法就會(huì)失效，導(dǎo)致javascript錯(cuò)誤甚至執(zhí)行錯(cuò)誤的操作。

2）轉(zhuǎn)到新頁面的方式，是最為安全的做法，一般不會(huì)出現(xiàn)邏輯錯(cuò)誤，但是就意味著每次修改數(shù)據(jù)之 后，必須重新加載母頁面，重新獲取全部數(shù)據(jù)的列表，這就無形中增加了不必要的服務(wù)器負(fù)載。

因此，我們采用Jquery實(shí)現(xiàn)基于Ajax的彈出對話框來實(shí)現(xiàn)編輯功能，它具有無需彈出新頁面，無需重新加載列表，最小化與服務(wù)器數(shù) 據(jù)交互的特性。

2.JQuery實(shí)現(xiàn)基于Ajax的彈出對話框
利用JQuery以及兩個(gè)JQuery插件，jqModal和blockUI，可以輕松實(shí)現(xiàn)基于Ajax的彈出對話框。

首先，我們定義Ajax的服務(wù)器端處理頁面，比如Ajax.aspx，并且定義好相關(guān)的處理函數(shù)，給客戶端返回JSON數(shù)據(jù)，當(dāng)然，還有執(zhí)行某些數(shù) 據(jù)修改的Ajax方法的定義：

protected void Page_Load(object sender, EventArgs e) {

Response.Charset = "utf-8";

Response.ContentType = "text/plain";

string action = Request["a"].Trim();

switch (action.ToLower()) {

case "method1":

Method1();

break;

……

private void method1() {

……

Response.Write(JsonConvert.SerializeObject(ret));

}

然后，我們在客戶端定義好所需要對話框的HTML，并且設(shè)計(jì)好樣式，

<div class="jqmWindow" id="dialog">

<div class="jqDrag modalPopupTitle" id="pnlTitle">

<span id="popupWinTitle">正在編輯XXX：</span>

<input type="image" src="../imgs/closebutton.gif" class="closeButton jqmClose" title="關(guān)閉窗口" id="imgbtnClose" name="imgbtnClose" />

</div>

<div class="holderDiv" id="Panel3">{這里是具體的編輯的內(nèi)容}</div>

<div style="padding: 10px; text-align: center;">

<input type="button" id="btnSave" value="保存" />

<input type="button" id="btnCancel" value="取消" class="jqmClose" />

</div>

</div>

接下來，我們就可以在javascript文件中完成JQuery的代碼了。

$(document).ready(function() {

$("#dialog").jqm({ modal: true }).jqDrag(".jqDrag");

……

$("a.edit").click(function(event) {

initModal();

var id = $(this).parent().next().html();

// block界面，防止用戶多次點(diǎn)擊

$.blockUI({ message: '<h1><img src="../imgs/busy.gif" /> 請稍候...</h1>' });

$.ajax({

type: "POST",

dataType: "json",

url: "../Ajax.aspx?a=method1",

data: { "Id": id },

success: function(data) {

// 這里就可以加入填充數(shù)據(jù)到對話框的代碼了

});

// 顯示對話框

$('#dialog').jqmShow();

event.preventDefault();

});

同樣地，也可以在JQuery中代碼實(shí)現(xiàn)修改數(shù)據(jù)和刪除數(shù)據(jù)的功能。

3.一些補(bǔ)充
在實(shí)現(xiàn)過程中，對JQuery的插件，可能還要做一些必要的修改，比如z-index的合理設(shè)置，BlockUI的適當(dāng)修飾，還有Ajax安全性的考慮，這些都是需 要考慮到的。篇幅所限，就不繼續(xù)討論了。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)