應(yīng)用到你的項(xiàng)目
如果您使用獨(dú)立版本的lhgDialog窗口組件,，您只需在頁面head中引入lhgcore.lhgdialog.min.js文件,，4.1.1+版本做了修改可以和jQuerya庫同時(shí)引用，而且4.1.1+版本的獨(dú)立組件的lhgcore庫做了極大的修改，專門為組件定制,，壓縮后才6K與組件合在一起總大小才不到20K，效率上得到很大提高，比引用jQuery快很多,，但這里要注意如果你同時(shí)引用了jQuery庫的話必須把$換成J，如果沒引用jQuery庫則可直接使用$,。
<script type="text/javascript" src="lhgcore.lhgdialog.min.js"></script>
如果您的頁面中引入了jQuery庫文件,，您只需在頁面head中再引入lhgdialog.min.js文件即可，此時(shí)lhgDialog組件將作為jQuery的一個(gè)插件使用,，注意lhgdialog.min.js要寫到j(luò)Query庫文件的下面喲,。 <script type="text/javascript" src="jQuery-1.7.1.min.js"></script>
<script type="text/javascript" src="lhgdialog.min.js"></script>
組件提供全局默認(rèn)配置參數(shù)讀/寫接口，如果您想修改組件的全局默認(rèn)配置,，按照以下方法設(shè)置即可(可選): (function(config){
config['extendDrag'] = true; // 注意,，此配置參數(shù)只能在這里使用全局配置,，在調(diào)用窗口的傳參數(shù)使用無效
config['lock'] = true;
config['fixed'] = true;
config['okVal'] = 'Ok';
config['cancelVal'] = 'Cancel';
// [more..]
})($.dialog.setting);
// 如果只設(shè)置一個(gè)或少量全局配置也可這樣：
$.dialog.setting.extendDrag = true;
// 獲取一個(gè)全局配置參數(shù)值(獲取lhgDialog組件絕對(duì)路徑)：
var path = $.dialog.setting.path;
快速入門
4.2.0+版本開始去掉了傳統(tǒng)傳參數(shù)的方法
使用字面量傳參
$.dialog(options) var dialog = $.dialog({title: '歡迎',content: '歡迎使用lhgdialog對(duì)話框組件！',icon: 'succeed',ok: function(){
this.title('警告').content('請(qǐng)注意lhgdialog兩秒后將關(guān)閉,！').lock().time(2);
return false;
}
});
窗口lhgdialog.min.js文件的url參數(shù)
參數(shù)形式為：<script type="text/javascript" src="lhgdialog.min.js?self=true&skin=chrome"></script>
-
self：指定彈出窗口的頁面類型：String
默認(rèn)：'false'
說明：此參數(shù)只用在框架頁面中,，如果不寫此參數(shù)或值為false時(shí)則窗口跨框架彈出在框架最頂層頁面，如果值為true則不跨框架,，而在當(dāng)前面頁彈出,。
-
skin：多皮膚共享CSS文件名類型：String
默認(rèn)：'default'
說明：不寫此參數(shù)則值為default。如果你想在同一頁面使用不同皮膚的窗口,，此處的值就為多皮膚共存的CSS的文件名
url參數(shù)不需要設(shè)定的就可以不寫,，不寫時(shí)就使用默認(rèn)值。
初始化參數(shù)列表
內(nèi)容相關(guān)
-
title：窗口的標(biāo)題文本類型：String|Boolean
默認(rèn)：'視窗'
說明：窗口標(biāo)題的文件字符,，如果值為false時(shí)就會(huì)隱藏標(biāo)題欄
-
content：窗口中加載的內(nèi)容類型：String
默認(rèn)：'loading...'
說明：1.如果想加載單獨(dú)的頁面,，只要在字符前加'url:'字符即可，如：content:'url:content.html'
2.如果沒有設(shè)定content的值則會(huì)有loading的動(dòng)畫
按鈕相關(guān)
-
ok：確定按鈕回調(diào)函數(shù)類型：Function|Boolean
默認(rèn)：null
說明：函數(shù)如果返回false將阻止對(duì)話框關(guān)閉,；函數(shù)this指針指向內(nèi)部api,；如果傳入true表示只顯示有關(guān)閉功能的按鈕
-
cancel：取消按鈕回調(diào)函數(shù)類型：Function|Boolean
默認(rèn)：null
說明：1.函數(shù)如果返回false將阻止對(duì)話框關(guān)閉；函數(shù)this指針指向內(nèi)部api,；
2.如果傳入true表示只顯示有關(guān)閉功能的按鈕,，標(biāo)題欄的關(guān)閉按鈕其實(shí)就是取消按鈕，點(diǎn)擊同樣觸發(fā)cancel事件
3.如果值為false時(shí)則隱藏標(biāo)題欄右邊的關(guān)閉按鈕
-
okVal：確定按鈕文字類型：String
默認(rèn)：確定
-
cancelVal：取消按鈕文字類型：String
默認(rèn)：取消
-
min：是否顯示最小化按鈕類型：Boolean
默認(rèn)：true
-
max：是否顯示最大化按鈕類型：Boolean
默認(rèn)：true
-
button：自定義按鈕類型：Array
默認(rèn)：null
說明：
配置參數(shù)成員：
name —— 按鈕名稱
callback —— 按下后執(zhí)行的函數(shù)
focus —— 是否聚焦點(diǎn)
disabled —— 是否標(biāo)記按鈕為不可用狀態(tài)（后續(xù)可使用擴(kuò)展方法讓其恢復(fù)可用狀態(tài)）
示例：
參數(shù)如：[{name: '登錄', callback: function () {}}, {name: '取消'}] ,。注意點(diǎn)擊按鈕默認(rèn)會(huì)觸發(fā)按鈕關(guān)閉動(dòng)作,，需要阻止觸發(fā)關(guān)閉請(qǐng)讓回調(diào)函數(shù)返回false
尺寸相關(guān)
-
width：指定窗口的寬度類型：Number|String
默認(rèn)：'auto'
說明：設(shè)置窗口的寬度，可以帶單位,。一般不需要設(shè)置此,，對(duì)話框框架會(huì)自己適應(yīng)內(nèi)容
-
height：指定窗口的高度類型：Number|String
默認(rèn)：'auto'
說明：設(shè)置窗口的高度，可以帶單位,。
位置相關(guān)
-
fixed：開啟靜止定位類型：Boolean
默認(rèn)：false
說明：靜止定位是css2.1的一個(gè)屬性,，它靜止在瀏覽器某個(gè)地方不動(dòng)，也不受滾動(dòng)條拖動(dòng)影響
-
left：相對(duì)于可視區(qū)域的X軸的坐標(biāo)類型：Number|String
默認(rèn)：'50%'
說明：可以使用'0%' ~ '100%'作為相對(duì)坐標(biāo),，如果瀏覽器窗口大小被改變其也會(huì)進(jìn)行相應(yīng)的調(diào)整
-
top：相對(duì)于可視區(qū)域的Y軸的坐標(biāo)類型：Number|String
默認(rèn)：'50%'
說明：可以使用'0%' ~ '100%'作為相對(duì)坐標(biāo),，如果瀏覽器窗口大小被改變其也會(huì)進(jìn)行相應(yīng)的調(diào)整
視覺相關(guān)
-
lock：開啟鎖屏類型：Boolean
默認(rèn)：false
說明：中斷用戶對(duì)話框之外的交互，用于顯示非常重要的操作/消息,，所以不建議頻繁使用它,，它會(huì)讓操作變得繁瑣
-
icon：定義消息圖標(biāo)類型：String
默認(rèn)：null
說明：可定義“skins/icons/”目錄下的圖標(biāo)名作為參數(shù)名（一定要包含后綴名）
-
padding：內(nèi)容與邊界填充邊距(即css padding)類型：String
默認(rèn)：'15px 10px'
說明：如果內(nèi)容頁為iframe方式加載的則在css里需要設(shè)置為0，要不在IE6中易出問題
-
skin：多皮膚共存時(shí)指定的皮膚樣式類型：String
默認(rèn)：''
說明：指定窗口要使用的皮膚在加載的多皮膚共存的CSS文件中的相應(yīng)主類名
交互相關(guān)
-
focus：彈出窗口后是否自動(dòng)獲取焦點(diǎn)（4.2.0新增）類型：Boolean
默認(rèn)：true
-
time：設(shè)置對(duì)話框顯示時(shí)間類型：Number
默認(rèn)：null
說明：以秒為單位
-
resize：是否允許用戶調(diào)節(jié)尺寸類型：Boolean
默認(rèn)：true
-
drag：是否允許用戶拖動(dòng)位置類型：Boolean
默認(rèn)：true
-
esc：是否允許用戶按Esc鍵關(guān)閉對(duì)話框類型：Boolean
默認(rèn)：true
說明：只有窗口獲得焦點(diǎn)后才能使用此功能
-
cache：是否緩存iframe方式加載的窗口內(nèi)容頁類型：Boolean
默認(rèn)：true
說明：只有使用iframe方式加載的單獨(dú)頁面的內(nèi)容時(shí)此參數(shù)才有效
-
extendDrag：是否開啟增強(qiáng)拖拽體驗(yàn)類型：Boolean
默認(rèn)：true
說明：1.此屬性為全局性設(shè)置,，不能在窗口調(diào)用的參數(shù)里設(shè)置,，只能使用lhgdialog.setting.extendDrag來設(shè)置
2.防止鼠標(biāo)落入iframe導(dǎo)致不流暢，對(duì)超大對(duì)話框拖動(dòng)優(yōu)化
高級(jí)相關(guān)
-
data：數(shù)據(jù)傳輸入?yún)?shù)（4.2.0新增）類型：anyone
默認(rèn)：null
說明：此參數(shù)的值可以為任何類型的數(shù)據(jù),，比如常量,，對(duì)象,，數(shù)組，函數(shù)等等...
-
id：設(shè)定對(duì)話框唯一標(biāo)識(shí)類型：String|Number
默認(rèn)：null
說明：1.防止重復(fù)彈出
2.定義id后可以使用this.get(youID)和lhgdialog.list[youID]獲取擴(kuò)展方法
-
zIndex：重置全局zIndex初始值類型：Number
默認(rèn)：1976
說明：用來改變對(duì)話框疊加高度,，請(qǐng)注意這是一個(gè)會(huì)影響到全局的配置,，后續(xù)出現(xiàn)的對(duì)話框疊加高度將重新按此累加。
-
init：對(duì)話框彈出后執(zhí)行的函數(shù)類型：Function
默認(rèn)：null
說明：如果是以iframe方式加載的內(nèi)容頁此函數(shù)會(huì)在內(nèi)容頁加載完成后執(zhí)行
-
close：對(duì)話框關(guān)閉前執(zhí)行的函數(shù)類型：Function
默認(rèn)：null
說明：函數(shù)如果返回false將阻止對(duì)話框關(guān)閉,。請(qǐng)注意這不是關(guān)閉按鈕的回調(diào)函數(shù),，無論何種方式關(guān)閉對(duì)話框，close都將執(zhí)行,。
-
parent：打開子窗口的父窗口對(duì)象類型：Object
默認(rèn)：null
說明：此參數(shù)只用在打開多層窗口都使用遮罩層時(shí)才會(huì)用到此參數(shù),，注意多層窗口鎖屏?xí)r一定要加此參數(shù)
擴(kuò)展方法
窗口實(shí)例對(duì)象內(nèi)部方法
-
close()：關(guān)閉對(duì)話框參數(shù)：無
說明：在需要關(guān)閉窗口時(shí)可調(diào)用此方法
-
reload(win,url)：刷新或跳轉(zhuǎn)指定的頁面參數(shù)1：指定的要刷新或跳轉(zhuǎn)的頁面的window對(duì)象
參數(shù)2：要跳轉(zhuǎn)到的頁面地址
-
show()：顯示對(duì)話框參數(shù)：無
-
hide()：隱藏對(duì)話框參數(shù)：無
-
title(value)：寫入標(biāo)題參數(shù)1：標(biāo)題的文本
說明：無參數(shù)則返回創(chuàng)建的窗口對(duì)象實(shí)例
-
content(value,add,isFrm)：向窗口中寫入內(nèi)容參數(shù)1：value -- 窗口中的內(nèi)容
參數(shù)2：add -- 是否窗口中為后增加的內(nèi)容
參數(shù)3：isFrm -- 是否使用iframe方式加載窗口
說明：如果參數(shù)1的前3個(gè)字符為'url:'則說明您使用iframe方式加載單獨(dú)的內(nèi)容頁，這時(shí)第三個(gè)參數(shù)要為true,，無參數(shù)則返回創(chuàng)建的窗口對(duì)象實(shí)例
-
button(arguments)：插入一個(gè)自定義按鈕參數(shù)1：name -- 按鈕名稱
參數(shù)2：callback -- 按下后執(zhí)行的函數(shù)
參數(shù)3：focus -- 是否聚焦點(diǎn)
參數(shù)4：disabled -- 是否標(biāo)記按鈕為不可用狀態(tài)（后續(xù)可使用擴(kuò)展方法讓其恢復(fù)可用狀態(tài)）
說明：此參數(shù)為多個(gè)對(duì)象
示例：
button({
name: '登錄',
focus: true,
callback: function(){}
},{
name: '取消'
});
-
position(left,top)：重新定位對(duì)話框參數(shù)1：X軸的坐標(biāo)
參數(shù)2：Y軸的坐標(biāo)
說明：參數(shù)可以為數(shù)字或帶單位的字符如：'200px'或使用'0%' ~ '100%'作為相對(duì)坐標(biāo)
-
size(width,height)：重新設(shè)定對(duì)話框大小參數(shù)1：窗口的寬度
參數(shù)2：窗口的高度
說明：參數(shù)可以為數(shù)字或帶單位的字符如：200或'200px'
-
max()：最大化窗口參數(shù)：無
-
min()：最小化窗口參數(shù)：無
-
lock()：鎖屏參數(shù)：無
-
unlock()：解鎖參數(shù)：無
-
time(val,callback)：定時(shí)關(guān)閉（單位秒）參數(shù)1：數(shù)值,，以秒為單位
參數(shù)2：回調(diào)函數(shù)
說明：參數(shù)2為窗口關(guān)閉前執(zhí)行的函數(shù)
-
focus() ：自動(dòng)設(shè)置窗口中焦點(diǎn)元素參數(shù)：無
-
zindex() ：置頂窗口參數(shù)：無
-
get(id,object) ：根據(jù)指定id獲取相應(yīng)的對(duì)象參數(shù)1：窗口的id
參數(shù)2：是否返回的是窗口實(shí)例對(duì)象
說明：參數(shù)2的值只有為數(shù)字1時(shí)才返回指定id的窗口的實(shí)例對(duì)象
-
api：內(nèi)容頁中調(diào)用窗口實(shí)例對(duì)象接口說明：此對(duì)象屬性是附加在iframe元素的一個(gè)屬性，在iframe方式加載的內(nèi)容頁中通過調(diào)用此函數(shù)來獲取窗口的實(shí)例對(duì)象,，示例：var api = frameElement.api; 注：此句代碼是加在iframe方式加載的內(nèi)容頁中的,，一定要注意
-
opener：加載窗口組件頁面的window對(duì)象說明：此屬性主要用在iframe方式加載的內(nèi)容頁中,，示例：var api = frameElement.api, W = api.opener; 此時(shí)的W即為加載窗口組件頁面的window對(duì)象
-
iframe：iframe方式加載內(nèi)容的iframe對(duì)象說明：此屬性主要用于在窗口組件調(diào)用頁面操作窗口中的iframe對(duì)象
-
content：iframe方式加載內(nèi)容頁的window對(duì)象說明：此屬性主要用于在窗口組件調(diào)用頁面操作窗口中的window對(duì)象,，示例：var dg = $.dialog({'url:content.html',init:function(){ if( this.content.document.body ) alert('窗口內(nèi)容頁加載完成'); });
窗口外部方法
-
$.dialog.focus：獲取焦點(diǎn)的窗口實(shí)例對(duì)象說明：可以使用此屬性獲取兒得焦點(diǎn)的窗口的對(duì)象，示例：var dg = $.dialog.focus; 此時(shí)的dg就是當(dāng)前焦點(diǎn)窗口的對(duì)象實(shí)例
-
$.dialog.list：所有窗口對(duì)象實(shí)例的集合說明：通過此屬性可獲取所有打開的窗口對(duì)象,，示例：關(guān)閉頁面所有對(duì)話框
var list = $.dialog.list;
for( var i in list ){
list[i].close();
}
擴(kuò)展的一些提示性的窗口
-
$.dialog.alert(content,callback,parent)：警告消息參數(shù)1：內(nèi)容
參數(shù)2：窗口關(guān)閉時(shí)執(zhí)行的回調(diào)函數(shù)
參數(shù)3：警告窗口的父窗口對(duì)象
-
$.dialog.confirm(content,yes,no,parent)：確認(rèn)參數(shù)1：內(nèi)容
參數(shù)2：確定按鈕回調(diào)函數(shù)
參數(shù)3：取消按鈕回調(diào)函數(shù)
參數(shù)4：確認(rèn)窗口的父窗口對(duì)象
-
$.dialog.prompt(content,yes,value,parent)：提問參數(shù)1：內(nèi)容
參數(shù)2：確定按鈕回調(diào)函數(shù)
參數(shù)3：文本框默認(rèn)值
參數(shù)4：提問窗口的父窗口對(duì)象
-
$.dialog.tips(content,time,icon,callback)：短暫提示參數(shù)1：內(nèi)容
參數(shù)2：顯示時(shí)間
參數(shù)3：提示圖標(biāo)
參數(shù)4：提示關(guān)閉時(shí)執(zhí)行的函數(shù)
|
