資源描述：
《jqueryui教程之dialog的使用》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。
1、本人初學(xué)jqueryui，使用php語(yǔ)言，以下是學(xué)習(xí)的過(guò)程，希望與大家共同進(jìn)步。jQueryUI目前的版本已經(jīng)更新到了1.9.2。在此將一些jQueryUI組件的用法說(shuō)明一下，方便日后查閱。同時(shí)也方便沒(méi)接觸jQueryUI的人能早日使用jQueryUI套件。本文用的jqueryui組件是在http://jqueryui.com下載,進(jìn)入網(wǎng)站后點(diǎn)擊下圖紅框圈起的“theme”連接，在此頁(yè)面可以選擇主題預(yù)覽，從而選擇您要下載的jqueryui的主題樣式。主題預(yù)覽可以點(diǎn)擊下圖右側(cè)的中的紅框圈出的“Gallery”，然后點(diǎn)擊其下的主題樣式，就
2、可以在頁(yè)面右側(cè)看到相應(yīng)的主題樣式，選擇一個(gè)您喜歡的樣式，點(diǎn)擊“Download”按鈕按要求操作就可下載到你想要的jqueryui組件了。下載后將jquryui組件像平時(shí)使用的js文件一樣放到j(luò)s文件夾下即可（此處我下載的是第一個(gè)UIlightness樣式，并將解壓后的文件夾更名為jquery-ui文件夾了）。一、首先來(lái)說(shuō)jQueryUI使用頻率較高dialog組件：dialog就是我們常說(shuō)的彈出層，應(yīng)用還是比較廣泛的，比如：可以使用彈出層做登錄、注冊(cè)和消息提示等功能。下面來(lái)詳細(xì)說(shuō)說(shuō)dialog的使用方法。在官方提供的官方文檔和示例中有
3、六種形式的dialog,但是前五種都是大同小異，包括在編寫代碼方面也僅僅是多設(shè)置兩個(gè)屬性而已，沒(méi)什么太大的不同，先來(lái)看看使用jQueryUI組件的時(shí)候需要那些前期貯備工作。首先將需要依賴的js文件導(dǎo)入到你的頁(yè)面中。需要依賴的文件如下：jquery-ui-1.9.2.custom.css（位于jquery-ui-1.9.2/css/smoothness下）這個(gè)是jQueryUI套件的CSS樣式表，demos.css（位于jquery-ui-1.9.2/development-bundle/demos下）這個(gè)是jQueryUIdemo中用
4、到的CSS樣式，因?yàn)楸纠杏玫搅诉@些樣式所以將它導(dǎo)入進(jìn)來(lái)，如果大家不需要可以不導(dǎo)這個(gè)文件，導(dǎo)入jquery核心文件jquery-1.8.3.min.js，沒(méi)有它一切工作都無(wú)法開(kāi)展。切記一點(diǎn)：一定要在引入其他的js文件之前引入jquery-1.8.3.min.js文件。jquery-ui-1.9.2.custom.min.js這個(gè)是jQueryUI的核心js文件，也是必須的。有了上述的引用后就可以在你的頁(yè)面中使用jQueryUI了。先看一個(gè)超級(jí)簡(jiǎn)單的DEMO：這
5、是一個(gè)采用默認(rèn)樣式的對(duì)話框
在頁(yè)面中加入上邊的一行代碼，然后加入一個(gè)script標(biāo)簽對(duì)，在腳本寫如下代碼：$(function(){??????$("#dialog").dialog();});打開(kāi)你的頁(yè)面看一下吧，如果沒(méi)什么意外你會(huì)看到一個(gè)類似這樣的對(duì)話框這就是一個(gè)彈出層，其中div的title被當(dāng)作了dialog的title,右上角有關(guān)閉的按鈕“x”，右下角則可以拖拽改變大小。這就是一個(gè)默認(rèn)的dialog，雖然我們沒(méi)有為它指定高度和寬度，但是它有默認(rèn)的值，在我們沒(méi)有設(shè)定情況下dialog默認(rèn)會(huì)彈出在屏幕的中央，大
6、小也是有默認(rèn)值的，可以改變大小，顯示關(guān)閉按鈕，這都是默認(rèn)的樣式，那么如果我們想自己定制一下dialog，不想讓他這樣顯示該如何做？下面介紹一些屬性和方法來(lái)改變一下這個(gè)dialog，用到的屬性如下：autoOpen,modal,buttons，根據(jù)這些屬性我們來(lái)定制一個(gè)不會(huì)自動(dòng)打開(kāi)(當(dāng)點(diǎn)擊按鈕或者通過(guò)其他的事件來(lái)觸發(fā)彈出dialog的事件)，并且?guī)в姓谡?模式窗體)和按鈕的dialog。buttons屬性是一個(gè)復(fù)合屬性，使用形式如下：buttons:{ok:function(){點(diǎn)擊按鈕執(zhí)行的事件},cancel:function(){
7、點(diǎn)擊按鈕執(zhí)行的事件}}其中ok是按鈕顯示的文本，而function是點(diǎn)擊按鈕后執(zhí)行的事件。注意，在ok和function之間有冒號(hào)（“:”），雖然按鈕可以為中文，比如:確定:function(){}這種形式，但是切記，在按鈕文本和function之間的冒號(hào)一定是英文字符下的冒號(hào)，不要寫成中文的全角冒號(hào)，否則會(huì)有錯(cuò)誤。在html頁(yè)面輸入下列代碼：
8、dset>username:
password:
