jQuery Dialog對話方塊事件

2021-06-05 09:16:14 字數 1051 閱讀 4603

dialog對話方塊事件

對話方塊應用場景

對話方塊是最常用、最實用的功能。

1)  靜態提示類對話方塊,對話方塊的內容是固定的

2)  動態提示類對話方塊,對話方塊內容是根據事件源變化的

3)  遮罩類對話方塊,對話方塊彈出時背景變灰並且不可選

使用jquery ui的dialog 元件可以輕鬆實現上面三種效果

dialog元件的主要特點是可以拖動(draggable),可以改變大小(resizable)。

dialog對話方塊的使用也十分簡單,選中了乙個元素後,可以通過對這個元素使用「.dialog()」讓其變成乙個對話方塊,通過傳遞各種options屬性類修改對話方塊的各種行為。

通常乙個對話方塊是乙個div元素:

彈出層下面的語句將使用預設的options屬性生成乙個對話方塊。

jquery(「#divtip」).dialog();

執行完上面的語句後,這個div元素變成了乙個可以拖動、可以拉伸的對話方塊。

當然這只是最簡單的應用。下面通過乙個完整的例項來快速上手dialog對話方塊元件。

使用dialog控制項實現三種具體的彈出框。

一種是靜態彈出層,即彈出層的內容是固定的。

一種是動態彈出層,即彈出層的內容根據事件的觸發者而不同。

另外一種是常見的遮罩類彈出層,即彈出層顯示後,頁面上除了彈出層以外的元素都不能操作。

首先看一下頁面上的幾個元素的html片段。

顯示提示  顯示提示  

顯示提示   顯示提示  

紅色     

綠色    

元素頁面上顯示的元素,用來觸發顯示彈出層的事件。

彈出層的html**如下:

彈出層

width=」480px」height=」250px」 frameborder=」0」>

彈出層就是乙個個div元素。會根據需要顯示或隱藏。

準備好了html元素,接下來就是應用jquery ui的dialog控制項。首先,在initializedom中,獲取稍後需要操作的頁面元素。

initializedom:function()

jQuery dialog對話方塊

基本的dialog 這是乙個預設的對話方塊,用於顯示資訊。對話方塊視窗可以移動,調整尺寸,預設可通過 x 圖示關閉。為dialog開啟和關閉加上特效動畫 effect clip 可取值blind,clip,drop,explode,fold,puff,slide,scale,size,pulsate...

jquery dialog對話方塊外掛程式例項彈層效果

本文章是利用了jquery dialog對話方塊外掛程式例項彈層效果哦,dialog彈出乙個iframe對話方塊,好了下面我們先來看看例項,然後再告訴你如何例項dialog對話方塊效果。function show explode hide highlight title 提示 url test.as...

jQuery Dialog 彈出層對話方塊外掛程式

網上這種外掛程式很多,但是沒乙個合適的,大部分都做得很大,功能齊全。於是自己做了這個小外掛程式,順便學習下jquery外掛程式的寫法。具體的演示程式在這裡 演示程式。原理很簡單,通過js動態構建乙個div層,將其插入到body中,然後通過調整position的css屬性為absolute或fixed...