目录
介绍
这只是非正式的脚本展示,并非详尽无遗。请参阅上文,自己尝试一下并下载源代码和文档。
使用程序
通过调用函数创建的PopUp:PopUp(parameters)其中parameters是一个对象,其中包含个性化PopUp所需的参数:
- cancel:PopUp将如何消失(通过点击或类似Escape,Delete键......或数毫秒后)
- content:必须显示的innerHTML内容(是内容)
- class, style:用于样式目的
- fade:与外观和/或PopUp消失有关的毫秒数
- id:( 可能是)PopUp容器的id
- left, top:屏幕上的位置,如果省略,PopUp则居中
- height, width:设置PopUp尺寸
仅content参数是必需的,所有其他参数都具有默认值或可选参数。例如,此语句...
popUp({'content': "<img src='images/RabbitLake.jpg'>"})
...显示图像居中显示在屏幕上,而不更改其尺寸,并且通过单击完成删除。
弹出窗口(PopUp )如何工作
PopUp被插入到新创建的div标签中;div成为通过参数设置的可能的id的子元素,否则,它将插入到网页的开头:
(document.body.insertAdjacentElement('afterbegin',link))
如果取消模式是通过单击或通过键,则添加合适的事件侦听器:
...
if (typeof parms.cancel == "number") setTimeout(closePopUp,parms.cancel-fade[1],fade[1]);
else if (typeof parms.cancel.toLowerCase() != "no"){
if (parms.cancel.toLowerCase() == "click") {
link.addEventListener("click",clickOnce);
} else
window.addEventListener("keydown", hitOnce);
}
...
创建的div被移除时,取消选择的发生(单击是默认值)模式和事件侦听器被除去。
一些例子
渐隐,样式和退出键关闭
var parms = {'fade':'2000 2000','cancel':"Escape","style":"text-align: center"}
parms["content"] = "<H3>Rabbit lake near Montalto Dora</H3><img src='images/RabbitLake.jpg'>";
popUp(parms);
将随机图像显示为Splash
以下是带有淡入淡出效果的Splash示例,该示例通过服务器上的PHP脚本接收随机图像。
...
var parms = {'fade':'2000 2000','cancel':5000}
parms["content"] = "<img src='getImage.php?R="+Date.now()+"'>";
PopUp(parms);
...
?R="+Date.now()是为了避免图像缓存。
<?php
function randomImg($folder) {
$aImages = glob($folder . '/*.{jpg,jpeg,png,gif}', GLOB_BRACE);
shuffle($aImages);
return array_pop($aImages);
}
$fileImage = randomImg("images");
$aMimeTypes = array('jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'png' => 'image/png',
'gif' => 'image/gif',);
$path_parts = pathinfo($fileImage);
header("Content-type: ".$aMimeTypes[$path_parts['extension']]);
readfile("$fileImage");
exit(0);
?>
结论
该精简脚本允许您创建弹出窗口来显示splash信息,galleries或通过几行代码在线帮助;特别地,对于后两者,在下一版本中可以简化其使用。