開啟遮罩層,鎖定屏幕,並消除瀏覽器右邊滾動條(3.5.2新增)
J('#btn14').dialog({ id:'test14', cover:true, html:'我不能對頁面進行操作了', lockScroll:true });
運行»
使用chrome皮膚的窗口(3.5.0新增)
J('#btn41').dialog({ id:'test41', skin:'chrome', html:'我是使用了chrome皮膚的窗口' });
運行»
重新設定取消按鈕的文本,並改變取消按鈕關閉窗口的默認動作(3.4.2新增)
J('#btn37').dialog({ id:'test37', skin:'aero', cancelBtnTxt:'確定', onCancel:function(){
alert('我成了確定按鈕了');}, html:'我改變了取消按鈕' });
運行»
瀏覽器大小改變后窗口位置也改變(3.4.2新增)
J('#btn38').dialog({ id:'test38', autoPos:{left:'center',top:'center'}, html:'我的位置隨着瀏
覽器的大小的改變而改變' });
運行»
設置遮罩層顏色為黑色,透明度為0.4(3.4.1新增)
J('#btn34').dialog({ id:'test34', cover:true, bgcolor:'#000', opacity:0.2, html:'遮罩層的顏
色被我設成黑的了' });
運行»
雙擊標題欄可最大化還原窗口(3.4.1新增)
J('#btn35').dialog({ id:'test35', html:'我可以通過雙擊標題欄最大化和還原窗口了' });
運行»
通過按鈕實現窗口最大化還原(3.4.1新增)
J('#btn36').dialog({ id:'test36', html:'我是通過按鈕來實現的最大化和還原' });
運行» 最大化»
不顯示最大化按鈕示例(3.4.0新增)
J('#btn28').dialog({ id:'test28', maxBtn:false, title:'不顯示最大化按鈕', html:'我不顯示最大化
的按鈕了' });
運行»
顯示最小化按鈕示例(3.4.0新增)
J('#btn29').dialog({ id:'test29', minBtn:true, title:'顯示最小化按鈕', html:'我顯示最小化的按
鈕了'});
運行»
2秒鍾后自動關閉窗口示例(3.4.0新增)
J('#btn30').dialog({ id:'test30', timer:2, title:'2秒鍾后自動關閉窗口', html:'我2秒鍾后自動關
閉了'});
運行»
id為"test3"的窗口標題為"我更改了標題"示例
J('#btn3').dialog({ id:'test3', title:'我更改了標題', html:'我的id是test3,我是標題是"我更改了
標題"' });
運行»
設置窗口的大小
J('#btn4').dialog({ id:'test4', width:300, height:200, html:'窗口的大小改為300X200' });
運行»
是否顯示標題欄
此示例請參照皮膚制作里的示例,因為注意如果不顯示一定要選擇相應的皮膚,無標題欄的皮膚,
而且設為不顯示后iconTitle,xButton參數都無效了。
運行»
不顯示窗口左邊小圖標
J('#btn5').dialog({ id:'test5', iconTitle:false, html:'我不顯示窗口左邊的小圖標' });
運行»
不顯示窗口右邊的X關閉按鈕
J('#btn6').dialog({ id:'test6', xButton:false, html:'我不顯示窗口右邊的X關閉按鈕' });
運行»
不顯示窗口下方的按鈕欄
J('#btn7').dialog({ id:'test7', btnBar:false, html:'我不顯示按鈕欄' });
運行»
不顯示窗口按鈕欄上的取消按鈕
J('#btn8').dialog({ id:'test8', cancelBtn:false, html:'我不顯示取消按鈕' });
運行»
內容頁參數為page且為content.html文件
J('#btn9').dialog({ id:'test9', page:'content.html' });
運行»
內容頁參數為page且內容為外部鏈接qq.com,此時注意link參數一定要設為true
J('#btn10').dialog({ id:'test10', page:'http://www.qq.com', link:true, width:800,
height:600,title:'QQ首頁' });
運行»
內容頁參數為html且html值為DOM對象
J('#btn11').dialog({ id:'test11', html:J('#obj')[0] });
運行»
開啟靜止定位,並自定義窗口彈出的位置
J('#btn12').dialog({ id:'test12', html:'我可以隨屏滾動', fixed:true, left:100, top:100 });
運行»
開啟靜止定位,並將窗口定位在右下角
J('#btn13').dialog({ id:'test13', html:'我可以做為右下角的消息窗口', fixed:true, left:'right',
top:'bottom' });
運行»
不允許拖動和改變大小
J('#btn15').dialog({ id:'test15', drag:false, resize:false, html:'我不能拖動和改變大小了' });
運行»
不請允許拖出瀏覽器可視域
J('#btn16').dialog({ id:'test16', rang:true, html:'我不能拖出瀏覽器了' });
運行»
改變加載窗口時的提示文本
J('#btn17').dialog({ id:'test17', loadingText:'我是窗口加載時的提示文本,哈哈...', html:'' });
運行»
自適窗口內容的大小
J('#btn18').dialog({ id:'test18', width:300, height:200, autoSize:true,
page:'content1.html'});
運行»
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個,它們層疊的次序就亂了。
運行»
dgOnLoad參數示例
// 這是使用html參數時dgOnLoad代碼 前面的運行按鈕
function opdg2()
{
var testDG1 = new J.dialog({
id:'test20',
html:'<h3 id="txt">lhgdialog</h3>',
dgOnLoad:function(){
J('#txt').html( '我使用dgOnLoad參數改變了文本' );
}
});
}
// 這里使用的page參數時dgOnLoad代碼 后面的運行按鈕
function opdg3()
{
var testDG2 = new J.dialog({
id:'test21',
page:'content3.html',
dgOnLoad:function(){
J('#txt',testDG2.dgDoc).html( '我原來的文本是lhgdialog' );
}
});
}
運行» 運行»
onXclick參數示例
J('#btn22').dialog({ id:'test22', onXclick:function(){alert('我改變了關閉按鈕的事件,我不能
關閉窗口了');}, html:'X關閉按鈕的事件被改變了' });
運行»
onCancel參數示例
J('#btn23').dialog({ id:'test23', onCancel:function(){alert('我是在窗口關閉前執行的函數');},
html:'關閉窗口前執行onCancel函數' });
運行»
使用closeTime的第2個和第3個參數在標題欄動態顯示關閉的秒數(3.4.2新增,3.5.2修改)
J('#btn40').dialog({ id:'test40', page:'content10.html' });
//content10.html頁面里的代碼為:
var DG = frameElement.lhgDG;
dg.closeTime( 10, function(){ dg.SetTitle('窗口將在10秒鍾后自動關閉'); var n = 9;
setInterval(function(){ dg.SetTitle('窗口將在'+n+'秒鍾后自動關閉'); n--; }, 1000); }, function(){alert('我是窗口關閉后執行的函數'); });
運行»
使用SetCancelBtn方法改變取消按鈕(3.4.2新增)
J('#btn39').dialog({ id:'test39', page:'content9.html' });
//content9.html頁面里的代碼為:
var DG = frameElement.lhgDG;
dg.SetCancelBtn( '確定', function(){ alert('我變成確定按鈕了,我執行完這句再關閉窗口');
dg.cancel(); });
運行»
在內容頁中重新指定窗口標題(3.4.0新增)
J('#btn31').dialog({ id:'test31', page:'content6.html' });
//content6.html頁面里的代碼為:
var DG = frameElement.lhgDG;
function ok()
{
DG.SetTitle( '我是被按鈕改變了的標題' );
}
運行»
在內容頁中重新指定X按鈕綁定的函數(3.4.0新增)
J('#btn32').dialog({ id:'test32', page:'content7.html' });
//content7.html頁面里的代碼為:
var DG = frameElement.lhgDG;
DG.SetXbtn( ok );
function ok()
{
alert( '我又不能關閉窗口了' );
}
運行»
在內容頁中使用closeTime函數來定時關閉窗口(3.4.0新增)
J('#btn33').dialog({ id:'test33', page:'content8.html' });
//content8.html頁面里的代碼為:
var DG = frameElement.lhgDG;
DG.closeTime( 2 );
運行»
在調用頁面關閉窗口
// 這里請注意DG得定義成全局變量
testDG3 = J('#btn24').dialog({ id:'test24', html:'我只能被調用頁面上的按鈕關閉',
xButton:false,btnBar:false });
//關閉窗口按鈕的單擊事件
onclick="testDG3.cancel();"
運行» 關閉窗口»
關閉窗口刷新父頁面
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關閉函數
運行»
父窗口中打開子窗口
請參閱 常規配置參數使用演示 里的 parent參數示例並且父子窗口都加了遮罩層 示例
運行»
重新指定窗口的大小並將窗口定位在屏幕的中間(3.4.0新增)
var reSize = function()
{
testDG4.reDialogSize( 600, 500 ); testDG4.SetPosition( 'center', 'center' );
};
var testDG4 = J('#btn26').dialog({ id:'test26', html:'我的大小被改為600X500了',
dgOnLoad: reSize});
運行»
增加新的按鈕和移除按鈕
J('#btn27').dialog({ id:'test27', page:'content5.html' });
運行»
lhgdialog基本使用方法
一、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提供兩種方式彈出窗口:
Html代碼
- <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" 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" onclick="opdg('test2');"/></body>
二、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對象。