zoukankan      html  css  js  c++  java
  • JQUERY弹出层之插件THICKBOX(转)

    JQUERY插件THICKBOX的功能很强大,但是它的基本使用却很简单容易.但是要研究的更深,运用得更加灵活的话,还是有点难度,根据其官方站点介绍.THICKBOX支持一下浏览器:
    Windows ie 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10……但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用:
    1.肯定你先要下载jquery.js和thickbox.js了.还有thickbox.css也不能少!

    1. <script type="text/javascript" src="path-to-file/jquery.js"></script>
    2. <script type="text/javascript" src="path-to-file/thickbox.js"></script>
    3. <link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
    4. //path-to-file 就是你放这三个文件的路径

    2.弹出单张图片的方法:

    1. <a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>

    3.多张图片实现分页也很简单:

    1. <a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a> 
    2. <a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a> 
    3. <a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a> 
    4. <a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>

    4.弹出网页inLINECONTENT

    1. <input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
    2. //重要的是 #TB_inline?

    5.iFRAME形式的

    1. <a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example</a>

    所有调用的样式都得加上class=”thickbox”.这是控制弹出的效果,具体可以参照JQUERY的官方站点对THICKBOX的介绍,里面有具体效果:http://jquery.com/demo/thickbox/

  • 相关阅读:
    人工智能学习笔记003-Python运算符
    人工智能学习笔记002-Python数据类型
    人工智能学习笔记001—python介绍
    dataclasses 笔记
    Js逆向-滑动验证码图片还原
    python3 marshmallow学习
    python 安装 SQLAlchemy 报错
    flask 与 SQLAlchemy的使用
    flask 与 flask_migrate的使用
    flask与flask-script的使用
  • 原文地址:https://www.cnblogs.com/zwei1121/p/1909322.html
Copyright © 2011-2022 走看看