彈出視窗元件基礎示例(例項程式碼)
s1.引用:jQuery dialog
<linkrel="stylesheet"href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-1.9.1.js"></script><scriptsrc="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><linkrel="stylesheet"href="http://jqueryui.com/resources/demos/style.css">
s2.這個是常用的dialog的方法,
$( "#dialog" ).dialog({
resizable: false,
height:140,
modal: true,
//按鈕
buttons: {
"取消": function() {
//關閉按鈕
$( this ).dialog( "close" );
},
"確定": function() {
$( this ).dialog( "close" );
alert("確定");
},
"刪除": function() {
$( this ).dialog( "close" );
alert("刪除");
}
}
});
});
s3.lhgDialog常用的屬性:
-
標題 [title]
$.dialog({title:'我是新標題'});
-
內容 [content]
1. 傳入字串
$.dialog({content:'我支援HTML'});
2. 使用iframe方式載入單獨的內容頁
$.dialog({content:'url:content/content.html'});
-
確定取消按鈕 [ok & cancel]
備註:回撥函式this指向擴充套件介面,如果返回false將阻止對話方塊關閉
$.dialog({ content:'如果定義了回撥函式才會出現相應的按鈕', ok:function(){ this.title('3秒後自動關閉').time(3); returnfalse; }, cancelVal:'關閉', cancel:true/*為true等價於function(){}*/ });
-
最大化最小化按鈕 [max & min]
備註:此引數是用來顯示或隱藏最大化最小化按鈕
$.dialog({ content:'不顯示最大化和最小化按鈕', max:false, min:false });
-
自定義按鈕 [button]
備註:回撥函式this指向擴充套件介面,如果返回false將阻止對話方塊關閉;button引數對應的擴充套件方法名稱也是"button"
$.dialog({ id:'testID', content:'hello world!', button:[ { name:'同意', callback:function(){ this.content('你同意了').time(2); returnfalse; }, focus:true }, { name:'不同意', callback:function(){ alert('你不同意') } }, { name:'無效按鈕', disabled:true }, { name:'關閉我' } ] });
-
設定大小 [width & height]
備註:尺寸可以帶單位或使用百分比%
$.dialog({ width:'700px', height:500, content:'url:http://www.baidu.com' });
-
靜止定位 [fixed]
$.dialog({ fixed:true, content:'請拖動滾動條檢視' });
-
自定義座標 [left & top]
備註:尺寸可以帶單位或使用百分比%
$.dialog({ left:100, top:'60%', content:'我改變座標了' });
建立一個右下角浮動的訊息視窗
$.dialog({ id:'msg', title:'公告', content:'歡迎使用lhgdialog視窗!', width:200, height:100, left:'100%', top:'100%', fixed:true, drag:false, resize:false });
-
鎖屏 [lock & background & opacity]
備註:background & opacity是一個會影響到全域性的配置,後續出現的對話方塊再設定這2個引數將不再起作用
$.dialog({ lock:true, background:'#000',/* 背景色 */ opacity:0.5,/* 透明度 */ content:'中斷使用者在對話方塊以外的互動,展示重要操作與訊息', icon:'error.gif', ok:function(){ /* 這裡要注意多層鎖屏一定要加parent引數 */ $.dialog({content:'再來一個鎖屏',lock:true, parent:this}); returnfalse; }, cancel:true });
-
定義訊息圖示和標題欄圖村 [icon & titleIcon]
$.dialog({ icon:'success.gif', titleIcon:'lhgcore.gif', content:'我可以定義訊息圖示哦' });
-
內容與邊界填充邊距 [padding]
備註:注意圖片加上width和height,否則出現位置偏移
$.dialog({ id:'a15', title:'Android4.0照片', lock:true, content:'<img src="/images/android.jpg" width="600" height="404" />', padding:0 });
-
定時關閉的訊息 [time]
$.dialog({ time:2, content:'兩秒後關閉' });
-
不許拖拽 [drag & resize]
$.dialog({ drag:false, resize:false, content:'禁止拖拽' });
-
防止重複彈出 [id]
$.dialog({ id:'testID2', content:'再次點選執行看看' }); $.dialog({id:'testID2'}).title('3秒後關閉').time(3);
-
初始化和關閉回撥函式 [init & close]
備註:回撥函式中this指向視窗例項物件本身
$.dialog({ content:'初始化函式執行前視窗的內容', left:'20%', init:function(){ alert('正在執行初始化函式,此時你可看到視窗內容沒有發生變化'); this.content('我是初始化函式執行後的視窗中的內容'); }, close:function(){ alert('我是視窗關閉前執行的函式,如果返回false將阻止視窗關閉'); } });
-
父視窗物件 [parent]
備註:此引數只用在開啟多層視窗都使用遮罩層時才會用到此引數,注意多層視窗鎖屏時一定要加此引數
$.dialog({ id:'LHG1976D', /* ifrst.html 和 second.html 中的程式碼請自行檢視 */ content:'url:content/first.html', lock:true });
擴充套件方法演示
備註:擴充套件方法支援鏈式操作
-
直接引用返回 [content() & title()]
var api = $.dialog({ title:'我是對話方塊', content:'我是初始化的內容' }); api.content('對話方塊內容被擴充套件方法改變了').title('提示');
-
重新整理跳轉頁面 [reload()]
$.dialog({ content:'點確定按鈕後將重新整理視窗呼叫頁面', ok:function(){ this.reload(); } });
-
按鈕介面演示 [button()]
備註:回撥函式如果返回false將阻止對話方塊關閉
var dialog = $.dialog({ title:'警告', content:'點選管理按鈕將讓刪除按鈕可用', width:'20em', button:[{ name:'管理', callback:function(){ this .content('我更改了刪除按鈕') .button({ name:'刪除', disabled:false }) .lock(); returnfalse; }, focus:true }] }); dialog.button( { name:'刪除', callback:function(){ alert('delect') }, disabled:true } )
-
通過對話方塊ID引用 [get()]
var api1 = $.dialog({ content:'我是視窗中的內容', id:'LHG76D' }); api1.get('LHG76D',1).content('我改變了視窗內容,並在2秒後關閉').time(2);
-
最大化和最小化 [max() & min()]
$.dialog({ content:'我現在是最大化視窗,點確定按鈕最小化視窗', id:'LHG78D', ok:function(){ this.min();/* 這裡呼叫了最小化方法 */ returnfalse; } }).max();
-
標題倒計時
var timer; $.dialog({ content:'時間越來越少,越來越少..', init:function(){ var that =this, i =5; var fn =function(){ that.title(i +'秒後關閉'); !i && that.close(); i --; }; timer = setInterval(fn,1000); fn(); }, close:function(){ clearInterval(timer); } });
-
關閉不刪除內容 [hide() & show()]
$.dialog({ id:'show-hide', content:'關閉後阻止對話方塊被刪除,只隱藏對話方塊', close:function(){ this.hide(); returnfalse; } })
-
AJAX高階應用:執行HTML片段中特殊script標籤
備註:HTML片段中的<script type="text/dialog"></script>標籤包裹的javascript將會在lhgdialog內部執行,其this指向對話方塊擴充套件方法,這樣可以進一步實現訊息內容模組化。
(本例子使用了AJAX,需要在伺服器上執行。可開啟 content/login.html 檢視原始碼中的自定義指令碼)
var api = $.dialog({id:'L1360',title:false}); /* jQuery ajax */ $.ajax({ url:'content/login.html', success:function(data){ api.content(data); }, cache:false });
外部方法演示
-
$.dialog.load() 方法
備註:此方法為Ajax填充內容
$.dialog.load('content/ajax.html',{max:false,min:false});
-
$.dialog.alert() 方法
$.dialog.alert('請不要點選確定按鈕!',function(){ alert('叫你不要點你非典'); });
-
$.dialog.confirm() 方法
$.dialog.confirm('你確定要刪除這掉訊息嗎?',function(){ $.dialog.tips('執行確定操作'); },function(){ $.dialog.tips('執行取消操作'); });
-
$.dialog.prompt() 方法
$.dialog.prompt('請輸入圖片網址', function(val){ $.dialog.tips(val); }, 'http://' );
-
$.dialog.tips() 方法
/* 下面的只是演示程式碼,實際應用中一般這樣寫: * $.dialog.tips('資料載入中...',600,'loading.gif'); * [這裡是你要執行的程式碼] * $.dialog.tips('資料載入完畢',1,'success.gif',function(){ 這裡寫完成後執行的其它程式碼 }); */ $.dialog.tips('資料載入中...',600,'loading.gif'); setTimeout(function(){ $.dialog.tips('資料載入完畢',1,'tips.gif',function(){alert('載入完成後你要做什麼?');}); },5000);
-
呼叫頁面與視窗間的資料互傳
$.dialog.data('txtObj',$('#txt1')[0]);/* 通過資料共享方法來儲存文字框物件 */ $.dialog.data('txt1',$('#txt1').val());/* 通過資料共享的方法來儲存文字框中的值 */ $.dialog('url:content/value.html');