中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jquery ui(三)彈出窗口 dialog

發布時間:2020-07-23 15:32:04 來源:網絡 閱讀:1666 作者:dearkerwin 欄目:web開發

jquery ui 提供了強大的dialog功能,基本能滿足開發的功能。

一、先上一個簡單的例子:

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>
    這是一個彈出窗口---from ifxoxo.com
</p>
</div>

2、效果截圖

jquery ui(三)彈出窗口 dialog

jquery-ui-dialog截圖 –ifxoxo.com

二、具體用法還是簡單的,總結如下:

1、需要加載的js和css

請記住jquery 一定要在jquery-ui之前加載,加載錯的會導致意想不到的結果。

(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

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

<divid="dialog_div"title="彈出窗口的標題">
<from action=''> .......</from>
     這里是窗口里面顯示的內容 --ifxoxo.com
</div>

(2)不同情況的加載內容,可以定義一個空標簽,待js加載 (或者ajax加載)

<divid="dialog_div" ></div>

3、觸發窗口彈出的js

主要函數如下:$(“dialog_div”).dialog();

dialog函數有一個強大的參數庫,如下

【參數】

參數 默認值 作用
autoOpen true

是否自動打開dialog窗口。當屬性為false的時候,一開始隱藏窗口,

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

buttons {} 顯示一個按鈕,并寫上按鈕的文本,設置按鈕點擊函數
closeOnEscpe true 是否點擊鍵盤ESC鍵關閉dialog
dialogClass null 為窗口加上的class屬性

diaggable

resizable

true 是否能拖動、縮放 (必須加載相應的js)

width

height

auto 窗口的長寬

maxWidth

maxHeight

null

長寬的最大值

minWidth

minHeight

150

長寬的最小值

hide

show

null

當dialog關閉和打開時候的效果。(必須加載相應的jquery.effects.xx.js)

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


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

modal false 是否使用模式窗口,模式窗口打開后,頁面其他元素將不能點擊,直到關閉模式窗口
title null dialog的標題文字
position center

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


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



也可以是一個字符串數組例如['right','top']。

zIndex 1000 dialog的zindex值
stack true 是否在dialog獲得焦點是,dialog將在最上面
bgiframe false 在IE6下,讓后面那個灰屏蓋住select(需要調用jquery.bgiframe.js)
disabled false 當為true是,關掉這個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>這是彈框的內容---ifxoxo.com</p>
</div>

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

4、其他

1、事件

(1) beforeclose 當dialog嘗試關閉的時候此事件將被觸發,如果返回false,那么關閉將被阻止

(2) close 關閉dialog的時候此事件將被觸發

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

(4) focus 獲得焦點的時候此事件將被觸發

(5) dragStart 開始拖動dialog的時候此事件將被觸發

(6) drag 拖動dialog過程此事件將被觸發

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

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

(9) resizeStop 縮放結束的時候此事件將被觸發

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

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

(4)close,open 關閉、打開dialog
(5)option 設置和獲取dialog屬性,

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

//點擊 opener時,窗口打開
 $("#opener").click(function(){
        $("#dialog").dialog("open");
returnfalse;
});
});

三、其他相關聯文章

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


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

永康市| 霞浦县| 科尔| 嘉黎县| 谢通门县| 北流市| 辽阳市| 侯马市| 新疆| 同江市| 措美县| 栾川县| 延边| 辽源市| 自治县| 武鸣县| 加查县| 偏关县| 安溪县| 夏邑县| 陆丰市| 马山县| 商水县| 宜宾县| 邵阳市| 若尔盖县| 宣汉县| 荣昌县| 上林县| 恩施市| 长宁区| 额尔古纳市| 白河县| 宝鸡市| 岳池县| 长兴县| 建水县| 博爱县| 肃宁县| 柘城县| 镇坪县|