JavaScript-Tool-lhgDialog：动画示例

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(){}
   });

   运行»