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

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

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

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

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

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

jquery-ui-1.8.7.custom.css這個是jQuery?UI套件的CSS樣式表，demos.css這個是jQuery?UIdemo中用到的CSS樣式，因為我用到了這些樣式所以將它導(dǎo)入進來，如果大家不需要可以不導(dǎo)這個文件，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被當(dāng)作了dialog的title,右上角有關(guān)閉的xx，右下角則可以拖拽改變大小

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

autoOpen,modal,buttons，根據(jù)這些屬性我們來定制一個不會自動打開(當(dāng)點擊按鈕或者通過其他的事件來觸發(fā)彈出dialog的事件)，并且?guī)в姓谡?模式窗體)和按鈕的dialog

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

其中ok是按鈕顯示的文本，而function是點擊按鈕后執(zhí)行的事件。注意，在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="打開"?οnclick="open_dialog();"/>

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

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

因為jQueryUI組件的皮膚都是可定制的，而不是一塵不變?？梢愿鶕?jù)需要選擇自己喜歡的皮膚樣式來使用，在jQueryUI的官方網(wǎng)站上有UI皮膚下載的，可以先預(yù)覽皮膚的效果再下載，下載后只需要將當(dāng)前項目中的CSS文件即可實現(xiàn)切換皮膚

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

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

<!--?登錄區(qū)域表單信息?-->

????<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給我們提供的，不需要我們?nèi)憳邮奖砦募?/p>

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

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

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

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

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

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

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

功能描述：

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

先來看注冊表單中div中的內(nèi)容：

<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中顯示的就是注冊表單的內(nèi)容。一共四項，和大家看到的dialog中的是一致的

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

//注冊表單相關(guān)函數(shù)和驗證

//獲取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({

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

open:function(){

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

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

fields.val("");

},

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

autoOpen:false,//不自動打開

buttons:{

提交:function(){

//點擊提交按鈕時執(zhí)行的事件

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里也有相應(yīng)的方法，我在這里對方法做修改，因為官方的DEMO中當(dāng)驗證失敗后，重新打開DIALOG時，驗證失敗的提示信息和錯誤樣式都還保存著。而我寫的方法已經(jīng)做了修改。不會有這樣的問題，下面是checkLength和checkReg方法，方法的注釋我寫的很清楚了，不再解釋，我會說下關(guān)于添加錯誤CSS樣式的東西。

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

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

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

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

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

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

return?false;

}else{

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

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

return?true;

}

}

?

//通過正則表達式驗證內(nèi)容的方法,o為表單域?qū)ο?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樣式，用來高亮提示用戶的。方法如下：

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

function?updateTip(t){

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

}

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

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

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

if(chk){

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

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

//序列化表單

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

//發(fā)起ajax請求

$.ajax({

type:'post',

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

data:user,

success:function(msg){

if(msg?==?"success"){

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

}else{

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

}

},

error:function(){

alert("ajax請求失敗");

}

});

}

整個的注冊流程就是這樣，當(dāng)注冊完成后會關(guān)閉dialog,下面的圖片顯示當(dāng)驗證出現(xiàn)錯誤時的樣式

轉(zhuǎn)載于:https://www.cnblogs.com/goloving/p/6951206.html

總結(jié)

以上是生活随笔為你收集整理的jQuery UI全教程之一(dialog的使用教程)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。