注:本页面中的示例使有的动画和ajax部分方法都使用jQuery库中相关的方法,所以使用本页面中的示例必须加载jQuery库,而独立版本的lhgDialog窗口组件不支持动画和ajax。
备注: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组件不支持动画效果。
$.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; } });
/* 扩展窗口外部方法 */ $.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 });
/* 下面的代码为组件扩展方法 */ $.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(){} });