动画示例 - lhgDialog窗口组件 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(){}
    });