好长时间没有来更新自己的BLOG了.
这之间做的东西也没有及时来更新, 我就把这期间最让我头疼的事情写下来吧, 以便以后忘了就回来看看,也让别人参考下.
关于lightbox的实现, 有很多版本, 我使用的是PrettyPopin的一个Jquery插件. 整体效果不错,使用起来不是很难.
下面简单介绍如何使用.
环境:
jquery : jquery-1.4.3.js (www.jquery.com/)
prettyPopin.rar :
- jquery.prettyPopin.js (www.no-margin-for-errors.com/projects/prettyPopin/)
- prettyPopin.css
- 一些相关图片
浏览器: prettyPopin网站上所说的FF,还有IE7,8.还有我在本地试过Chrome, 也可以.
使用方法
在页面代码中include这2个文件.
然后需要加入以下代码.
页面链接部分的代码如下.
这样你在页面中单击这个链接的时候可以看到lightbox的效果了.
是不是很简单?
效果可以在prettyPopin的网站上看到. 或者自己可以先试一试.
补充部分
在实际的使用当中有可能发现如下问题.
1. 当你弹出的页面过大的时候, 可能影响页面的布局.
- 解决方法: 因为prettyPopin在计算总页面大小和要显示的地方时, 没有考虑过大的页面情况, 这个问题可以通过修改popinRight.gif文件的大小(增大高度,宽度)来解决.(这个文件是prettypopin提供的文件. 是个背景文件.)
2. 我想在弹出的LightBox里面还需要做提交.
- 解决方法: 其实这个方法prettyPopin已经提供了. 你如果看prettyPopin源代码的话有这样的一块.
在以上代码可以看出来, 他只提供了一个GET(链接的方式)和POST(<input type="submit">)的方法.
但是我如过想通过a标签,而且还要提交表单. 好像在源代码中找不到相应的功能.
只能自己写一个.
代码如下.
这样我们可以在lightbox窗口的代码中通过a标签来提交表单了.
如下
*注意我在onclick事件上写的只是为了我自己的逻辑处理写的, 提交表单并不是他来做的. 实际提交的是通过ajax来做的.在prettyPopin里.
除此之外还有一些问题, 希望prettyPopin更新一个新的版本出来.
写到这里回头一看, 太复杂了.
哪里没说清楚可以在下面回帖.
以便大家一起讨论.