JavaScript-Tool-lhgDialog：基礎示例-原始碼
阿新 • • 發佈：2020-07-16
| ylbtech-JavaScript-Tool-lhgDialog：基礎示例-原始碼 |
| 1.返回頂部 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"2、/> <title>基礎示例 - lhgDialog視窗元件 lhgdialog彈出視窗</title> <meta name="keywords" content="lhgdialog,dialog,彈出視窗,js視窗,js彈出視窗,js庫,對話方塊,alert,提示,警告,確認,提問,ajax,tip,confirm,open,prompt,lhgcore,javascript,jquery,window,clientside,control,open source,LGPL,dhtml,html,xhtml,plugins" /> <meta name="description" content="lhgdialog是一功能強大的簡單迷你並且高效的彈出視窗外掛,基於網路訪問並且相容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+." /> <link href="/css/common.css" type="text/css" rel="stylesheet" /> <link href="/css/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"src="/js/prettify.js"></script> <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script> <script> // skin demo (function () { var _skin, _lhgcore; var _search = window.location.search; if (_search) { _skin = _search.split('demoSkin=')[1]; }; document.write('<scr' + 'ipt src="/js/lhgdialog.min.js?skin=' + (_skin || 'default') + '"></sc' + 'ript>'); window._isDemoSkin = !!_skin; })(); </script> <script type="text/javascript" src="/js/demo.js"></script> </head> <body> <div class="container"> <div class="header"> <div class="hd_logo"><a href="/index.html">lhgDialog彈窗提示視窗元件</a></div> <div class="hd_nav"> <a href="/index.html">首頁</a> | <a href="/api/">API文件</a> | 基礎示例 | <a href="/value/">傳值示例</a> | <a href="/animate/">動畫示例</a> | <a href="/frameset/">框架示例</a> </div> </div> <div class="line"> </div> <div class="cbody"> <h2>面板切換演示</h2> <p><button class="runcode" id="demo_skin">執行»</button></p> <p> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-9761122628191004" data-ad-slot="2248956816"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <h2>配置引數演示</h2> <p></p> <ol> <li> <h3>標題 [title]</h3> <p></p> <pre class="prettyprint" id="demo_title"> $.dialog({title:'我是新標題'}); </pre> <p><button class="runcode" name="demo_title">執行»</button></p> </li> <li> <h3>內容 [content]</h3> <p>1. 傳入字串</p> <pre class="prettyprint" id="demo_content"> $.dialog({content: '我支援HTML'}); </pre> <p><button class="runcode" name="demo_content">執行»</button></p> <p>2. 使用iframe方式載入單獨的內容頁</p> <pre class="prettyprint" id="demo_content_frm"> $.dialog({content: 'url:content/content.html'}); </pre> <p><button class="runcode" name="demo_content_frm">執行»</button></p> </li> <li> <h3>確定取消按鈕 [ok & cancel]</h3> <p>備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉</p> <pre class="prettyprint" id="demo_yes_no"> $.dialog({ content: '如果定義了回撥函式才會出現相應的按鈕', ok: function(){ this.title('3秒後自動關閉').time(3); return false; }, cancelVal: '關閉', cancel: true /*為true等價於function(){}*/ }); </pre> <p><button class="runcode" name="demo_yes_no">執行»</button></p> </li> <li> <h3>最大化最小化按鈕 [max & min]</h3> <p>備註：此引數是用來顯示或隱藏最大化最小化按鈕</p> <pre class="prettyprint" id="demo_max_min"> $.dialog({ content: '不顯示最大化和最小化按鈕', max: false, min: false }); </pre> <p><button class="runcode" name="demo_max_min">執行»</button></p> </li> <li> <h3>自定義按鈕 [button]</h3> <p>備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉；button引數對應的擴充套件方法名稱也是"button"</p> <pre class="prettyprint" id="demo_button"> $.dialog({ id: 'testID', content: 'hello world!', button: [ { name: '同意', callback: function () { this.content('你同意了').time(2); return false; }, focus: true }, { name: '不同意', callback: function () { alert('你不同意') } }, { name: '無效按鈕', disabled: true }, { name: '關閉我' } ] }); </pre> <p><button class="runcode" name="demo_button">執行»</button></p> </li> <li> <h3>設定大小 [width & height]</h3> <p>備註：尺寸可以帶單位或使用百分比%</p> <pre class="prettyprint" id="demo_size"> $.dialog({ width: '700px', height: 500, content: 'url:http://www.baidu.com' }); </pre> <p><button class="runcode" name="demo_size">執行»</button></p> </li> <li> <h3>靜止定位 [fixed]</h3> <p></p> <pre class="prettyprint" id="demo_fixed"> $.dialog({ fixed: true, content: '請拖動滾動條檢視' }); </pre> <p><button class="runcode" name="demo_fixed">執行»</button></p> </li> <li> <h3>自定義座標 [left & top]</h3> <p>備註：尺寸可以帶單位或使用百分比%</p> <pre class="prettyprint" id="demo_position"> $.dialog({ left: 100, top: '60%', content: '我改變座標了' }); </pre> <p><button class="runcode" name="demo_position">執行»</button></p> <p>建立一個右下角浮動的訊息視窗</p> <pre class="prettyprint" id="demo_position2"> $.dialog({ id: 'msg', title: '公告', content: '歡迎使用lhgdialog視窗!', width: 200, height: 100, left: '100%', top: '100%', fixed: true, drag: false, resize: false }); </pre> <p><button class="runcode" name="demo_position2">執行»</button></p> <li> <h3>鎖屏 [lock & background & opacity]</h3> <p>備註：background & opacity是一個會影響到全域性的配置，後續出現的對話方塊再設定這2個引數將不再起作用</p> <pre class="prettyprint" id="demo_lock"> $.dialog({ lock: true, background: '#000', /* 背景色 */ opacity: 0.5, /* 透明度 */ content: '中斷使用者在對話方塊以外的互動，展示重要操作與訊息', icon: 'error.gif', ok: function () { /* 這裡要注意多層鎖屏一定要加parent引數 */ $.dialog({content: '再來一個鎖屏', lock: true, parent:this}); return false; }, cancel: true }); </pre> <p><button class="runcode" name="demo_lock">執行»</button></p> </li> <li> <h3>定義訊息圖示和標題欄圖村 [icon & titleIcon]</h3> <p></p> <pre class="prettyprint" id="demo_icon"> $.dialog({ icon: 'success.gif', titleIcon: 'lhgcore.gif', content: '我可以定義訊息圖示哦' }); </pre> <p><button class="runcode" name="demo_icon">執行»</button></p> </li> <li> <h3>內容與邊界填充邊距 [padding]</h3> <p>備註：注意圖片加上width和height，否則出現位置偏移</p> <pre class="prettyprint" id="demo_padding"> $.dialog({ id: 'a15', title: 'Android4.0照片', lock: true, content: '<img src="/images/android.jpg" width="600" height="404" />', padding: 0 }); </pre> <p><button class="runcode" name="demo_padding">執行»</button></p> </li> <li> <h3>定時關閉的訊息 [time]</h3> <p></p> <pre class="prettyprint" id="demo_time"> $.dialog({ time: 2, content: '兩秒後關閉' }); </pre> <p><button class="runcode" name="demo_time">執行»</button></p> </li> <li> <h3>不許拖拽 [drag & resize]</h3> <p></p> <pre class="prettyprint" id="demo_drag"> $.dialog({ drag: false, resize: false, content: '禁止拖拽' }); </pre> <p><button class="runcode" name="demo_drag">執行»</button></p> </li> <li> <h3>防止重複彈出 [id]</h3> <p></p> <pre class="prettyprint" id="demo_id"> $.dialog({ id: 'testID2', content: '再次點選執行看看' }); $.dialog({id: 'testID2'}).title('3秒後關閉').time(3); </pre> <p><button class="runcode" name="demo_id">執行»</button></p> </li> <li> <h3>初始化和關閉回撥函式 [init & close]</h3> <p>備註：回撥函式中this指向視窗例項物件本身</p> <pre class="prettyprint" id="demo_init_close"> $.dialog({ content: '初始化函式執行前視窗的內容', left: '20%', init: function(){ alert('正在執行初始化函式，此時你可看到視窗內容沒有發生變化'); this.content('我是初始化函式執行後的視窗中的內容'); }, close: function(){ alert('我是視窗關閉前執行的函式，如果返回false將阻止視窗關閉'); } }); </pre> <p><button class="runcode" name="demo_init_close">執行»</button></p> </li> <li> <h3>父視窗物件 [parent]</h3> <p>備註：此引數只用在開啟多層視窗都使用遮罩層時才會用到此引數，<b style="color:#f00">注意多層視窗鎖屏時一定要加此引數</b></p> <pre class="prettyprint" id="demo_parent"> $.dialog({ id: 'LHG1976D', /* ifrst.html 和 second.html 中的程式碼請自行檢視 */ content: 'url:content/first.html', lock:true }); </pre> <p><button class="runcode" name="demo_parent">執行»</button></p> </li> </ol> <h2>擴充套件方法演示</h2> <p>備註：擴充套件方法支援鏈式操作</p> <ol> <li> <h3>直接引用返回 [content() & title()]</h3> <p></p> <pre class="prettyprint" id="demo_api_1"> var api = $.dialog({ title: '我是對話方塊', content: '我是初始化的內容' }); api.content('對話方塊內容被擴充套件方法改變了').title('提示'); </pre> <p><button class="runcode" name="demo_api_1">執行»</button></p> </li> <li> <h3>重新整理跳轉頁面 [reload()]</h3> <p></p> <pre class="prettyprint" id="demo_api_2"> $.dialog({ content: '點確定按鈕後將重新整理視窗呼叫頁面', ok: function(){ this.reload(); } }); </pre> <p><button class="runcode" name="demo_api_2">執行»</button></p> </li> <li> <h3>按鈕介面演示 [button()]</h3> <p>備註：回撥函式如果返回false將阻止對話方塊關閉</p> <pre class="prettyprint" id="demo_api_3"> var dialog = $.dialog({ title: '警告', content: '點選管理按鈕將讓刪除按鈕可用', width: '20em', button: [{ name: '管理', callback: function () { this .content('我更改了刪除按鈕') .button({ name: '刪除', disabled: false }) .lock(); return false; }, focus: true }] }); dialog.button( { name: '刪除', callback: function () { alert('delect') }, disabled: true } ) </pre> <p><button class="runcode" name="demo_api_3">執行»</button></p> </li> <li> <h3>通過對話方塊ID引用 [get()]</h3> <p></p> <pre class="prettyprint" id="demo_api_4"> var api1 = $.dialog({ content: '我是視窗中的內容', id: 'LHG76D' }); api1.get('LHG76D',1).content('我改變了視窗內容，並在2秒後關閉').time(2); </pre> <p><button class="runcode" name="demo_api_4">執行»</button></p> </li> <li> <h3>最大化和最小化 [max() & min()]</h3> <p></p> <pre class="prettyprint" id="demo_api_5"> $.dialog({ content: '我現在是最大化視窗，點確定按鈕最小化視窗', id: 'LHG78D', ok: function(){ this.min(); /* 這裡呼叫了最小化方法 */ return false; } }).max(); </pre> <p><button class="runcode" name="demo_api_5">執行»</button></p> </li> <li> <h3>標題倒計時</h3> <p></p> <pre class="prettyprint" id="demo_api_6"> 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); } }); </pre> <p><button class="runcode" name="demo_api_6">執行»</button></p> </li> <li> <h3>關閉不刪除內容 [hide() & show()]</h3> <p></p> <pre class="prettyprint" id="demo_api_7"> $.dialog({ id: 'show-hide', content: '關閉後阻止對話方塊被刪除，只隱藏對話方塊', close: function () { this.hide(); return false; } }) </pre> <p><button class="runcode" name="demo_api_7">執行»</button></p> </li> <li> <h3>AJAX高階應用：執行HTML片段中特殊script標籤</h3> <p>備註：HTML片段中的<span style=" padding:1px; margin:0 3px; color:#03C; background:#F8F8F8"><script type="<span style="color:#090">text/dialog</span>"></script></span>標籤包裹的javascript將會在lhgdialog內部執行，其this指向對話方塊擴充套件方法，這樣可以進一步實現訊息內容模組化。</p> <p>(本例子使用了AJAX，需要在伺服器上執行。可開啟 <a href="content/login.html" target="_blank">content/login.html</a> 檢視原始碼中的自定義指令碼)</p> <pre class="prettyprint" id="demo_api_8"> var api = $.dialog({id:'L1360',title:false}); /* jQuery ajax */ $.ajax({ url:'content/login.html', success:function(data){ api.content(data); }, cache:false }); </pre> <p><button class="runcode" name="demo_api_8">執行»</button></p> </li> </ol> <h2>外部方法演示</h2> <p></p> <ol> <li> <h3>$.dialog.load() 方法</h3> <p>備註：此方法為Ajax填充內容</p> <pre class="prettyprint" id="demo_api_9"> $.dialog.load('content/ajax.html',{max:false,min:false}); </pre> <p><button class="runcode" name="demo_api_9">執行»</button></p> </li> <li> <h3>$.dialog.alert() 方法</h3> <p></p> <pre class="prettyprint" id="demo_api_10"> $.dialog.alert('請不要點選確定按鈕！',function(){ alert('叫你不要點你非典'); }); </pre> <p><button class="runcode" name="demo_api_10">執行»</button></p> </li> <li> <h3>$.dialog.confirm() 方法</h3> <p></p> <pre class="prettyprint" id="demo_api_11"> $.dialog.confirm('你確定要刪除這掉訊息嗎？', function(){ $.dialog.tips('執行確定操作'); }, function(){ $.dialog.tips('執行取消操作'); }); </pre> <p><button class="runcode" name="demo_api_11">執行»</button></p> </li> <li> <h3>$.dialog.prompt() 方法</h3> <p></p> <pre class="prettyprint" id="demo_api_12"> $.dialog.prompt('請輸入圖片網址', function(val){ $.dialog.tips(val); }, 'http://' ); </pre> <p><button class="runcode" name="demo_api_12">執行»</button></p> </li> <li> <h3>$.dialog.tips() 方法</h3> <p></p> <pre class="prettyprint" id="demo_api_13"> /* 下面的只是演示程式碼，實際應用中一般這樣寫： * $.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 ); </pre> <p><button class="runcode" name="demo_api_13">執行»</button></p> </li> <li> <h3>呼叫頁面與視窗間的資料互傳</h3> <p></p> <pre class="prettyprint" id="demo_api_14"> $.dialog.data('txtObj',$('#txt1')[0]); /* 通過資料共享方法來儲存文字框物件 */ $.dialog.data('txt1',$('#txt1').val()); /* 通過資料共享的方法來儲存文字框中的值 */ $.dialog('url:content/value.html'); </pre> <p><input id="txt1" type="text" value="呼叫頁面文字框中的值" /> <button class="runcode" name="demo_api_14">執行»</button></p> </li> </ol> </div> <div class="line"> </div> <div class="footer"> <div class="ft_copy"> Copyright © 2013-2020 <a href="http://www.lhgdialog.com/" target="_blank">www.lhgdialog.com</a>. All rights reserved. <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_5759176'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s17.cnzz.com/stat.php%3Fid%3D5759176%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script> </div> </div> <script type="text/javascript" src="//js.users.51.la/20198835.js"></script> </div> <script type="text/javascript">prettyPrint();</script> <script>_isDemoSkin && window._demoSkin && _demoSkin();</script> </div> </body> </html>
| 2.返回頂部 |
| 3.返回頂部 |
| 4.返回頂部 |
| 5.返回頂部 |
| 6.返回頂部 |
| 作者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。 |