jQuery ThickBox很好很弓虽大

jQuery ThickBox很好很弓虽大

虽然俺们平常主要在后台捣鼓，但是偶尔也要跑到前台去凑凑热闹。今天要推荐一下ThickBox。现在回想以前没有使用JavaScript框架的年代，也不知道当时是怎么过来的。靠DOM一点一点拼凑，然后慢慢解析xml…… Oh, 买糕的,杀了俺们把。

ThickBox真的很好用，如果您还没了解过，应该考虑花点时间看看。ThickBox 是基于 jQuery编写的，主要方便我们弹出一个专业点的对话框，你可以用它来展示单一图片, 若干图片, 内嵌的内容, iframe的内容。在网页中主要样子就是render出一个半透明的遮蔽层，在屏幕中间或其它位置来显示您想写的提示性内容或者显示一些图片。它在网站有不少地方可有用到，例如用户登录可以不用跳转到登录页面去操作然后再返回前面的操作页面了，还有你知道用户某个动作很耗费时间，你要通知用户别着急小等一会，弹出这么一个对话框，绝对很专业。如果您还不心动，举个实际使用的地方，http://www.douban.com/subject/1905038/，访问豆瓣这本书，点击想读，在读或者读过都会弹出一个对话框，让你方便的操作，这样就可以充分利用ajax也能够给用户一个很好的UI表现。

ThickBox很小，所以你不用担心客户端耗费太多时间来load这些组件，压缩过的thickbox.js才6k不到，css也4k不到。总共才约10k。

下面给个简单的例子，看过大家它是多么简单了。

 

< html >
< head >
     < title > test thickbox </ title >
     < script  type ="text/javascript"  src ="jquery.js" ></ script >  
     < script  type ="text/javascript"  src ="thickbox.js" ></ script >
     < link  rel ="stylesheet"  href ="thickbox.css"  type ="text/css"  media ="screen"   />
</ head >
< body >
    < input  alt ="#TB_inline?height=300&width=400&inlineId=div1"  title ="shawnliu"  class ="thickbox"  type ="button"  value ="Show"   />    
    < a  href ="#TB_inline?height=155&width=300&inlineId=div2&modal=true"  class ="thickbox" > Show hidden modal content. </ a >
   
    < div  id ="div1"  style ="display:none" >
    < P >
     这是一个非模式对话框。
    </ P >
    </ div >
    < div  id ="div2"  style ="display:none" >
    < P >
     这是一个模式对话框。
      < p  style ="TEXT-ALIGN: center" >< INPUT  id ="Login"  onclick ="tb_remove()"  type ="submit"  value ="  Ok  "   /></ p >
    </ P >
    </ div >
</ body >
</ html >

 

这个例子够简单把。我都懒得解释了。你在一个链接或者按钮上加上一个class=”thickbox”，然后在合适的attribute上加上#TB_inline参数，你可以制定对话框的高度和宽度，以及想显示的内容所在的element id，还可以指定模式还是非模式对话框。至于图片就更加简单了。上面例子你想自己demo一下，先去下载thickbox.js和thickbox.css就很快可以看到fancy的效果。地址在这：http://jquery.com/demo/thickbox/。

如果你想在对话框中呈现的内容不在当前页面，可以通过ajax去拿，thickbox也很好的支持这种情况。

<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a> 

 <a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>

需要解释么，不需要把。更多例子参见http://jquery.com/demo/thickbox/。

类似的还有http://www.huddletogether.com/projects/lightbox/。 

http://www.blueidea.com/download/product/2007/5182.asp