溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery ui（三）彈出窗口 dialog

發(fā)布時(shí)間：2020-07-23 15:32:04 來源：網(wǎng)絡(luò) 閱讀：1652 作者：dearkerwin 欄目：web開發(fā)

jquery ui 提供了強(qiáng)大的dialog功能，基本能滿足開發(fā)的功能。

一、先上一個(gè)簡單的例子：

1、代碼如下

<scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<linkrel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script>
  $(function() {
      $( "#dialog" ).dialog({
         buttons: { "Ok": function() { $(this).dialog("close"); } }  
       });
  });
</script>
<divid="dialog"title="Basic dialog">
<p>
    這是一個(gè)彈出窗口---from ifxoxo.com
</p>
</div>

2、效果截圖

jquery ui（三）彈出窗口 dialog

jquery-ui-dialog截圖 –ifxoxo.com

二、具體用法還是簡單的，總結(jié)如下：

1、需要加載的js和css

請(qǐng)記住jquery 一定要在jquery-ui之前加載，加載錯(cuò)的會(huì)導(dǎo)致意想不到的結(jié)果。

（1）jquery
（2）jquery-ui
（3）jquery-ui的css

<scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<linkrel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

2、頁面上的html

頁面上需要一個(gè)裝dialog的容器，需要一個(gè)固定ID,控制彈出窗口的內(nèi)容，而html有兩種方式：
（1）事先寫在頁面上（比如一個(gè)table,form）

<divid="dialog_div"title="彈出窗口的標(biāo)題">
<from action=''> .......</from>
     這里是窗口里面顯示的內(nèi)容 --ifxoxo.com
</div>

（2）不同情況的加載內(nèi)容，可以定義一個(gè)空標(biāo)簽，待js加載 (或者ajax加載)

<divid="dialog_div" ></div>

3、觸發(fā)窗口彈出的js

主要函數(shù)如下：$(“dialog_div”).dialog();

dialog函數(shù)有一個(gè)強(qiáng)大的參數(shù)庫，如下

【參數(shù)】

參數(shù) 默認(rèn)值 作用
autoOpen true

是否自動(dòng)打開dialog窗口。當(dāng)屬性為false的時(shí)候，一開始隱藏窗口，

直到.dialog(“open”)的時(shí)候才彈出dialog窗口

buttons {} 顯示一個(gè)按鈕，并寫上按鈕的文本，設(shè)置按鈕點(diǎn)擊函數(shù)
closeOnEscpe true 是否點(diǎn)擊鍵盤ESC鍵關(guān)閉dialog
dialogClass null 為窗口加上的class屬性

diaggable

resizable

 true 是否能拖動(dòng)、縮放 （必須加載相應(yīng)的js）

width

height

 auto 窗口的長寬

maxWidth

maxHeight

null

 長寬的最大值

minWidth

minHeight

150

 長寬的最小值

hide

show

 null

當(dāng)dialog關(guān)閉和打開時(shí)候的效果。（必須加載相應(yīng)的jquery.effects.xx.js）

效果有：blind,bounce,clip,drop,explode,fade,fold,


highlight,pulsate,puff,slide,scale,size,shake,transfer

modal false 是否使用模式窗口，模式窗口打開后，頁面其他元素將不能點(diǎn)擊，直到關(guān)閉模式窗口
title null dialog的標(biāo)題文字
position center

dialog的顯示位置：可以是’center’, ‘left’, ‘right’,
‘top’, ‘bottom’,


也可以是top和left的偏移量,



也可以是一個(gè)字符串?dāng)?shù)組例如['right','top']。

zIndex 1000 dialog的zindex值
stack true 是否在dialog獲得焦點(diǎn)是，dialog將在最上面
bgiframe false 在IE6下，讓后面那個(gè)灰屏蓋住select(需要調(diào)用jquery.bgiframe.js)
disabled false 當(dāng)為true是，關(guān)掉這個(gè)dialog

示例代碼如下：

<script>

    $(function(){
      $("#dialog").dialog({
         autoOpen:false,
         show:"blind",
         hide:"explode"，

         buttons:{
"Ok":function(){
                   $(this).dialog("close");
},
"Cancel":function(){
                   $(this).dialog("close");
}
}
});

     $("#opener").click(function(){
         $("#dialog").dialog("open");
returnfalse;
});
});
</script>



<div id="dialog" title="Basic dialog">
<p>這是彈框的內(nèi)容---ifxoxo.com</p>
</div>

<button id="opener">Open Dialog</button>

4、其他

1、事件

(1) beforeclose 當(dāng)dialog嘗試關(guān)閉的時(shí)候此事件將被觸發(fā)，如果返回false，那么關(guān)閉將被阻止

(2) close 關(guān)閉dialog的時(shí)候此事件將被觸發(fā)

(3) open 打開dialog的時(shí)候此事件將被觸發(fā)

(4) focus 獲得焦點(diǎn)的時(shí)候此事件將被觸發(fā)

(5) dragStart 開始拖動(dòng)dialog的時(shí)候此事件將被觸發(fā)

(6) drag 拖動(dòng)dialog過程此事件將被觸發(fā)

(7) resizeStart 開始縮放dialog的時(shí)候此事件將被觸發(fā)

(8) resize 縮放dialog過程的時(shí)候此事件將被觸發(fā)

(9) resizeStop 縮放結(jié)束的時(shí)候此事件將被觸發(fā)

$('.selector').dialog({
       beforeclose:function(event, ui){ ... }
});
2、方法

(1)destroy 摧毀 例：.dialog( ‘destroy’ )
(2)disable dialog不可用，例：.dialog(‘disable’);
(3)enable dialog可用，

(4)close，open 關(guān)閉、打開dialog
(5)option 設(shè)置和獲取dialog屬性，

例如：.dialog( ‘option’ , optionName , [value] ) ，如果沒有value，將是獲取。
(6)isOpen 如果dialog打開則返回true，例如：.dialog(‘isOpen’)
(7)moveToTop 將dialog移到最上層，例如：.dialog( ‘moveToTop’ )。

//點(diǎn)擊 opener時(shí)，窗口打開
 $("#opener").click(function(){
        $("#dialog").dialog("open");
returnfalse;
});
});

三、其他相關(guān)聯(lián)文章

1、jquery ui（一）簡介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）彈出窗口 dialog
4、jquery ui（四）進(jìn)度條 progressbar
5、jquery ui（五）日期選擇器 datepicker


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手