关于light box的使用方法.

好长时间没有来更新自己的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个文件.

 

然后需要加入以下代码.

$(document).ready(function(){ $("a[rel^='prettyPopin']").prettyPopin({ modal : true, // 是否使用modal的模式 width : 800, // 弹出来的宽度 height: false, // 弹出来的高度 opacity: 0.3, // 透明度 animationSpeed: 'fast', // 生成DIV的速度.这个和jquery的animation里的speed有关. followScroll: true, // 是否依赖外窗口的滚动条 loader_path: '/img/prettyPopin/loader.gif', // 加载图片. loading...等. callback: function() { } }); });

 

页面链接部分的代码如下.

 

<a href="test.do" mce_href="test.do" rel="prettyPopin">test light box</a>

 

这样你在页面中单击这个链接的时候可以看到lightbox的效果了.

是不是很简单?

效果可以在prettyPopin的网站上看到. 或者自己可以先试一试.

 

补充部分

在实际的使用当中有可能发现如下问题.

 

1. 当你弹出的页面过大的时候, 可能影响页面的布局.

 - 解决方法: 因为prettyPopin在计算总页面大小和要显示的地方时, 没有考虑过大的页面情况, 这个问题可以通过修改popinRight.gif文件的大小(增大高度,宽度)来解决.(这个文件是prettypopin提供的文件. 是个背景文件.)

 

2. 我想在弹出的LightBox里面还需要做提交.

- 解决方法: 其实这个方法prettyPopin已经提供了. 你如果看prettyPopin源代码的话有这样的一块.

 

// Check for paging $('.prettyPopin a[rel=internal]').click(function(){ $link = $(this); // Fade out the current content $c.fadeOut(function(){ $c.parent().find('.loader').show(); // Submit the form $.get($link.attr('href'),function(responseText){ // Replace the content $c.html(responseText); _refreshContent($c); }); }); return false; }); // Submit the form in ajax $('.prettyPopin form').bind('submit',function(){ $theForm = $(this); // Fade out the current content $c.fadeOut(function(){ $c.parent().find('.loader').show(); // Submit the form $.post($theForm.attr('action'), $theForm.serialize(),function(responseText){ // Replace the content $c.html(responseText); _refreshContent($c); }); }); return false; });

 

在以上代码可以看出来, 他只提供了一个GET(链接的方式)和POST(<input type="submit">)的方法.

但是我如过想通过a标签,而且还要提交表单. 好像在源代码中找不到相应的功能.

只能自己写一个.

 

代码如下.

 

// Submit the form in ajax (for <a> tag) // added by sung 2010-10-21 $('.prettyPopin a[rel=internalSubmit]').click(function(){ $theForm = $('.prettyPopin form'); if (!checkValidation()) { return false; } // Fade out the current content $c.fadeOut(function(){ $c.parent().find('.loader').show(); // Submit the form $.post($theForm.attr('action'), $theForm.serialize(),function(responseText){ // Replace the content $c.html(responseText); _refreshContent($c); }); }); return false; });

 

这样我们可以在lightbox窗口的代码中通过a标签来提交表单了.

 

如下

 

<a href="#" mce_href="#" class="btn_big" onclick="javascript:doAction('complete');" rel="internalSubmit"><span>commit</span></a>

 

*注意我在onclick事件上写的只是为了我自己的逻辑处理写的, 提交表单并不是他来做的. 实际提交的是通过ajax来做的.在prettyPopin里.

 

除此之外还有一些问题, 希望prettyPopin更新一个新的版本出来.

 

写到这里回头一看, 太复杂了.

哪里没说清楚可以在下面回帖.

以便大家一起讨论.