GreyBox技术总结(转)


Posted in Javascript onNovember 23, 2010

类似于thinkbox,lightbox等。用于以一种别致的模式对话框方式展示页面,图片或者其它内容。这是它的官网:http://orangoo.com/labs/GreyBox/

我们先来看一下它的几个实例:

(1) 打开网页:

GreyBox技术总结(转)

(2) 显示一组图片:

GreyBox技术总结(转)

 

基本使用

(1) 进入官网,点击下载

GreyBox技术总结(转)

(2) 解压。(其中的 installation.html 对其使用进行了说明,很简单,一看就明白。我还是写一下步骤吧)

(3) 将其中的 greybox 文件夹拷贝到 web 项目根目录下,注意一定要放在 web 根目录下,放在其他目录或二级目下肯能不能使用,在我的工程里是这么部署的

GreyBox技术总结(转)

(顺便说下教训,一开始我将其放在了 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) 关闭模式窗口后,刷新父窗口。
通过基本使用,我们可以看到官网的示例都是在点击一个超链接后弹出模态对话框。

GreyBox技术总结(转)

GreyBox技术总结(转)

等等。

但对于实际开发,我们有时需要实现通过点击 Button 来弹出一个模态对话框。其实,稍作修改就可以实现了,由于前篇文章已经对使用做了说明,这次就直接上代码了:

(1) 实现按钮点击弹出模态对话框

<!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 的学习,这些基本就可以满足我们日常的项目需要了。
Javascript 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
Js基础学习资料
Nov 23 #Javascript
JavaScript 程序编码规范
Nov 23 #Javascript
javascript整除实现代码
Nov 23 #Javascript
flexigrid 参数说明
Nov 23 #Javascript
js 判断checkbox是否选中的实现代码
Nov 23 #Javascript
js 处理URL实用技巧
Nov 23 #Javascript
两个Javascript小tip资料
Nov 23 #Javascript
You might like
VFP与其他应用程序的集成
2006/10/09 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP实现文件上传与下载
2020/08/28 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python中进程和线程的区别详解
2017/10/29 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
销售顾问的岗位职责
2013/11/13 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
工作人员思想汇报
2014/01/09 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
律政俏佳人观后感
2015/06/09 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
Django显示可视化图表的实践
2021/05/10 Python
Go 内联优化让程序员爱不释手
2022/06/21 Golang