GreyBox技术总结（转）
类似于thinkbox，lightbox等。用于以一种别致的模式对话框方式展示页面，图片或者其它内容。这是它的官网：http://orangoo.com/labs/GreyBox/
我们先来看一下它的几个实例：
(1) 打开网页：
(2) 显示一组图片：
基本使用
(1) 进入官网，点击下载
(2) 解压。(其中的 installation.html 对其使用进行了说明，很简单，一看就明白。我还是写一下步骤吧)
(3) 将其中的 greybox 文件夹拷贝到 web 项目根目录下，注意：一定要放在 web 根目录下，放在其他目录或二级目下肯能不能使用，在我的工程里是这么部署的：
（顺便说下教训，一开始我将其放在了 js 文件夹下，因为我的 js 脚本都在里面放的，jQuery 也在，可就是不能用。。。最后放在了 根目录下就可以使用了。）
(4) 现在就可以使用了，我们用一个测试页来进行测试，代码如下：
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<!-- GreyBox引用开始 -->
<script type="text/javascript">
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" />
<!-- GreyBox引用结束 -->
</head>
<body>
<a href="http://www.baidu.com" title="百度" rel="gb_page[500, 500]">百度一下</a>
</body>
</html>
这样就完成了基本的使用。
但是，在实际开发中，我们需要实现这样的效果：(1) 通过点击 button 来弹出模式窗口；(2) 关闭模式窗口后，刷新父窗口。
通过基本使用，我们可以看到官网的示例都是在点击一个超链接后弹出模态对话框。
等等。
但对于实际开发，我们有时需要实现通过点击 Button 来弹出一个模态对话框。其实，稍作修改就可以实现了，由于前篇文章已经对使用做了说明，这次就直接上代码了：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<!-- GreyBox引用开始 -->
<script type="text/javascript">
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" />
<!-- GreyBox引用结束 -->
<script type="text/javascript">
//居中弹出模态窗口
function openWinCenter() {
//GB_showCenter(caption, url, /* optional */ height, width, callback_fn)
GB_showCenter("百度一下", "http://www.baidu.com", 600, 900);
}
//全屏弹出模态窗口
function openWinFull() {
//GB_showFullScreen(caption, url, callback_fn)
GB_showFullScreen("百度一下", "http://www.baidu.com");
}
</script>
</head>
<body>
<input type="button" value="居中弹出" onclick="openWinCenter()"><br/>
<input type="button" value="全屏弹出" onclick="openWinFull()"><br/>
</body>
</html>
具体用法可以看官方文档的“Advance Usage”部分。
(2) 开发过程中还会遇到这样的问题，在弹出窗口进行操作后，关闭时需要对父窗口进行刷新。怎么实现？
我们先看一下普通的 js 是怎么写的
代码如下:
<script language="javascript">
//弹出窗口
function openSubWin() {
window.open("","name1","width=100,height=200,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100");
}
//关闭子窗口，刷新父窗口
function closeSubWin() {
window.opener.location = "http://www.baidu.com";
window.close();
}
</script>
那如果使用 GreyBox 怎么实现呢？上代码，【注意】这个 js 是在子窗口的网页中写的：
代码如下:
<script type="text/javascript">
function close() {
parent.parent.location.reload();
parent.parent.GB_hide();
}
</script>
好了，至此就完成了对于 GreyBox 的学习，这些基本就可以满足我们日常的项目需要了。
相关推荐
-
GreyBox技术总结（转）
类似于thinkbox,lightbox等.用于以一种别致的模式对话框方式展示页面,图片或者其它内容.这是它的官网:http://orangoo.com/labs/GreyBox/ 我们先来看一下它的几个实例: (1) 打开网页: (2) 显示一组图片: 基本使用 (1) 进入官网,点击下载 (2) 解压.(其中的 installation.html 对其使用进行了说明,很简单,一看就明白.我还是写一下步骤吧) (3) 将其中的 greybox 文件夹拷贝到 web 项目根目录下,注意:一定要放
-
ORACLE SQL语句优化技术要点解析
操作符优化: IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格. 但是用IN的SQL性能总是比较低的,从ORACLE执行的步骤来分析用IN的SQL与不用IN的SQL有以下区别: ORACLE试图将其转换成多个表的连接,如果转换不成功则先执行IN里面的子查询,再查询外层的表记录,如果转换成功则直接采用多个表的连接方式查询. 由此可见用IN的SQL至少多了一个转换的过程.一般的SQL都可以转换成功,但对于含有分组统计等方面的SQL就不能转换了. 推荐方案:
-
Oracle数据库技术(37)
正在看的ORACLE教程是:Oracle数据库技术(37).
-
JavaScript数据推送Comet技术详解
JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服务
-
Web技术实现移动监测的介绍
Web技术实现移动监测的介绍 由上述引用语句可得出"移动监测"需要以下要素: 一个拥有摄像头的计算机用于判断移动的算法移动后的处理 注:本文涉及的所有案例均基于 PC/Mac 较新版本的 Chrome / Firefox 浏览器,部分案例需配合摄像头完成,所有截图均保存在本地. 对方不想和你说话,并向你扔来一个链接: 体验链接>> 综合案例 该案例有以下两个功能: 拍好 POST 后的 1 秒会进行拍照静止 1 秒后音乐会停止,产生移动会恢复播放状态 上述案例也许并不能直接
-
基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍
很高兴,最近项目用到了Asp.Net MVC4 + Entity Framework5,发现mvc4加入了Bundle.Web API等技术,着实让我兴奋,以前是用第三方的,这里主要说说Bundle技术. 很多大网站都没有用Bundle技术造成很多资源浪费与性能的牺牲,别小瞧 用上了你会发现他的好处: 将多个请求捆绑为一个请求,减少服务器请求数 没有使用Bundle技术,debug下看到的是实际的请求数与路径 使用Bundle技术,并且拥有缓存功能调试设置为Release模式并按F5或修改web
-
php基于jquery的ajax技术传递json数据简单实例
本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi
-
ASP动态网页制作技术经验分享
学好一门编程语言有两个条件是必不可少的,一是理论与实践结合.在实际例程去验证书本上的理论能加深你对理论的理解:二是学会总结,把学习.运用中的心得体会记下来,当成一种经验或者教训加以提炼并在日后的应用中加以改进,一定能提高你对这门编程语言的认识.以下是笔者在学习与运用ASP编程中的两点经验,希望能对大家有所帮助. ASP页面内VBScript和JScript的交互 ASP具备管理不同语言脚本程序的能力,能够自动调用合适的脚本引擎以解释脚本代码和执行内置函数.ASP开发环境提供了两种脚本引擎,即VB
-
JSP开发之生成图片验证码技术的详解
JSP开发之生成图片验证码技术的详解 我们在网页注册用户时,常常会需要格根据图片给的图片验证码把验证码输进去.那么我们今天就来学习这个. 简单来说分为三步骤: 1.底层用Java实现生成验证码图片 2.通过配置文件调用实现Java生成片 3.通过HTML技术把图片显示到网页 首先是最底层Java生成图片代码 package cn.hncu.servlets; import java.awt.Color; import java.awt.Font; import java.awt.Graphics
-
Ajax异步请求技术实例讲解
AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX不是新的编程语言,而是一种使用现有标准的新方法.ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. ajax是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换.ajax可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分