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...