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

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

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

下面來詳細(xì)說說dialog的使用方法

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

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

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

先看一個(gè)超級(jí)簡(jiǎn)單的DEMO：

<div?id="dialog"?title="basic?dialog"><p>這是一個(gè)采用默認(rèn)樣式的對(duì)話框</p></div>

在頁面中加入上邊的一行代碼，然后加入一個(gè)script標(biāo)簽對(duì)，在腳本寫如下代碼：

$(function(){

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

});

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

簡(jiǎn)單吧，這就是一個(gè)彈出層，其中div的title被當(dāng)作了dialog的title,右上角有關(guān)閉的xx，右下角則可以拖拽改變大小

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

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

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

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

將剛才的js腳本替換為：

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

????????autoOpen:false,
????????modal:true,

????????buttons:{

???????????????登錄:function(){

??????????????????????alert("您點(diǎn)擊了登錄按鈕");

??????????????}

????????}

})

//控制打開dialog的方法

function?open_dialog(){

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

}

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

<input?type="button"?value="打開"?οnclick="open_dialog();"/>

這樣當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)會(huì)打開這個(gè)dialog.打開后的dialog如下圖：

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

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

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

這是自己寫的一個(gè)表單，用于讓用戶登錄的表單，還記得嗎？dialog是通過在頁面中指定一個(gè)div，然后得到該div對(duì)象.dialog()就可以生成dialog了，同樣的道理，我們可以在這個(gè)div中加入自己想要的表單域。這個(gè)就是我自己定制的登錄表單。樣式采用了UI提供的樣式，當(dāng)然，如果你覺得這個(gè)樣式不好同樣是可以自己定制自己的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>

大家可以看到每個(gè)input標(biāo)簽都有一個(gè)class屬性，指定了3個(gè)class樣式。這就是jQueryUI給我們提供的，不需要我們?nèi)憳邮奖砦募?/p>

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

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

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

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

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

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

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

功能描述：

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

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

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

????????<p?class="validateTips">所有的表單域都為必填項(xiàng).</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中顯示的就是注冊(cè)表單的內(nèi)容。一共四項(xiàng)，和大家看到的dialog中的是一致的

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

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

//獲取name,password,email和birth對(duì)象并將對(duì)象添加到一個(gè)空對(duì)象中備用

var?uname?=?$("#uname"),

password?=?$("#upass"),

email?=?$("#email"),

birth?=?$("#birth"),

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

tips?=?$(".validateTips");

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

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

open:function(){

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

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

fields.val("");

},

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

autoOpen:false,//不自動(dòng)打開

buttons:{

提交:function(){

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

var?chk?=?true;

//驗(yàn)證字段長度是否符合要求

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);

//正則表達(dá)式驗(yàn)證用戶名和email是否合法

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

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

在上邊的驗(yàn)證中使用到了checkLength()方法和checkReg方法，這兩個(gè)方法分別都是自定義方法，分別是驗(yàn)證字段長度和通過正則表達(dá)式驗(yàn)證輸入是否合法的方法，在jQueryUI官方提供的Demo里也有相應(yīng)的方法，我在這里對(duì)方法做修改，因?yàn)楣俜降腄EMO中當(dāng)驗(yàn)證失敗后，重新打開DIALOG時(shí)，驗(yàn)證失敗的提示信息和錯(cuò)誤樣式都還保存著。而我寫的方法已經(jīng)做了修改。不會(huì)有這樣的問題，下面是checkLength和checkReg方法，方法的注釋我寫的很清楚了，不再解釋，我會(huì)說下關(guān)于添加錯(cuò)誤CSS樣式的東西。

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

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

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

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

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

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

return?false;

}else{

//如果驗(yàn)證通過則移除當(dāng)前對(duì)象的CSS錯(cuò)誤樣式

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

return?true;

}

}

?

//通過正則表達(dá)式驗(yàn)證內(nèi)容的方法,o為表單域?qū)ο?reg為正則表達(dá)式,n為錯(cuò)誤提示信息

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;

}

}

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

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

function?updateTip(t){

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

}

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

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

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

if(chk){

//驗(yàn)證通過后移除提示處的樣式和錯(cuò)誤消息

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

//序列化表單

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

//發(fā)起ajax請(qǐng)求

$.ajax({

type:'post',

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

data:user,

success:function(msg){

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

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

}else{

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

}

},

error:function(){

alert("ajax請(qǐng)求失敗");

}

});

}

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

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

總結(jié)

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

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