ajax擴充套件示例

注：本頁面中的示例使有的動畫和ajax部分方法都使用jQuery庫中相關的方法，所以使用本頁面中的示例必須載入jQuery庫，而獨立版本的lhgDialog視窗元件不支援動畫和ajax。

1. AJAX高階應用：執行HTML片段中標準script的標籤

   備註：HTML片段中的<script type="text/javascript"></script>標籤包裹的javascript將會在視窗內容載入後執行。
   注：獨立版本的元件裡不支援ajax呼叫，你得單獨寫ajax呼叫程式碼。

   (本例子使用了AJAX，需要在伺服器上執行。可開啟content/login.html檢視原始碼中的自定義指令碼)

   var api = $.dialog({id:'L1360'});
   
   /* jQuery ajax */
   $.ajax({
     url:'content/login.html',
     success:function(data){
       api.content(data);
     },
     cache:false
   });

   執行»

動畫擴充套件演示

備註：動畫部分只能在載入了jQuery庫檔案下才能使用，獨立版本的lhgDialog元件不支援動畫效果。

1. 向上逐漸透明關閉視窗

   $.dialog({content:'向上逐漸透明關閉視窗',time:3,close:function(){
    
     var duration = 400, /*動畫時長*/
       api = this,
       opt = api.config,
       wrap = api.DOM.wrap,
       top = $(window).scrollTop() - wrap[0].offsetHeight;
      
     wrap.animate({top:top + 'px', opacity:0}, duration, function(){
       opt.close = function(){};
       api.close();
     });
      
     return false;
   } });

   執行»

2. 右下腳滑動通知

   /* 擴充套件視窗外部方法 */
   $.dialog.notice = function( options )
   {
     var opts = options || {},
       api, aConfig, hide, wrap, top,
       duration = opts.duration || 800;
      
     var config = {
       id: 'Notice',
       left: '100%',
       top: '100%',
       fixed: true,
       drag: false,
       resize: false,
       init: function(here){
         api = this;
         aConfig = api.config;
         wrap = api.DOM.wrap;
         top = parseInt(wrap[0].style.top);
         hide = top + wrap[0].offsetHeight;
              
         wrap.css('top', hide + 'px')
         .animate({top: top + 'px'}, duration, function(){
           opts.init && opts.init.call(api, here);
         });
       },
       close: function(here){
         wrap.animate({top: hide + 'px'}, duration, function(){
           opts.close && opts.close.call(this, here);
           aConfig.close = $.noop;
           api.close();
         });
              
         return false;
       }
     };
      
     for(var i in opts)
     {
       if( config[i] === undefined ) config[i] = opts[i];
     }
      
     return $.dialog( config );
   };
   
   /* 呼叫示例 */
   $.dialog.notice({
     title: '商業定製',
     width: 220, /*必須指定一個畫素寬度值或者百分比，否則瀏覽器視窗改變可能導致lhgDialog收縮 */
     content: '若需要商業定製，記得聯絡我噢',
     time: 5
   });

   執行»

3. 搖頭效果

   /* 下面的程式碼為元件擴充套件方法 */
   $.dialog.fn.shake = function()
   {
     var style = this.DOM.wrap[0].style,
       p = [4, 8, 4, 0, -4, -8, -4, 0],
       fx = function(){
         style.marginLeft = p.shift() + 'px';
         if(p.length <= 0){
           style.marginLeft = 0;
           clearInterval(timerId);
         }
       };
     p = p.concat(p.concat(p));
     timerId = setInterval(fx, 13);
     return this;
   };
   /* 呼叫方法演示 */
   $.dialog({
     id:'shake-demo',
     title:'登入',
     content:'帳號：<input type="text" value="guest" style="margin:5px 0;" /><br />'
       + '密碼：<input id="login-pw" type="text" value="****" />',
     lock:true,
       fixed:true,
     ok:function(){
       var pw = document.getElementById('login-pw');
       pw.select();
       pw.focus();
       this.shake();
       return false;
     },
     okVal:'登入',
       cancel:function(){}
   });

   執行»