應用到你的項目

在頁面head引入lhgdialog(如果項目采用jQuery作為框架，則引用jQuery的庫)。

<script type="text/javascript" src="lhgdialog.min.js"></script>

配置全局默認參數(可選):

(function(config){?config['extendDrag'] = true; // 注意，此配置參數只能在這里使用全局配置，在調用窗口的傳參數使用無效?config['lock'] = true;?config['fixed'] = true;?config['okVal'] = 'Ok';?config['cancelVal'] = 'Cancel';?// [more..]? })($.dialog.setting);?// 如果只設置一個或少量全局配置也可這樣：? $.dialog.setting.extendDrag = true;

快速入門

一、使用傳統的參數
$.dialog(content,ok,cancel)

$.dialog('簡單愉悅的接口，強大的表現力，優雅的內部實現', function(){alert('yes');});

二、使用字面量傳參
$.dialog(options)

var dialog = $.dialog({title: '歡迎',content: '歡迎使用lhgdialog對話框組件！',icon: 'succeed',ok: function(){?this.title('警告').content('請注意lhgdialog兩秒后將關閉！').lock().time(2);?return false;?}? });

窗口lhgdialog.min.js文件的url參數

參數形式為：<script type="text/javascript" src="lhgdialog.min.js?self=true&skin=chrome"></script>

self：指定彈出窗口的頁面

類型：String? 默認：'false'? 說明：此參數只用在框架頁面中，如果不寫此參數或值為false時則窗口跨框架彈出在框架最頂層頁面，如果值為true則不跨框架，而在當前面頁彈出。

skin：多皮膚共享CSS文件名

類型：String? 默認：'default'? 說明：不寫此參數則值為default。如果你想在同一頁面使用不同皮膚的窗口，此處的值就為多皮膚共存的CSS的文件名

url參數不需要設定的就可以不寫，不寫時就使用默認值。

初始化參數列表

內容相關

title：窗口的標題文本

類型：String|Boolean? 默認：'視窗'? 說明：窗口標題的文件字符，如果值為false時就會隱藏標題欄

content：窗口中加載的內容

類型：String? 默認：'loading...'? 說明：1.如果想加載單獨的頁面，只要在字符前加'url:'字符即可，如：content:'url:content.html'?2.如果沒有設定content的值則會有loading的動畫

按鈕相關

ok：確定按鈕回調函數

類型：Function|Boolean? 默認：null? 說明：函數如果返回false將阻止對話框關閉；函數this指針指向內部api；如果傳入true表示只顯示有關閉功能的按鈕

cancel：取消按鈕回調函數

類型：Function|Boolean? 默認：null? 說明：1.函數如果返回false將阻止對話框關閉；函數this指針指向內部api；?2.如果傳入true表示只顯示有關閉功能的按鈕，標題欄的關閉按鈕其實就是取消按鈕，點擊同樣觸發cancel事件?3.如果值為false時則隱藏標題欄右邊的關閉按鈕

okVal：確定按鈕文字

類型：String? 默認：確定

cancelVal：取消按鈕文字

類型：String? 默認：取消

min：是否顯示最小化按鈕

類型：Boolean? 默認：true

max：是否顯示最大化按鈕

類型：Boolean? 默認：true

button：自定義按鈕

類型：Array? 默認：null? 說明：? 配置參數成員：? name —— 按鈕名稱? callback —— 按下后執行的函數? focus —— 是否聚焦點? disabled —— 是否標記按鈕為不可用狀態（后續可使用擴展方法讓其恢復可用狀態）? 示例：? 參數如：[{name: '登錄', callback: function () {}}, {name: '取消'}] 。注意點擊按鈕默認會觸發按鈕關閉動作，需要阻止觸發關閉請讓回調函數返回false

尺寸相關

width：指定窗口的寬度

類型：Number|String? 默認：'auto'? 說明：1. 設置窗口的寬度，可以帶單位。一般不需要設置此，對話框框架會自己適應內容?2.如果設置為百分值單位，將會以根據瀏覽器可視范圍作為基準，此時如果瀏覽器窗口大小被改變其也會進行相應的調整

height：指定窗口的高度

類型：Number|String? 默認：'auto'? 說明：1.設置窗口的高度，可以帶單位。?2.如果設置為百分值單位，將會以根據瀏覽器可視范圍作為基準，此時如果瀏覽器窗口大小被改變其也會進行相應的調整

minWidth：最小寬度限制

類型：Number? 默認：96? 說明：此參數值只能為數字

minHeight：最小高度限制

類型：Number? 默認：32? 說明：此參數值只能為數字

位置相關

fixed：開啟靜止定位

類型：Boolean? 默認：false? 說明：靜止定位是css2.1的一個屬性，它靜止在瀏覽器某個地方不動，也不受滾動條拖動影響

left：相對于可視區域的X軸的坐標

類型：Number|String? 默認：'50%'? 說明：可以使用'0%' ~ '100%'作為相對坐標，如果瀏覽器窗口大小被改變其也會進行相應的調整

top：相對于可視區域的Y軸的坐標

類型：Number|String? 默認：'50%'? 說明：可以使用'0%' ~ '100%'作為相對坐標，如果瀏覽器窗口大小被改變其也會進行相應的調整

視覺相關

lock：開啟鎖屏

類型：Boolean? 默認：false? 說明：中斷用戶對話框之外的交互，用于顯示非常重要的操作/消息，所以不建議頻繁使用它，它會讓操作變得繁瑣

background：鎖屏遮罩顏色

類型：String? 默認：'#FFF'? 說明：請注意這是一個會影響到全局的配置，后續出現的對話框的遮罩顏色都和此設置一樣，再設置不再起作用

opacity：鎖屏遮罩透明度

類型：Number? 默認：.5? 說明：請注意這是一個會影響到全局的配置，后續出現的對話框的遮罩透明度都和此設置一樣，再設置不再起作用

icon：定義消息圖標

類型：String? 默認：null? 說明：可定義“skins/icons/”目錄下的圖標名作為參數名（一定要包含后綴名）

titleIcon：標題欄左邊的小圖標

類型：String? 默認：null? 說明：可定義“skins/icons/”目錄下的圖標名作為參數名（一定要包含后綴名）

padding：內容與邊界填充邊距(即css padding)

類型：String? 默認：'15px 10px'? 說明：如果內容頁為iframe方式加載的則在css里需要設置為0，要不在IE6中易出問題

skin：多皮膚共存時指定的皮膚樣式

類型：String? 默認：''? 說明：指定窗口要使用的皮膚的主類名

交互相關

time：設置對話框顯示時間

類型：Number? 默認：null? 說明：以秒為單位

resize：是否允許用戶調節尺寸

類型：Boolean? 默認：true

drag：是否允許用戶拖動位置

類型：Boolean? 默認：true

esc：是否允許用戶按Esc鍵關閉對話框

類型：Boolean? 默認：true? 說明：只有窗口獲得焦點后才能使用此功能

cache：是否緩存iframe方式加載的窗口內容頁

類型：Boolean? 默認：true? 說明：只有使用iframe方式加載的單獨頁面的內容時此參數才有效

extendDrag：是否開啟增強拖拽體驗

類型：Boolean? 默認：true? 說明：1.此屬性為全局性設置，不能在窗口調用的參數里設置，只能使用lhgdialog.setting.extendDrag來設置?2.防止鼠標落入iframe導致不流暢，對超大對話框拖動優化

高級相關

id：設定對話框唯一標識

類型：String|Number? 默認：null? 說明：1.防止重復彈出?2.定義id后可以使用this.get(youID)和lhgdialog.list[youID]獲取擴展方法

zIndex：重置全局zIndex初始值

類型：Number? 默認：1976? 說明：用來改變對話框疊加高度，請注意這是一個會影響到全局的配置，后續出現的對話框疊加高度將重新按此累加。

init：對話框彈出后執行的函數

類型：Function? 默認：null? 說明：如果是以iframe方式加載的內容頁此函數會在內容頁加載完成后執行

close：對話框關閉前執行的函數

類型：Function? 默認：null? 說明：函數如果返回false將阻止對話框關閉。請注意這不是關閉按鈕的回調函數，無論何種方式關閉對話框，close都將執行。

parent：打開子窗口的父窗口對象

類型：Object? 默認：null? 說明：此參數只用在打開多層窗口都使用遮罩層時才會用到此參數，注意多層窗口鎖屏時一定要加此參數

擴展方法

窗口實例對象內部方法

close()：關閉對話框

參數：無? 說明：在需要關閉窗口時可調用此方法

reload(win,url)：刷新或跳轉指定的頁面

參數1：指定的要刷新或跳轉的頁面的window對象? 參數2：要跳轉到的頁面地址

show()：顯示對話框

參數：無

hide()：隱藏對話框

參數：無

title(value)：寫入標題

參數1：標題的文本? 說明：無參數則返回創建的窗口對象實例

content(value)：向窗口中寫入內容

參數1：窗口中的內容? 說明：如果參數的前3個字符為'url:'參使用iframe方式加載單獨的內容頁，無參數則返回創建的窗口對象實例

button(arguments)：插入一個自定義按鈕

參數1：name -- 按鈕名稱? 參數2：callback -- 按下后執行的函數? 參數3：focus -- 是否聚焦點? 參數4：disabled -- 是否標記按鈕為不可用狀態（后續可使用擴展方法讓其恢復可用狀態）? 說明：此參數為多個對象? 示例：? button({?name: '登錄',?focus: true,?callback: function(){}? },{?name: '取消'? });

position(left,top)：重新定位對話框

參數1：X軸的坐標? 參數2：Y軸的坐標? 說明：參數可以為數字或帶單位的字符如：'200px'或使用'0%' ~ '100%'作為相對坐標

size(width,height)：重新設定對話框大小

參數1：窗口的寬度? 參數2：窗口的高度? 說明：參數可以為數字或帶單位的字符如：'200px'或使用'0%' ~ '100%'百分值單位

max()：最大化窗口

參數：無

min()：最小化窗口

參數：無

lock()：鎖屏

參數：無

unlock()：解鎖

參數：無

time(val,callback)：定時關閉（單位秒）

參數1：數值，以秒為單位? 參數2：回調函數? 說明：參數2為窗口關閉前執行的函數

focus() ：自動設置窗口中焦點元素

參數：無

zindex() ：置頂窗口

參數：無

get(id,object) ：根據指定id獲取相應的對象

參數1：窗口的id? 參數2：是否返回的是窗口實例對象? 說明：參數2的值只有為數字1時才返回指定id的窗口的實例對象

api：內容頁中調用窗口實例對象接口

說明：此對象屬性是附加在iframe元素的一個屬性，在iframe方式加載的內容頁中通過調用此函數來獲取窗口的實例對象，示例：var api = frameElement.api; 注：此句代碼是加在iframe方式加載的內容頁中的，一定要注意

opener：加載窗口組件頁面的window對象

說明：此屬性主要用在iframe方式加載的內容頁中，示例：var api = frameElement.api, W = api.opener; 此時的W即為加載窗口組件頁面的window對象

iframe：iframe方式加載內容的iframe對象

說明：此屬性主要用于在窗口組件調用頁面操作窗口中的iframe對象

iwin：iframe方式加載內容頁的window對象

說明：此屬性主要用于在窗口組件調用頁面操作窗口中的window對象，示例：var dg = $.dialog({'url:content.html',init:function(){ if( this.iwin.document.body ) alert('窗口內容頁加載完成'); });

窗口外部方法

$.dialog.focus：獲取焦點的窗口實例對象

說明：可以使用此屬性獲取兒得焦點的窗口的對象，示例：var dg = $.dialog.focus; 此時的dg就是當前焦點窗口的對象實例

$.dialog.list：所有窗口對象實例的集合

說明：通過此屬性可獲取所有打開的窗口對象，示例：關閉頁面所有對話框? var list = $.dialog.list;? for( var i in list ){?list[i].close();? }

$.dialog.top：獲取lhgdialog可用最高層window對象

說明：這與直接使用window.top不同，它能排除url參數self為true時定義的頂層頁面為調用窗口組件頁面或者頂層頁面為框架集的情況

$.dialog.data(name,value)：跨框架數據共享寫入接口

參數1：存儲的數據名? 參數2：將要存儲的任意數據(無此項則返回被查詢的數據，如果此值為false就刪除指定名稱的數據)? 說明：框架與框架之間以及與主頁面之間進行數據交換是非常頭疼的事情，常規情況下你必須知道框架的名稱才能進行數據交換，如果是在復雜的多層框架下操作簡直就是噩夢。? 而data方法就是為了解決這個問題，你完全不用管框架層級問題，它可以寫入任何類型的數據，而做到各個頁面之間數據共享。

擴展的一些提示性的窗口

$.dialog.alert(content,callback)：警告消息

參數1：內容? 參數2：窗口關閉時執行的回調函數

$.dialog.confirm(content,yes,no)：確認

參數1：內容? 參數2：確定按鈕回調函數? 參數3：取消按鈕回調函數

$.dialog.prompt(content,yes,value)：提問

參數1：內容? 參數2：確定按鈕回調函數? 參數3：文本框默認值

$.dialog.tips(content,time,icon,callback)：短暫提示

參數1：內容? 參數2：顯示時間? 參數3：提示圖標? 參數4：提示關閉時執行的函數

$.dialog.load(url,options,cache)：Ajax填充內容

參數1：地址? 參數2：配置參數? 參數3：是否允許緩存. 默認false

總結

以上是生活随笔為你收集整理的lhgdialog的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。