jQuery UI全教程之一(dialog的使用教程)

jQuery UI目前的版本已經更新到了1.8.7。個人感覺和easyui相比起來，jQuery UI在界面的美觀程度和可定制型更強一些。所以再次將一些jQuery UI組件的用法說明一下，方便日后查閱。也方面沒接觸jQuery UI的人能早日使用jQuery UI套件

(一)首先來說jQuery UI使用頻率較高dialog組件：

dialog就是我們常說的彈出層，應用還是比較廣泛的，比如：可以使用彈出層做登錄、注冊和消息提示等功能

下面來詳細說說dialog的使用方法

在官方提供的官方文檔和示例中有六種形式的dialog,但是前五種都是大同小異，包括在編寫代碼方面也僅僅是多設置兩個屬性而已，沒什么太大的不同，先來看看使用jQuery UI組件的時候需要那些前期貯備工作。

首先將需要依賴的js文件導入到你的頁面中。需要依賴的文件如下：

jquery-ui-1.8.7.custom.css這個是jQuery UI套件的CSS樣式表，demos.css這個是jQuery UIdemo中用到的CSS樣式，因為我用到了這些樣式所以將它導入進來，如果大家不需要可以不導這個文件，jquery-1.4.4.min.js這個不用說了吧，jQuery的核心文件，沒有它一切工作都無法開展。切記一點：一定要在引入其他的js文件之前引入jquery-1.4.4.min.js文件，別問為什么，懂點jQuery的人都能想的到。jquery-ui-1.8.7.custom.min.js這個是jQueryUI的核心js文件，也是必須的。有了上述的引用后就可以在你的頁面中使用jQuery UI了。

先看一個超級簡單的DEMO：

<div id="dialog" title="basic dialog"><p>這是一個采用默認樣式的對話框</p></div>

在頁面中加入上邊的一行代碼，然后加入一個script標簽對，在腳本寫如下代碼：

$(function(){

       $("#dialog").dialog();

});

打開你的頁面看一下吧，如果沒什么意外你會看到一個類似這樣的對話框

簡單吧，這就是一個彈出層，其中div的title被當作了dialog的title,右上角有關閉的xx，右下角則可以拖拽改變大小

這就是一個默認的dialog，雖然我們沒有為它指定高度和寬度，但是它有默認的值，在我們沒有設定情況下dialog默認會彈出在屏幕的中央，大小也是有默認值的，可以改變大小，顯示關閉按鈕，這都是默認的樣式，那么如果我們想自己定制一下dialog，不想讓他這樣顯示該如何做？下面介紹一些屬性和方法來改變一下這個dialog，用到的屬性如下：

autoOpen,modal,buttons，根據這些屬性我們來定制一個不會自動打開(當點擊按鈕或者通過其他的事件來觸發彈出dialog的事件)，并且帶有遮罩(模式窗體)和按鈕的dialog

buttons屬性是一個復合屬性，使用形式如下：buttons{ok:function(){點擊按鈕執行的事件},cancel:function(){點擊按鈕執行的事件}}

其中ok是按鈕顯示的文本，而function是點擊按鈕后執行的事件。注意，在ok和function之間有冒號:，雖然按鈕可以為中文，比如:確定:function(){}這種形式，但是切記，在按鈕文本和function之間的冒號一定是英文字符下的冒號，不要寫成中文的全角冒號，否則會有錯誤。

將剛才的js腳本替換為：

$("#dialog-form").dialog({

        autoOpen:false,
        modal:true,

        buttons:{

               登錄:function(){

                      alert("您點擊了登錄按鈕");

              }

        }

})

//控制打開dialog的方法

function open_dialog(){

       $("#dialog-form").dialog("open");

}

這里的dialog將帶有一個登錄按鈕。并且為帶遮罩的模式窗體。默認不顯示。所以我們需要在頁面添加一個按鈕，通過點擊按鈕來控制打開dialog

<input type="button" value="打開" onclick="open_dialog();"/>

這樣當點擊這個按鈕時會打開這個dialog.打開后的dialog如下圖：

可能有的人會說為什么這個顯示的顏色和樣式都第一個不一樣呢？

因為jQueryUI組件的皮膚都是可定制的，而不是一塵不變。可以根據需要選擇自己喜歡的皮膚樣式來使用，在jQueryUI的官方網站上有UI皮膚下載的，可以先預覽皮膚的效果再下載，下載后只需要將當前項目中的CSS文件即可實現切換皮膚

那么在dialog中顯示的username:   password:     和兩個文本框又是從何而來的？

這是自己寫的一個表單，用于讓用戶登錄的表單，還記得嗎？dialog是通過在頁面中指定一個div，然后得到該div對象.dialog()就可以生成dialog了，同樣的道理，我們可以在這個div中加入自己想要的表單域。這個就是我自己定制的登錄表單。樣式采用了UI提供的樣式，當然，如果你覺得這個樣式不好同樣是可以自己定制自己的CSS來使用。完整的表單代碼如下：

<!-- 登錄區域表單信息 -->

    <div id="dialog-form" class="ui-widget ui-widget-content ui-corner-all" title="用戶登錄">

        <p id="login_tip"></p>

        <form id="login-form">

        <fieldset>

            username:<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />

            password:<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

        </fieldset>

        </form>

    </div>

大家可以看到每個input標簽都有一個class屬性，指定了3個class樣式。這就是jQueryUI給我們提供的，不需要我們去寫樣式表文件。

更多的屬性應用大家可以參考官方提供的文檔，由于屬性較多，不再一一介紹。都很簡單，需要用到的時候查詢一下即可

下面說說dialog中的事件調用。在上面的例子中dialog只有一個按鈕，用于登錄。如果我想添加另外一個按鈕：關閉，當我點擊關閉時關閉dialog該如何做呢？在jQueryUI中，多數組件的事件都使用如下的形式來調用：

$("#dialog").dialog("close");其中close就是事件的名稱，這樣當我點擊這個按鈕時就可以關閉該dialog了。如果要打開dialog也是同樣的道理。$("#dialog").dialog("open");這個用于打開dialog。更多的方法請查閱文檔，事件的功能不一樣，但是用法基本一致：

都是$.dialog("事件名稱");這種形式

下面我們以dialog為例，來實現一個實用dialog+form表單進行ajax注冊的實例(只寫前臺實現，后臺請根據自己所用的服務器端語言進行實現。)

首先看注冊的dialog中都有什么內容。主頁頁面的dialog如下所示：

注冊表單中有用戶名、密碼、email和用戶的生日以及“提交”和“取消按鈕”

功能描述：

當用戶點擊提交的時候首先進行客戶端的驗證，如果有不符合要求的則給與用戶提示信息。提示信息會以醒目的方式顯示在表單的最上方，不是alert()的方式。當驗證通過后點擊提交按鈕發起ajax請求，將表單數據發送到后臺處理，最終記錄在數據庫中，注冊成功

先來看注冊表單中div中的內容：

<div id="register-form" class="ui-widget ui-widget-content ui-corner-all" title="用戶注冊">

        <p class="validateTips">所有的表單域都為必填項.</p>

        <form id="reg-form">

        <fieldset>

            用戶名:<input type="text" name="uname" id="uname" value="" class="text ui-widget-content ui-corner-all" />

            密碼:<input type="password" name="upass" id="upass" value="" class="text ui-widget-content ui-corner-all" />

           email:<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />

            生日:<input type="text" readonly="readonly" name="birth" id="birth" value="" class="text ui-widget-content ui-corner-all" />

        </fieldset>

        </form>

    </div>

上邊的div中顯示的就是注冊表單的內容。一共四項，和大家看到的dialog中的是一致的

然后來看如何對這些數據進行驗證，驗證代碼如下：

//注冊表單相關函數和驗證

//獲取name,password,email和birth對象并將對象添加到一個空對象中備用

var uname = $("#uname"),

password = $("#upass"),

email = $("#email"),

birth = $("#birth"),

fields = $([]).add(uname).add(password).add(email),

tips = $(".validateTips");

$("#register-form").dialog({

//打開對話框的時候移除表單域的樣式并設置錯誤信息顯示文本為默認值

open:function(){

tips.removeClass().text("所有的表單域都為必填項.");

fields.removeClass("ui-state-error");

fields.val("");

},

modal:true,//彈出帶有遮罩的模式窗體

autoOpen:false,//不自動打開

buttons:{

提交:function(){

//點擊提交按鈕時執行的事件

var chk = true;

//驗證字段長度是否符合要求

chk = chk && checkLength(uname,"username",2,15);

chk = chk && checkLength(password,"password",6,20);

chk = chk && checkLength(email,"email",6,40);

chk = chk && checkLength(birth,"birthday",8,10);

//正則表達式驗證用戶名和email是否合法

chk = chk && checkReg(name,/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z])|_\w*$/,"用戶名必須以字母、下劃線或者漢字開頭,請修改后提交");

chk = chk && checkReg(email,/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,"請輸入正確的email格式,格式如下:admin@yahoo.com");

在上邊的驗證中使用到了checkLength()方法和checkReg方法，這兩個方法分別都是自定義方法，分別是驗證字段長度和通過正則表達式驗證輸入是否合法的方法，在jQueryUI官方提供的Demo里也有相應的方法，我在這里對方法做修改，因為官方的DEMO中當驗證失敗后，重新打開DIALOG時，驗證失敗的提示信息和錯誤樣式都還保存著。而我寫的方法已經做了修改。不會有這樣的問題，下面是checkLength和checkReg方法，方法的注釋我寫的很清楚了，不再解釋，我會說下關于添加錯誤CSS樣式的東西。

//判斷字段長度是否符合要求的方法,四個參數分別為：o被檢測的對象,msg被檢測對象顯示名稱

//min允許的最小長度,max允許的最大長度

function checkLength(o,msg,min,max){

if(o.val().length > max || o.val().length < min){

o.addClass("ui-state-error");//為當前的錯誤域添加CSS樣式

updateTip(msg+"的長度必須在"+min+"到"+max+"之間");//更新提示區域的信息

return false;

}else{

//如果驗證通過則移除當前對象的CSS錯誤樣式

o.removeClass("ui-state-error");

return true;

}

}

 

//通過正則表達式驗證內容的方法,o為表單域對象,reg為正則表達式,n為錯誤提示信息

function checkReg(o,reg,n){

if(!reg.test(o.val())){

o.addClass("ui-state-error");

updateTip(n);

return false;

}else{

o.removeClass("ui-state-error");

return true;

}

}

在這兩個方法中都用到了一個updateTip方法，該方法的作用就是給那個<p>標簽也就是錯誤消息顯示的地方添加一個css樣式，用來高亮提示用戶的。方法如下：

//更新提示信息的方法，傳遞的參數t為顯示的錯誤信息，然后為顯示信息的標簽添加高亮

function updateTip(t){

tips.text(t).addClass("ui-state-highlight");

}

驗證的過程就是如上面顯示的那樣，方法都有比較詳細的注釋，大家可以自己看

當用戶輸入的都被我們驗證，并通過后，應該像后臺發起ajax請求了。具體代碼如下：

此處用到了一個formSerialize()方法，是一個jquery.form.js的腳本文件，針對表單的一個jq插件，可以序列化表單，這樣我們只需要把序列化后的值傳遞給后臺就行，不用一個個獲取再拼接了。如果需要用到請自行引入該腳本

if(chk){

//驗證通過后移除提示處的樣式和錯誤消息

tips.removeClass().text("");

//序列化表單

var user = $("#reg-form").formSerialize();

//發起ajax請求

$.ajax({

type:'post',

url: '${path}/UserAction?method=register',

data:user,

success:function(msg){

if(msg == "success"){

$("#register-form").dialog("close");

}else{

alert("服務器異常,請稍后再試");

}

},

error:function(){

alert("ajax請求失敗");

}

});

}

整個的注冊流程就是這樣，當注冊完成后會關閉dialog,下面的圖片顯示當驗證出現錯誤時的樣式