<!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" />
<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 type="text/javascript" src="/js/lhgdialog.min.js"></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="/demo/">基础示例</a> | <a href="/value/">传值示例</a> | 动画示例 | <a href="/frameset/">框架示例</a>
</div>
</div>
<div class="line"> </div>
<div class="cbody">
<h2>ajax扩展示例</h2>
<p>注：本页面中的示例使有的动画和ajax部分方法都使用jQuery库中相关的方法，所以使用本页面中的示例必须加载jQuery库，而独立版本的lhgDialog窗口组件不支持动画和ajax。</p>
<ol>
<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/javascript</span>"></script></span>标签包裹的javascript将会在窗口内容加载后执行。<br />注：独立版本的组件里不支持ajax调用，你得单独写ajax调用代码。</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'});
/* 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>
<p>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;728px;height:90px"
data-ad-client="ca-pub-9761122628191004"
data-ad-slot="2248956816"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>
<h2>动画扩展演示</h2>
<p>备注：<em style="color:#f00;font-style:normal;">动画部分只能在加载了jQuery库文件下才能使用，独立版本的lhgDialog组件不支持动画效果。</em></p>
<ol>
<li>
<h3>向上逐渐透明关闭窗口</h3>
<p></p>
<pre class="prettyprint" id="demo_animate_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;
} });
</pre>
<p><button class="runcode" name="demo_animate_1">运行»</button></p>
</li>
<li>
<h3>右下脚滑动通知</h3>
<p></p>
<pre class="prettyprint" id="demo_animate_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: '商业定制',
220, /*必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致lhgDialog收缩 */
content: '若需要商业定制，记得联系我噢',
time: 5
});
</pre>
<p><button class="runcode" name="demo_animate_2">运行»</button></p>
</li>
<li>
<h3>摇头效果</h3>
<p></p>
<pre class="prettyprint" id="demo_animate_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(){}
});
</pre>
<p><button class="runcode" name="demo_animate_3">运行»</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>
</div>
</body>
</html>
