lhgdialog基本使用方法 :
1.下載下傳最新版本lhgdialog: http://lhgcore.com/lhgdialog.rar
2.在需要調用lhgdialog編輯器的網頁head标簽結束之前添加以下代碼:
<script type="text/javascript" src="lhgcore.min.js"></script>
- <script type="text/javascript" src="lhgdialog.min.js"></script>
- <!--注:如果将視窗元件做為jQ的元件來使用就不需要加載lhgcore.min.js庫檔案,而要加載jQ庫檔案。-->
- <script type="text/javascript" src="jquery-1.6.min.js"></script>
- <script type="text/javascript" src="lhgdialog.min.js"></script>
<script type="text/javascript" src="lhgcore.min.js"></script>
<script type="text/javascript" src="lhgdialog.min.js"></script>
<!--注:如果将視窗元件做為jQ的元件來使用就不需要加載lhgcore.min.js庫檔案,而要加載jQ庫檔案。-->
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="lhgdialog.min.js"></script>
3.lhgdialog提供兩種方式彈出視窗:
- <script type="text/javascript">
- //第一種jQ調用方式
- J(function(){
- J('#dg').dialog({ id:'test1', html:'lhgdialog' });
- });
- //如果作為jQ元件來用的話J就得換成$
- $(function(){
- $('#dg').dialog({ id:'test1', html:'lhgdialog' });
- });
- //第二種普通函數式調用
- function opdg( id )
- {
- var dg = new J.dialog({ id:id, html:'lhgdialog' });
- //如果作為jQ元件來用的話J就得換成$
- var dg = new $.dialog({ id:id, html:'lhgdialog' });
- dg.ShowDialog();
- }
- </script>
- </head>
- <body>
- <input type="button" id="dg" value="opendg1"/>
- <input type="button" value="opendg2" onclick="opdg('test2');"/>
- </body>
<head>
<script type="text/javascript">
//第一種jQ調用方式
J(function(){
J('#dg').dialog({ id:'test1', html:'lhgdialog' });
});
//如果作為jQ元件來用的話J就得換成$
$(function(){
$('#dg').dialog({ id:'test1', html:'lhgdialog' });
});
//第二種普通函數式調用
function opdg( id )
{
var dg = new J.dialog({ id:id, html:'lhgdialog' });
//如果作為jQ元件來用的話J就得換成$
var dg = new $.dialog({ id:id, html:'lhgdialog' });
dg.ShowDialog();
}
</script>
</head>
<body>
<input type="button" id="dg" value="opendg1"/>
<input type="button" value="opendg2" οnclick="opdg('test2');"/>
</body>
獲得父窗體對象方法:
dg = frameElement.lhgDG;
var W = dg.curWin;//獲得父窗體
parent參數示例并且父子視窗都加了遮罩層
//這裡調用視窗都用的普通函數方式
function opdg1(){
var testDG = new J.dialog({ id:'test19', page:'content2.html', cover:true });
testDG.ShowDialog();
}
//内容頁content2.html裡的代碼為:
var DG = frameElement.lhgDG;
function opChild()
{
var testDG2 = new DG.curWin.J.dialog({ id:'child', cover: true, html:'我是子視窗', width:300, height:200, parent:DG });
testDG2.ShowDialog();
}
//你可以打開content2.html頁面檢視裡面的代碼,這裡要注意如果想在視窗中彈出子視窗,
不要在子視窗的頁面中再加載lhgdialog.min.js來調用彈出視窗的函數,
一定要用curWin.J.dialog,因為不這樣父子視窗間的zIndex值會是2個,它們層疊的次序就亂了。
關閉視窗重新整理父頁面
J('#btn25').dialog({ id:'test25', page:'content4.html' });
//content4.html頁面裡的代碼為:
var DG = frameElement.lhgDG;
DG.addBtn( 'ok', '确定', ok );
function ok()
{
// 這裡寫你要操作的代碼,最後寫重新整理代碼
DG.curWin.location.reload();
}
//當調用視窗的頁面被重新整理,視窗就會自動關閉,是以不用調用程式的cancel關閉函數
lhgdialog API 說明
一)視窗lhgdialog.min.js檔案的url參數(3.4.0新增)
參數形式為:<script type="text/javascript" src="lhgdialog.min.js?t=self&s=chrome"></script>
t:指定彈出視窗的頁面(替代原來的第22個參數SetTopWindow)
參數值:self,在目前頁面彈出視窗。此參數隻用在架構頁面中,如果不寫此參數則視窗跨架構彈出在架構最頂層頁面,如果值為self則不跨架構,而在目前面頁彈出。
s:視窗使用的皮膚的名稱(3.5.0修改)
參數值:預設default,不寫此參數則值為default。如果你想在同一頁面使用不同皮膚的視窗,就要把你要使用的皮膚的名稱都寫上,中間用","隔開,例如:lhgdialog.min.js?s=default,chrome,此參數用來動态給視窗換膚,參數的值為skins檔案夾下各皮膚檔案夾的名,具體使用方法請參閱皮膚制作
url參數不需要設定的就可以不寫,不寫時就使用預設值。
初始化參數清單
二)初始化參數清單:即為J.dialog({ 這裡的參數 });
lockScroll:彈出遮罩層時是否消除滾動條(3.5.2新增)
參數值:預設為“false”,如果為true則彈出遮罩層時會去掉浏覽器右邊的滾動條。
autoPos:當浏覽器大小改變時視窗的位置是否自動定位(3.4.2新增 3.5.2修改)
參數值:預設為false,不自動定位視窗位置。如果想讓視窗自動定位,屬性值分為2種,一種值為一個對象,對象中有2個屬性,分别為left和top,left和top的值與視窗參數left和top的值是一樣的。例如:autoPos:{left:'right',top:'bottom'}。另一種是值為true,這裡視窗預設為自動居中。這和第一種值形式的:autoPos:{left:'center',top:'center'}的效果是相同的,隻不過為true是一種簡寫方式。
skin:指定視窗的皮膚(3.5.0新增)
參數值:預設為“default”。
args:傳遞的參數(3.5.0新增)
參數值:值可為任意類型的資料。
onCancel:自定義視窗關閉函數(3.5.0修改)
參數值:如果加了此參數則可以調用此函數來關閉視窗。3.5.0将此屬性改為此函數參數的作用是在關閉視窗前執行這個函數來完成一定動作。
cancelBtnTxt:設定取消按鈕的文本(3.4.2新增)
參數值:預設為“取消”。此參數和onCancel配合使用即可改變取消按鈕為其它作用的按鈕。
autoCloseFn:自動關閉視窗時執行的函數(3.4.2新增)
參數值:當指定了timer屬性後,此參數為視窗關閉前執行的函數。
bgcolor:設定遮罩層的顔色(3.4.1新增)
參數值:預設為白色(#fff)。
opacity:設定遮罩層的透明度(3.4.1新增)
參數值:預設為0.5(也就是50%的透明度),值為小于1的一位小數。
onMinSize:最小化按鈕調用的函數(3.4.1新增)
參數值:此屬性為一個函數,就是單擊最小化按鈕調用的函數,主要是為使用者提供個接口,這裡你可以自己寫這個函數。
maxBtn:是否顯示最大化按鈕(3.4.0新增)
參數值:預設true(顯示,如果titleBar參數為false,此參數無效),false(不顯示)。注:如果fixed參數為true,那麼此參數就自動為false。
minBtn:是否顯示最小化按鈕(3.4.0新增)
參數值:預設true(顯示,如果titleBar參數為false,此參數無效),false(不顯示)。最小化按鈕功能暫無
timer:定時關閉視窗時間,機關為秒(3.4.0新增)
參數值:無,不帶機關的數字,機關為秒。
id:視窗的id号
參數值:預設lhgdlgId,自定義對話框ID屬性,要保證在頁面中是唯一的,不能和頁面中任何元素的id相同。
注意:如果頁面中隻有一個彈出視窗此參數可以不寫,但頁面中如果有1個以上的彈出視窗則一定要加此參數。
title:視窗的标題文本
參數值:預設lhgdialog彈出視窗,視窗标題的檔案字元。
width:視窗的寬度
參數值:預設400,不帶機關的數字。
height:視窗的高度
參數值:預設300,不帶機關的數字。
titleBar:是否顯示标題欄
參數值:預設true(顯示),false(不顯示,注意如果不顯示一定要選擇相應的皮膚,無标題欄的皮膚)。
iconTitle:是否顯示标題欄左邊小圖示
參數值:預設true(顯示,如果titleBar參數為false,此參數無效),false(不顯示)。
xButton:是否顯示視窗右上角的X關閉按鈕
參數值:預設true(顯示,如果titleBar參數為false,此參數無效),false(不顯示)。
btnBar:是否顯示按鈕欄
參數值:預設true(顯示),false(不顯示)。
cancelBtn:是否顯示取消按鈕
參數值:預設true(顯示,要顯示的同時必須設btnBar參數為true),false(不顯示)。
page:視窗内容頁的位址
參數值:視窗的内容頁為一個單獨的頁面檔案,這個檔案的路徑是内容頁面檔案相對于調用視窗插件的路徑或也可使用絕對路徑,如果此參數的值為不同域的外部連結,那一定要使下面的link參數為真。
link:是否為外部連結
參數值:預設false(不是外部連結),true(是外部連結,這裡的外部連結指的是不同域的網址)。
html:視窗的内容為HTML代碼
參數值:可以是HTML代碼或DOM對象。
fixed:是否開啟靜止定位
參數值:預設false(不開啟),true(開啟,靜止定位指的就是視窗随屏滾動)。
left:X軸的坐标
參數值:預設center(居中),left(螢幕的左邊),right(螢幕的右邊),如果開啟了fixed則原點以浏覽器視口為基準。
top:Y軸的坐标
參數值:預設center(居中),top(螢幕的最上邊),right(螢幕的最下面),如果開啟了fixed則原點以浏覽器視口為基準。
cover:是否開啟鎖屏
參數值:預設false(不開啟),true(開啟,中斷使用者對話框之外的互動,用于顯示非常重要的操作/消息)。
drag:是否允許拖動對話框
參數值:預設true(允許),false(不允許)。
resize:是否允許拖動改變視窗大小
參數值:預設true(允許),false(不允許)。
rang:是否限制視窗挪動範圍
參數值:預設false(不限制),true(限制,也就是不允許視窗拖出浏覽器的可視區域)。
loadingText:視窗加載時的文本字元
參數值:預設“視窗正在加載中,請稍等...”。
autoSize:是否視窗自适應大小
參數值:預設false(不适應),true(自動适應視窗内容的大小)。
SetTopWindow:指定視窗要在彈出時的那個頁面的window對象
此參數已被新的url參數t所替代,3.4.0版本删除了此參數。
parent:子視窗的父視窗對象
參數值:此參數隻用在彈出的視窗中再彈出子視窗時指定父視窗對象,注意如果2層彈出視窗都有遮罩層則一定要加此參數。
dgOnLoad:視窗加載後執行的函數
參數值:注意此參數值一定要為函數。
onXclick:視窗右上角X關閉按鈕攔截函數
參數值:如果加了此參數則視窗右上角X關閉按鈕則執行此函數。
其中一些參數的用法請參照示例中的使用方法
API函數接口清單
API接口清單:
setArgs(args) :設定要傳遞的資料(3.5.0新增)
參數1:要傳遞的資料,可以為任意類型的資料。
getArgs() :擷取傳遞的資料(3.5.0新增)
參數1:無,可以為任意類型的資料。
addBtn(id,txt,fn,pos) :在視窗的按鈕欄增加按鈕(3.4.2新增pos參數)
參數1:按鈕的id
參數2:按鈕上的文本
參數3:按鈕綁定的函數
參數4:用來指定新增加按出現在已有按鈕的左邊(值為'left')還是右邊(值為'right')
SetCancelBtn(txt,fn) :重新設定取消按鈕(3.4.2新增)
參數1:按鈕的文本。
參數2:按鈕重新綁定的函數。
closeTime(second,bFn,aFn) :定時關閉視窗(3.4.0新增,3.4.2修改,3.5.2修改)
參數1:關閉視窗的時間,機關為秒。
參數2:關閉視窗前執行的函數。
參數3:關閉視窗後執行的函數。(3.5.2新增此參數)
SetPosition(top,left,fix) :重新指定視窗的位置(3.4.0新增,3.4.2修改) : SetPosition(left,top)
參數1:X軸的坐标(詳細見初始化參數裡的第17個參數)
參數2:Y軸的坐标(詳細見初始化參數裡的第18個參數)
參數3:是否是靜止定位(詳細見初始化參數裡的第16個參數,這裡要注意如果fixed參數為true時這個參數一定要為true,否則就不要加此參數)
注:原來的第3個參數在3.4.2中已删除,這個參數程式會自動根據你調用視窗時的參數fixed的設定來判斷。
maxSize() :視窗最大化函數接口(3.4.1新增)
參數:無,你可以通調用此函數來控制視窗的最大化和還原。
SetMinBtn(fn) :重新設定最小化按鈕函數(3.4.1新增)
參數1:重新給最小化按鈕綁定的函數,你可以通調用此函數重新給最小化按鈕綁定函數。
iWin(id) :擷取指定id的視窗内容頁的window對象(3.4.1新增)
參數1:指定視窗的id,此函數用來傳回指定id的視窗的内容頁的window對象,主要用在傳值使用中。
iDoc(id) :擷取指定id的視窗内容頁的document對象(3.4.1新增)
參數1:指定視窗的id,此函數用來傳回指定id的視窗的内容頁的document對象,主要用在傳值使用中。
iDg(id) :擷取指定id的視窗DOM對象(3.4.1新增)
參數1:指定視窗的id,此函數用來傳回指定id的視窗的DOM對象,主要用判斷此視窗是否存在。
SetXbtn(fn,noShow) :重新設定X按鈕動作(3.4.0新增)
參數1:重新給X按鈕綁定的函數
參數2:是否顯示X按鈕
SetTitle(txt) :重新指定标題的文本(3.4.0新增)
參數1:重新指定的标題的文本内容。
ShowDialog() :顯示視窗
無參數,jQ調用方式不需要加此方法。
cancel() :關閉視窗
無參數。
reDialogSize(width,height) :重新指定視窗的大小
參數1:視窗的寬度,如:600,不帶機關的數字
參數2:視窗的高度,如:500,不帶機關的數字
removeBtn(id) :移除視窗中按鈕欄的按鈕
參數1:按鈕的id
SetIndex() :設定視窗的層疊次序
無參數
三)API屬性接口清單:
dialogId :視窗的id(3.5.0新增)
擷取視窗設定的id值,此id不是視窗真正的id,此id是你在調用視窗時設定的id的值。
parent :父視窗對象執行個體(3.5.0新增)
此屬性就是取的你設定的parent參數屬性的值,即:J.dialog({ parent:dg }) 這裡的parent的值。
dg :視窗的DOM對象
可通過此對象對視窗和視窗内元素進行操作。
lhgDG :建立的視窗的執行個體對象
此屬性隻用在page參數指定的内容頁面中,它取的是建立此視窗的執行個體對象。
topWin :頂層頁面的window對象
此參數在3.4.1版本中删除了,要想得到頂層頁面的window對象直接寫top就行了。
topDoc :頂層頁面的document對象
此參數在3.4.1版本中删除了,要想得到頂層頁面的document對象直接寫top.document就行了。
curWin :視窗調用頁面的window對象
也就是加載lhgdialog.min.js的頁面的window對象,如果不是在架構中彈出它和topWin是相等的。
curDoc :視窗調用頁面的document對象
也就是加載lhgdialog.min.js的頁面的document對象,如果不是在架構中彈出它和topDoc是相等的。
dgWin :内容頁的window對象
如果參數為page,且link參數不為真,那這個就是内容頁的window對象。
dgDoc :内容的document對象
如果參數為page,且link參數不為真,那這個就是内容頁的document對象。