A-A+

使用TickBox实现lightbox效果

2008年01月05日 网站运维 暂无评论 阅读 3,480 views 次

下午在写ASM时,想到用lightbox的效果来展示页面内容。寂寞部屋所使用的就是lightbox,可lightbox并不能加载网页,本想找同事要个JS,结果看到他那个太麻烦用,所以想到了之前寂寞部屋介绍过的Lightbox的周边应用里头有各种效果,结果将里面所介绍的那几种都试了一遍,最后决定使用TickBox来实现。因为其中有两种跟现在系统的JS有冲突,实现不了,具体哪辆种就忘记了。

先看下效果截图:

image

首先在<head></head>之间加上以下代码:

XML/HTML代码
  1. <style type="text/css" media="all">
  2. @import "../UserContorls/ThickBox/thickbox-code/thickbox.css";
  3. </style>
  4. <script src="../UserContorls/ThickBox/js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
  5. <script src="../UserContorls/ThickBox/thickbox-code/thickbox-compressed.js" type="text/javascript"></script>
  6. <script src="../UserContorls/ThickBox/js/global.js" type="text/javascript"></script>

虽然项目里头用来.master模板,不过经过试验其实加在页面里也是可以用的

,例如偶就直接加在 <asp:Content></content>之间。

XML/HTML代码
  1. <asp:Content ID="Content1" ContentPlaceHolderID="cphContent" runat="Server">
  2. <style type="text/css" media="all">
  3. @import "../UserContorls/ThickBox/thickbox-code/thickbox.css";
  4. </style>
  5. <script src="../UserContorls/ThickBox/js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
  6. <script src="../UserContorls/ThickBox/thickbox-code/thickbox-compressed.js" type="text/javascript"></script>
  7. <script src="../UserContorls/ThickBox/js/global.js" type="text/javascript"></script>
  8. </asp:Content>

当然,那几个JS和CSS这写文件都必须加进项目里头。

最后就是实现效果的地方了。偶是加载在Repeater里头,代码如下:

XML/HTML代码
  1. <a href='WorkPlanInfo.aspx?ID=<%# Eval("ID")%>&keepThis=true&height=480&width=600' title='<%# Eval("Title")%>' class="thickbox">
  2. <%# Eval("AddDT", "{0:yyyy-MM-dd}")%></a>

这样就可以实现酷酷的效果了。

所用到的文件偶已经打包好,需要的朋友可以点击此处下载附件:

附件:demo.rar(64901 Byte)

TickBox官网上的介绍全部都是英文的,偶的E文又不好,刚才做了下翻译,结果翻译了一半太累了,该天有空再去做个它官网上的Demo。这个东东的功能蛮强大的,不过效果感觉起来还是没有lightbox的好看,哪天心血来潮说不定把lightbox改成可以加载网页的,

给我留言

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

Copyright © 寂寞部屋 保留所有权利.   Theme  Ality

用户登录