zoukankan      html  css  js  c++  java
  • thickbox.js 及 将thickbox "close or esc key "改为 中文"关闭"

    最近的项目中比较多使用的 ThickBox,今天就简单介绍下,ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容。

    要使用 ThickBox,需要下载三个文件:

    1. JS 文件:thickbox.js 或者压缩版本 thickbox-compressed.js
    2. CSS 文件:ThickBox.css
    3. 最后一个 Loading 图片:loadingAnimation.gif

    除了以上三个文件之外,你还需要有 jQuery JavaScript 类库 或者压缩版,甚至可以使用 Google 提供 CDN 加速的版本

    ThickBox 使用也非常见,首先在 HTML 文件的 HEAD 导入 jQuery JS 和 ThickBox JS 文件,并且 jQuery JS 文件必须在前:

    <script type="text/javascript" src="path-to-file/jquery.js"></script><script type="text/javascript" src="path-to-file/thickbox.js"></script>

    然后打开 thinkbox.js 文件通过 tb_pathToImage 这个变量来设置 loadingAnimation.gif 文件的路径。

    然后在 HEAD 导入 thickbox.css 文件:

    <link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

    当然你也可以吧 thickbox.css 里面的内容复制到你现在的 CSS 文件中,最后你只要给 a 元素天添加 class=”thickbox” 属性就可以开始用 thickbox。详细使用可以查看 ThickBox 官方教程

    我在使用中碰到的最大问题是,如果网页上有 Flash 的话,往往 Flash 会把 ThickBox 的弹出框给挡住,这时的解决方法也是非常简单,就是给 Flash 设置透明的参数:wmode=”transparent”。详细就是给 Flash 的 object 标签添加如下参数:<param name="wmode" value="transparent">,并在 embed 标签中设置 wmode=”transparent”,如果使用 AC_FL_RunContent,可以加多一对参数 ‘wmode’,'transparent’ 即可。如果还是有问题,可以尝试给 Flash 外面增加一个 DIV 标签,并给他设置 z-index:0; 的样式。

    thickbox 是一款基于JQuery的网页UI对话窗口插件,可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容, 使用之后可以大大丰富用户的体验。

         在使用过程中我们会发现所弹出窗口(div)右上角的关闭按钮为"close or esc key",而不是我们所熟悉的[X]或"关闭"; 如果想把它变成[X]或"关闭"应该怎么来办呢?

        将thickbox-compressed.js文件打开,ctrl+F查找关键字"close or esc key",并将其更改为[X]或"关闭",然后把文件另存为UTF-8格式,这个很重要,如果不保存为UTF-8的话,将会出现乱码。好了,进行 窗口 弹出 测试 ,此时你会发现"关闭"后面还跟了一串 讨厌的 东西 "1K 1J 1S"; 没什么说的, 同样将这串东西给干掉,搜索到它们后,将其替换成空格就可以了 。

       如果想自己写JS将弹出的窗口关闭的话,可以添加上这行代码就可以parent.tb_remove();

    demo:

    http://www.blueidea.com/articleimg/2007/12/5182/tickbox_demo.html

  • 相关阅读:
    BZOJ3413: 匹配
    BZOJ5084: hashit
    BZOJ2281: [Sdoi2011]黑白棋
    BZOJ4808: 马
    BZOJ3208: 花神的秒题计划Ⅰ
    BZOJ3714: [PA2014]Kuglarz
    BZOJ2102: [Usaco2010 Dec]The Trough Game
    JZOJ6676. 【2020.06.01省选模拟】查拉图斯特拉如是说 (第二类斯特林数+多项式多点求值)
    LOJ #3217. 「PA 2019」Desant(状压dp)
    JZOJ 5154.【NOI2017模拟6.20】树形图求和 (矩阵树定理)
  • 原文地址:https://www.cnblogs.com/dudu837/p/1851153.html
Copyright © 2011-2022 走看看