greybox使用说明

GreyBox是一个遮罩层的组件也称模式窗口或模态窗口（所谓模态窗口，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的窗口），它运行以后可以产生不错的界面。类似于thinkbox，lightbox等。用于以一种别致的模式对话框方式展示页面，图片或者其它内容。这是它的官网：http://orangoo.com/labs/GreyBox/

使用步骤如下：

第一步：把下载的文件解压，拷贝其中的greybox目录到项目的WebRoot根目录下

第二步：在jsp页面中添加对greybox用的js和css文件的引用,代码如下：

<script type="text/javascript">
//设置greybox的根目录
var GB_ROOT_DIR = "./greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

第三步:实现功能：

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<!—必须添加dtd-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
//设置greybox的根目录
var GB_ROOT_DIR = "./greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function login(){
//GB_showCenter(caption, url, /* optional */ height, width, callback_fn)
GB_showCenter("用户登录","/greybox/login.jsp",200,300,show);
}
function show(){ alert("关闭");}
</script>
</head>
<body>
<a href="javascript:login()">登陆</a>
<script type="text/javascript">
for(var i=1;i<16;i++){
var str="<a href='p_w_picpath/"+i+".gif' rel='gb_p_w_picpathset[p_w_picpath]' title=''><img src='p_w_picpath/"
+i+".gif' border='0'/></a>"
document.write(str);
if(i%6==0){document.writeln("<br>"); }
}
</script>
</body></html>

转载于:https://blog.51cto.com/chunyongxiu/793141

greybox使用说明相关推荐

abaqus高性能服务器怎么用,高性能计算平台ABAQUS任务调度使用说明作者陈林E-Mailchenlin.PDF...
高性能计算平台ABAQUS任务调度使用说明作者陈林E-Mailchenlin.PDF 高性能计算平台ABAQUS 任务调度使用说明作者:陈林 E-Mail:chenlin@ 日期:2017-1-10 ...
linux 文件拷贝并替换,Linux_cmd replace 文件替换使用说明，帮助信息：复制代码代码如 - phpStudy...
cmd replace 文件替换使用说明帮助信息: 复制代码代码如下: 替换文件. REPLACE [drive1:][path1]filename [drive2:][path2] [/A] [ ...
Simple Dynamic Strings(SDS)源码解析和使用说明二
在<Simple Dynamic Strings(SDS)源码解析和使用说明一>文中,我们分析了SDS库中数据的基本结构和创建.释放等方法.本文将介绍其一些其他方法及实现.(转载请指明出于 ...
Delphi开发的IOCP测试Demo以及使用说明。
Delphi开发的IOCP,此为压力测试Demo和使用说明.
oracle database link mysql_oracle database link使用说明
oracle database link使用说明作用: 将多个oracle数据库逻辑上看成一个数据库,也就是说在一个数据库中可以操作另一个数据库中的对象. 简易语法: CREATE [PUBLIC] ...
序列拼接工具Bowtie使用说明
序列拼接工具Bowtie使用说明 2011-06-08 ~ ADMIN Bowtie是一个超级快速的,较为节省内存的短序列拼接至模板基因组的工具.它在拼接35碱基长度的序列时,可以达到每小时2.5亿次 ...
benchmarksql测试mysql_数据库压力测试工具 -- BenchmarkSQL 使用说明
关于数据库的压力测试,之前写过3篇Blog: 数据库基准测试(Database Benchmarking) 说明数据库压力测试工具 -- Hammerdb 使用说明数据库压力测试工具 -- Swi ...
计算机网页基础课专业,关于《计算机应用基础》课程网页下的学习资源使用说明....
关于<计算机应用基础>课程网页下的学习资源使用说明. 关于<计算机应用基础>课程网页下的学习资源使用说明各位同学:大家好! 07春学期已接近一半的时间了,新生对课程还需要更多 ...
gh ost mysql_MySQL在线DDL gh-ost 使用说明
3)使用说明:条件是操作的MySQL上需要的binlog模式是ROW.如果在一个从上测试也必须是ROW模式,还要开启log_slave_updates.根据上面的参数说明按照需求进行调整. 环境:主库 ...

greybox使用说明

greybox使用说明相关推荐

最新文章

热门文章