寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,433,074 次
  • 运行天数:612 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

使用TickBox实现lightbox效果

下午在写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改成可以加载网页的,

本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2008-01-05
3,529 views
标签: ,
暂无评论

发表评论

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