jQueryDialog對話框事件用法實例分析_jquery

Dialog對話框事件

對話框應用場景

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

1） 靜態提示類對話框，對話框的內容是固定的
2） 動態提示類對話框，對話框內容是根據事件源變化的
3） 遮罩類對話框，對話框彈出時背景變灰并且不可選

使用jQuery UI的Dialog 組件可以輕松實現上面三種效果

Dialog組件的主要特點是可以拖動（Draggable），可以改變大小（Resizable）。

Dialog對話框的使用也十分簡單，選中了一個元素后，可以通過對這個元素使用".dialog()"讓其變成一個對話框，通過傳遞各種options屬性類修改對話框的各種行為。

通常一個對話框是一個div元素：

 
彈出層

下面的語句將使用默認的options屬性生成一個對話框。

執行完上面的語句后，這個div元素變成了一個可以拖動、可以拉伸的對話框。

當然這只是最簡單的應用。下面通過一個完整的實例來快速上手dialog對話框組件。

使用Dialog控件實現三種具體的彈出框。

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

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

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

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

 
Demo.共享同一個靜態彈出層，彈出層內容固定：
 
 顯示提示 顯示提示 
 顯示提示 顯示提示 
 
 

 



 
Demo.每個彈出層內容不同，彈出層內容存在事件源的元素屬性中：
 
 紅色 
綠色 








 
Demo.彈出IFrame
 
 
 

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

彈出層的html代碼如下：

 
彈出層



 

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

準備好了HTML元素，接下來就是應用jQuery UI的Dialog控件。首先，在initializeDom中，獲取稍后需要操作的頁面元素。

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com