jQuery UI全教程之一(dialog的使用教程)
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 黄褐斑治疗方法有哪些
- 下一篇: 安卓欢迎界面和activity之间的跳转